8000 Merge branch 'master' of https://gitlab.com/fullstackio/thirty-days-o… · vuejsadmin/30-days-of-vue@967b920 · GitHub
[go: up one dir, main page]
Skip to content

Commit 967b920

Browse files
djirdehhdjirdehh
djirdehh
authored and
djirdehh
committed
2 parents e90fd7e + 841f5e4 commit 967b920

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+99
-80
lines changed

‎config.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ module.exports = {
33
title: `30 Days of Vue`,
44
permalink: '/30-days-of-vue',
55
subtitle: `A free introduction to Vue in 30 bite-size morsels`,
6+
gitRepoHttpUrl:
7+
'https://gitlab.com/fullstackio/thirty-days-of-vue/blob/master',
68
heroLogoUrl: './images/vue-logo.png',
79
heroPhotoUrl: './images/cover-image-sebastian-unrau-47679-unsplash.jpg',
810
paperBookPhotoUrl: './images/30-days-of-vue-hardcover.jpg',
@@ -15,6 +17,11 @@ module.exports = {
1517
1618
Over the next 30 days, we'll walk through everything you need to know to work with Vue. From the **very beginning** through topics like the **Vue Instance**, **Components**, and even **Testing**.
1719
`,
20+
whatIsThis: dedent`
21+
This post is part of the series [**30 Days of Vue**](/30-days-of-vue).
22+
23+
In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!
24+
`,
1825
pdfLength: '310+',
1926
faq: [
2027
{
@@ -35,6 +42,15 @@ module.exports = {
3542
],
3643
faqImageUrl: 'todo.jpg',
3744
faqCta: 'Enroll in this free course',
45+
46+
afterword: dedent`
47+
The entire source code for this tutorial series can be found in [the GitHub repo](https://gitlab.com/fullstackio/thirty-days-of-vue/), which includes all the styles and code samples.
48+
49+
If at any point you feel stuck, have further questions, feel free to reach out to us by:
50+
51+
* Commenting on this post at the end of the article
52+
* Tweet at us at [@fullstackio](https://twitter.com/fullstackio)
53+
`,
3854
authorSlugs: ['djirdehh'],
3955
closingCtaH1: 'Get started now',
4056
closingCtaCopy: `Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.`,

‎day-01/day-01.cq.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,6 @@ We’ll now be able to display the value of the greeting property in our Vue ins
9898

9999
The `greeting` data property in the template is now directly bound to the value in our instance. When our app loads, we’ll be presented with Hello World!
100100

101-
<iframe src='./src/index.html' style='display: block; margin: 0 auto; width: 100%'></iframe>
101+
<iframe src='./src/index.html' ></iframe>
102102

103103
That was easy, wasn’t it? In the next article, we'll take a deeper look at the `data` property of a Vue instance and how it enables the _reactivity_ of our Vue applications.

‎day-01/day-01.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,6 @@ We’ll now be able to display the value of the greeting property in our Vue ins
113113

114114
The `greeting` data property in the template is now directly bound to the value in our instance. When our app loads, we’ll be presented with Hello World!
115115

116-
<iframe src='./src/index.html' style='display: block; margin: 0 auto; width: 100%'></iframe>
116+
<iframe src='./src/index.html' ></iframe>
117117

118118
That was easy, wasn’t it? In the next article, we'll take a deeper look at the `data` property of a Vue instance and how it enables the _reactivity_ of our Vue applications.

‎day-02/day-02.cq.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
coverImageBackgroundPosition: '50% 87%;'
3+
---
4+
15
# The Vue Instance - Data
26

37
> Now that we know how to instantiate a Vue application with the Vue instance, let's take a deeper look into how the data property of a Vue instance helps enable reactivity.
@@ -43,7 +47,7 @@ With the data being bound to the template, we're now able to see the values of t
4347
<iframe src='./src/simple-binding-example/index.html'
4448
height="250"
4549
scrolling="no"
46-
style='display: block; margin: 0 auto; width: 100%'>
50+
>
4751
</iframe>
4852

4953
In Vue, information within the `data` property of an instance is known to be [reactive](https://vuejs.org/v2/guide/reactivity.html). This means that if we manage to modify or change the data values of a Vue instance, Vue will _recognize_ this change and re-render the template to show the _updated_ data values.
@@ -115,7 +119,7 @@ Give it a try! Click the 'Change Greeting' button multiple times to witness the
115119
<iframe src='./src/simple-data-change-example/index.html'
116120
height="250"
117121
scrolling="no"
118-
style='display: block; margin: 0 auto; width: 100%'>
122+
>
119123
</iframe>
120124

121125
We’ll stop here for now and spend a little time tomorrow discussing how the things we’ve learned today shape the way we build data-driven applications in Vue.

‎day-02/day-02.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ With the data being bound to the template, we're now able to see the values of t
4343
<iframe src='./src/simple-binding-example/index.html'
4444
height="250"
4545
scrolling="no"
46-
style='display: block; margin: 0 auto; width: 100%'>
46+
>
4747
</iframe>
4848

4949
In Vue, information within the `data` property of an instance is known to be [reactive](https://vuejs.org/v2/guide/reactivity.html). This means that if we manage to modify or change the data values of a Vue instance, Vue will _recognize_ this change and re-render the template to show the _updated_ data values.
@@ -145,7 +145,7 @@ Give it a try! Click the 'Change Greeting' button multiple times to witness the
145145
<iframe src='./src/simple-data-change-example/index.html'
146146
height="250"
147147
scrolling="no"
148-
style='display: block; margin: 0 auto; width: 100%'>
148+
>
149149
</iframe>
150150

151151
We’ll stop here for now and spend a little time tomorrow discussing how the things we’ve learned today shape the way we build data-driven applications in Vue.

‎day-03/day-03.cq.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The reactive nature of data in Vue help facilitates the possibility of building
1717
<iframe src='../day-02/src/simple-data-change-example/index.html'
1818
height="250"
1919
scrolling="no"
20-
style='display: block; margin: 0 auto; width: 100%'>
20+
>
2121
</iframe>
2222

2323
Let’s assume we wanted to scale the application and introduce capabilities like:

‎day-03/day-03.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The reactive nature of data in Vue help facilitates the possibility of building
1717
<iframe src='../day-02/src/simple-data-change-example/index.html'
1818
height="250"
1919
scrolling="no"
20-
style='display: block; margin: 0 auto; width: 100%'>
20+
>
2121
</iframe>
2222

2323
Let’s assume we wanted to scale the application and introduce capabilities like:

‎day-04/day-04.cq.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Here’s a code sample that shows some different event listeners with different
4848
<iframe src='./src/v-on-example/index.html'
4949
height="250"
5050
scrolling="no"
51-
style='display: block; margin: 0 auto; width: 100%'>
51+
>
5252
</iframe>
5353

5454
From the code sample above, you may have noticed the `v-on` directive be used on a `keyup.enter` event. `keyup.enter` is one of the [unique key modifiers](https://vuejs.org/v2/guide/events.html#Key-Modifiers) Vue provides to allow us to react to events from commonly used keys like the Enter key.
@@ -99,7 +99,7 @@ With the `cityImage` appropriately bound, we’ll be presented with a view of To
9999
<iframe src='./src/v-bind-example/index.html'
100100
height="325"
101101
scrolling="no"
102-
style='display: block; margin: 0 auto; width: 100%'>
102+
>
103103
</iframe>
104104

105105
## Conditional rendering with v-if (or v-show)
@@ -142,7 +142,7 @@ The text content of the first `<p>` tag that says `by Hassan who lives in Toront
142142
<iframe src='./src/v-if-example/index.html'
143143
height="325"
144144
scrolling="no"
145-
style='display: block; margin: 0 auto; width: 100%'>
145+
>
146146
</iframe>
147147

148148
I> Vue also provides the [__v-else__](https://vuejs.org/v2/guide/conditional.html#v-else) directive to describe an else block and the [__v-else-if__](https://vuejs.org/v2/guide/conditional.html#v-else-if) directive to describe an else-if-block.
@@ -155,7 +155,7 @@ Instead of the __v-if__ directive, we could also use the __v-show__ directive to
155155
<iframe src='./src/v-show-example/index.html'
156156
height="325"
157157
scrolling="no"
158-
style='display: block; margin: 0 auto; width: 100%'>
158+
>
159159
</iframe>
160160

161161
Though they achieve a similar outcome, the __v-if__ and __v-show__ directives differ from one another. The __v-if__ directive __does not render the element__ only until the stated condition is `true`. The __v-show__ directive, on the other hand, __always renders the element__ _but_ controls the CSS [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property depending on whether the stated condition is `true`.

‎day-04/day-04.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ new Vue({
9292
<iframe src='./src/v-on-example/index.html'
9393
height="250"
9494
scrolling="no"
95-
style='display: block; margin: 0 auto; width: 100%'>
95+
>
9696
</iframe>
9797

9898
From the code sample above, you may have noticed the `v-on` directive be used on a `keyup.enter` event. `keyup.enter` is one of the [unique key modifiers](https://vuejs.org/v2/guide/events.html#Key-Modifiers) Vue provides to allow us to react to events from commonly used keys like the Enter key.
@@ -167,7 +167,7 @@ With the `cityImage` appropriately bound, we’ll be presented with a view of To
167167
<iframe src='./src/v-bind-example/index.html'
168168
height="325"
169169
scrolling="no"
170-
style='display: block; margin: 0 auto; width: 100%'>
170+
>
171171
</iframe>
172172

173173
## Conditional rendering with v-if (or v-show)
@@ -249,7 +249,7 @@ The text content of the first `<p>` tag that says `by Hassan who lives in Toront
249249
<iframe src='./src/v-if-example/index.html'
250250
height="325"
251251
scrolling="no"
252-
style='display: block; margin: 0 auto; width: 100%'>
252+
>
253253
</iframe>
254254

255255
I> Vue also provides the [**v-else**](https://vuejs.org/v2/guide/conditional.html#v-else) directive to describe an else block and the [**v-else-if**](https://vuejs.org/v2/guide/conditional.html#v-else-if) directive to describe an else-if-block.
@@ -279,7 +279,7 @@ Instead of the **v-if** directive, we could also use the **v-show** directive to
279279
<iframe src='./src/v-show-example/index.html'
280280
height="325"
281281
scrolling="no"
282-
style='display: block; margin: 0 auto; width: 100%'>
282+
>
283283
</iframe>
284284

285285
Though they achieve a similar outcome, the **v-if** and **v-show** directives differ from one another. The **v-if** directive **does not render the element** only until the stated condition is `true`. The **v-show** directive, on the other hand, **always renders the element** _but_ controls the CSS [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property depending on whether the stated condition is `true`.

‎day-05/day-05.cq.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ List rendering is one of the most commonly used practices in front-end web devel
1010

1111
Take a website like [Twitter](https://twitter.com) for example. When logged in and in the main index route, we’re presented with a view similar to this:
1212

13-
![](./public/assets/twitter-lists.png)
13+
![Twitter uses lists of elements everywhere. Here we have a list of trends, a list of tweets, and a list of potential followers](./public/assets/twitter-lists.png)
1414

1515
On the homepage, we’ve become accustomed to seeing a list of trends, a list of tweets, a list of potential followers, etc. The content displayed in these lists depends on a multitude of factors—our Twitter history, who we follow, our likes, etc. As a result, it's probably safe to say all this data is dynamic.
1616

@@ -50,8 +50,7 @@ Let’s see a very simple example of this in practice. Assume we have a template
5050

5151
<iframe src='./src/static-list-example/index.html'
5252
height="275"
53-
scrolling="no"
54-
style='display: block; margin: 0 auto; width: 100%'>
53+
scrolling="no">
5554
</iframe>
5655

5756
If we had the list of numbers available to us in a collection (e.g. an array) in our Vue instance:
@@ -71,7 +70,7 @@ At this moment, the __v-for__ directive would display the list of static numbers
7170
<iframe src='./src/v-for-example/index.html'
7271
height="275"
7372
scrolling="no"
74-
style='display: block; margin: 0 auto; width: 100%'>
73+
>
7574
</iframe>
7675

7776
In addition to helping make the template be more [D.R.Y](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), the __v-for__ directive is helpful since our application is now entirely dynamic. Regardless of how the `numbers` array changes over time, our set up will always render all the numbers in the collection in the same markup we expect.
@@ -124,7 +123,7 @@ If we save our changes, refresh the app, and click the shuffle button a few time
124123
<iframe src='./src/v-for-no-key-example/index.html'
125124
height="515"
126125
scrolling="no"
127-
style='display: block; margin: 0 auto; width: 100%'>
126+
>
128127
</iframe>
129128

130129
However, if we type some information in the input of each list element _then_ click shuffle; we’ll notice something peculiar happening:
@@ -150,7 +149,7 @@ Vue will now recognize each list element’s identity; and thus _reorder_ the el
150149
<iframe src='./src/v-for-with-key-example/index.html'
151150
height="515"
152151
scrolling="no"
153-
style='display: block; margin: 0 auto; width: 100%'>
152+
>
154153
</iframe>
155154

156155
Should the __key__ attribute always be used? __It’s recommended__. The [Vue docs](https://vuejs.org/v2/guide/list.html#key) specify that the __key__ attribute should only be omitted if:

0 commit comments

Comments
 (0)
0