8000 Adding live version links for apps - for PDF readers · vuejsadmin/30-days-of-vue@21d0fc6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 21d0fc6

Browse files
djirdehhdjirdehh
committed
Adding live version links for apps - for PDF readers
1 parent 4232839 commit 21d0fc6

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

+173
-11
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,6 @@ The `greeting` data property in the template is now directly bound to the value
102102

103103
<iframe src='./src/index.html' ></iframe>
104104

105+
> Live version - https://30dofv-helloworld.surge.sh
106+
105107
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 _reactivity_ of our Vue applications.

‎day-01/day-01.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,4 +117,6 @@ The `greeting` data property in the template is now directly bound to the value
117117

118118
<iframe src='./src/index.html' ></iframe>
119119

120+
> Live version - <https://30dofv-helloworld.surge.sh>
121+
120122
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 _reactivity_ of our Vue applications.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ With the data being bound to the template, we're now able to see the values of t
5050
>
5151
</iframe>
5252

53+
> Live version - https://30dofv-simplebinding.surge.sh
54+
5355
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.
5456

5557
## Methods and Handling Events
@@ -122,4 +124,6 @@ Give it a try! Click the 'Change Greeting' button multiple times to witness the
122124
>
123125
</iframe>
124126

127+
> Live version - https://30dofv-simpledatachange.surge.sh
128+
125129
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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ With the data being bound to the template, we're now able to see the values of t
5050
>
5151
</iframe>
5252

53+
> Live version - <https://30dofv-simplebinding.surge.sh>
54+
5355
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.
5456

5557
## Methods and Handling Events
@@ -154,4 +156,6 @@ Give it a try! Click the 'Change Greeting' button multiple times to witness the
154156
>
155157
</iframe>
156158

159+
> Live version - <https://30dofv-simpledatachange.surge.sh>
160+
157161
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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ The reactive nature of data in Vue help facilitates the possibility of building
2020
>
2121
</iframe>
2222

23+
> Live version - https://30dofv-simpledatachange.surge.sh
24+
2325
Let’s assume we wanted to scale the application and introduce capabilities like:
2426

2527
- Displaying the current date and time.

‎day-03/day-03.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ The reactive nature of data in Vue help facilitates the possibility of building
2020
>
2121
</iframe>
2222

23+
> Live version - <https://30dofv-simpledatachange.surge.sh>
24+
2325
Let’s assume we wanted to scale the application and introduce capabilities like:
2426

2527
- Displaying the current date and time.

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ Here’s a code sample that shows some different event listeners with different
5757
>
5858
</iframe>
5959

60+
> Live version - https://30dofv-von.surge.sh
61+
6062
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.
6163

6264
Finally, event handlers usually have an event object that contains details about the event. In the __v-on__ directive, we’re able to access this original event object by explicitly passing in the `$event` variable:
@@ -100,14 +102,16 @@ Here’s an example of using the __v-bind__ directive to bind a data property (n
100102
{lang=javascript,line-numbers=off}
101103
<<[src/v-bind-example/main.js](./src/v-bind-example/main.js)
102104

103-
With the `cityImage` appropriately bound, we’ll be presented with a view of Toronto’s skyline:
105+
With the `cityImage` appropriately bound to a hosted image of Toronto, we’ll be presented with a view of Toronto’s skyline:
104106

105107
<iframe src='./src/v-bind-example/index.html'
106108
height="325"
107109
scrolling="no"
108110
>
109111
</iframe>
110112

113+
> Live version - https://30dofv-vbind.surge.sh
114+
111115
## Conditional rendering with v-if (or v-show)
112116

113117
Oftentimes, we may find ourselves interested in conditionally rendering content based on the value of an expression. In Vue, we can achieve this with the help of the [__v-if__](https://vuejs.org/v2/guide/conditional.html#v-if) and [__v-show__](https://vuejs.org/v2/guide/conditional.html#v-show) directives.
@@ -153,6 +157,8 @@ The text content of the first `<p>` tag that says `by Hassan who lives in Toront
153157
>
154158
</iframe>
155159

160+
> Live version - https://30dofv-vif.surge.sh
161+
156162
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.
157163

158164
Instead of the __v-if__ directive, we could also use the __v-show__ directive to conditionally render content:
@@ -166,6 +172,8 @@ Instead of the __v-if__ directive, we could also use the __v-show__ directive to
166172
>
167173
</iframe>
168174

175+
> Live version - https://30dofv-vshow.surge.sh
176+
169177
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`.
170178

171179
The __v-if__ directive is usually preferred as long as you don’t need the element to always be present in the DOM __and__ you don’t expect the toggling between displaying/hiding the element to happen very often. If we expect the element to toggle often at runtime - the __v-show__ directive would be more appropriate.

‎day-04/day-04.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ new Vue({
101101
>
102102
</iframe>
103103

104+
> Live version - <https://30dofv-von.surge.sh>
105+
104106
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.
105107

106108
Finally, event handlers usually have an event object that contains details about the event. In the **v-on** directive, we’re able to access this original event object by explicitly passing in the `$event` variable:
@@ -168,14 +170,16 @@ new Vue({
168170
});
169171
```
170172

171-
With the `cityImage` appropriately bound, we’ll be presented with a view of Toronto’s skyline:
173+
With the `cityImage` appropriately bound to a hosted image of Toronto, we’ll be presented with a view of Toronto’s skyline:
172174

173175
<iframe src='./src/v-bind-example/index.html'
174176
height="325"
175177
scrolling="no"
176178
>
177179
</iframe>
178180

181+
> Live version - <https://30dofv-vbind.surge.sh>
182+
179183
## Conditional rendering with v-if (or v-show)
180184

181185
Oftentimes, we may find ourselves interested in conditionally rendering content based on the value of an expression. In Vue, we can achieve this with the help of the [**v-if**](https://vuejs.org/v2/guide/conditional.html#v-if) and [**v-show**](https://vuejs.org/v2/guide/conditional.html#v-show) directives.
@@ -262,6 +266,8 @@ The text content of the first `<p>` tag that says `by Hassan who lives in Toront
262266
>
263267
</iframe>
264268

269+
> Live version - <https://30dofv-vif.surge.sh>
270+
265271
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.
266272

267273
Instead of the **v-if** directive, we could also use the **v-show** directive to conditionally render content:
@@ -296,6 +302,8 @@ Instead of the **v-if** directive, we could also use the **v-show** directive to
296302
>
297303
</iframe>
298304

305+
> Live version - <https://30dofv-vshow.surge.sh>
306+
299307
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`.
300308

301309
The **v-if** directive is usually preferred as long as you don’t need the element to always be present in the DOM **and** you don’t expect the toggling between displaying/hiding the element to happen very often. If we expect the element to toggle often at runtime - the **v-show** directive would be more appropriate.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ Let’s see a very simple example of this in practice. Assume we have a template
5353
scrolling="no">
5454
</iframe>
5555

56+
> Live version - https://30dofv-staticlist.surge.sh
57+
5658
If we had the list of numbers available to us in a collection (e.g. an array) in our Vue instance:
5759

5860
{lang=javascript,line-numbers=off}
@@ -73,6 +75,8 @@ At this moment, the __v-for__ directive would display the list of static numbers
7375
>
7476
</iframe>
7577

78+
> Live version - https://30dofv-vfor.surge.sh
79+
7680
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.
7781

7882
## The key attribute
@@ -126,6 +130,8 @@ If we save our changes, refresh the app, and click the shuffle button a few time
126130
>
127131
</iframe>
128132

133+
> Live version - https://30dofv-vfornokey.surge.sh
134+
129135
However, if we type some information in the input of each list element _then_ click shuffle; we’ll notice something peculiar happening:
130136

131137
[![GIF - Typing in inputs then shuffling](./public/assets/numbers-list-no-shuffle.gif)](https://bit.ly/2VyaAQI)
@@ -152,6 +158,8 @@ Vue will now recognize each list element’s identity; and thus _reorder_ the el
152158
>
153159
</iframe>
154160

161+
> Live version - https://30dofv-vforkey.surge.sh
162+
155163
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:
156164

157165
- We intentionally want the default manner of patching elements in place for performance reasons.

‎day-05/day-05.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ Let’s see a very simple example of this in practice. Assume we have a template
5353
scrolling="no">
5454
</iframe>
5555

56+
> Live version - <https://30dofv-staticlist.surge.sh>
57+
5658
If we had the list of numbers available to us in a collection (e.g. an array) in our Vue instance:
5759

5860
```javascript
@@ -94,6 +96,8 @@ At this moment, the **v-for** directive would display the list of static numbers
9496
>
9597
</iframe>
9698

99+
> Live version - <https://30dofv-vfor.surge.sh>
100+
97101
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.
98102

99103
## The key attribute
@@ -180,6 +184,8 @@ If we save our changes, refresh the app, and click the shuffle button a few time
180184
>
181185
</iframe>
182186

187+
> Live version - <https://30dofv-vfornokey.surge.sh>
188+
183189
However, if we type some information in the input of each list element _then_ click shuffle; we’ll notice something peculiar happening:
184190

185191
[![GIF - Typing in inputs then shuffling](./public/assets/numbers-list-no-shuffle.gif)](https://bit.ly/2VyaAQI)
@@ -245,6 +251,8 @@ Vue will now recognize each list element’s identity; and thus _reorder_ the el
245251
>
246252
</iframe>
247253

254+
> Live version - <https://30dofv-vforkey.surge.sh>
255+
248256
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:
249257

250258
- We intentionally want the default manner of patching elements in place for performance reasons.

0 commit comments

Comments
 (0)
0