-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
686 lines (631 loc) · 25.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Vue-presentation</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<link rel="stylesheet" href="src/css/styles.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#ffffff">
<div class="vue-logo">
<svg class="vue-logo__svg" width="256px" height="221px" viewBox="0 0 256 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z" fill="#41B883"></path>
<path d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z" fill="#41B883"></path>
<path d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z" fill="#35495E"></path>
</g>
</svg>
<h3 class="vue-logo__title">Vue.JS</h3>
</div>
<aside class="notes" data-markdown>
Today I want to tell about js framework **Vue**
</aside>
</section>
<section>
<div class="block-user-info">
<img class="user-info__photo" src="src/images/photo-evan-you.jpeg" alt="Evan You">
<div class="user-info__name">
Evan You
</div>
<ul>
<li class="user-info__position">Creator <a href="https://vuejs.org/" target="_blank">Vue.js</a></li>
<li class="user-info__position">Core Dev at Meteor</li>
<li class="user-info__position">Previously worked as a Creative Technologist at Google</li>
<li class="user-info__position">From 2016 working full-time on Vue.JS framework</li>
</ul>
<div class="user-info__social">
<a href="https://twitter.com/youyuxi" target="_blank" class="twitter">Twitter</a>
<a href="https://github.com/yyx990803/" target="_blank" class="github">Github</a>
</div>
</div>
<aside class="notes" data-markdown>
**Vue** was created by Evan You after working for Google using AngularJS in a number of projects.
He later summed up his thought process:
>I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.
</aside>
</section>
<section data-background-color="#ffffff">
<div class="history">
<h2>History</h2>
<ul>
<li>Started in late 2013</li>
<li>Initial release Feb. 2014 (v0.6)</li>
<li>Latest stable release v2.6.11</li>
<li class="fragment">Next?... <span class="fragment">v3.0 in Q2 2020</span></li>
</ul>
</div>
<aside class="notes" data-markdown>
The first source code commit to the project was dated July 2013.
What's in the future? There's no official release date, but the roadmap shows the release **Vue** 3 is planned in this year.
</aside>
</section>
<section data-background-color="#ffffff">
<section>
<h2>Advantages</h2>
<ul>
<li>Very Small Size</li>
<li>Easy to Understand and Develop Applications</li>
<li>Simple Integration</li>
<li>Detailed Documentation</li>
<li>Flexibility</li>
<li>Right to choose</li>
</ul>
<aside class="notes" data-markdown>
It is very easy to start working with it, even if you have never worked with JavaScript frameworks.
</aside>
</section>
<section>
<h2>Information</h2>
<ul>
<li>Progressive framework</li>
<li>Component oriented</li>
<li>Mix the best of React and Angular</li>
</ul>
<aside class="notes" data-markdown>
**Vue** took the best features of other libraries such as **templating syntax**, **two-way data binding** and **directives** from Angular, **virtual DOM implementation** from React.
</aside>
</section>
<section>
<h2>Flexibility</h2>
<ul>
<li>Write your template in an HTML file</li>
<li>Write your template in a string in a Javascript file</li>
<li>Use JSX in a Javascript file</li>
<li>Make your template in pure Javascript using virtual nodes</li>
</ul>
<aside class="notes" data-markdown>
All that makes using Vue.js very comfortable.
</aside>
</section>
<section>
<h2>Right to choose</h2>
<ul>
<li>
Template
<ul>
<li>html binding</li>
<li>jsx</li>
<li>jade</li>
</ul>
</li>
<li>
Component class
<ul>
<li>es5</li>
<li>es6 / es7</li>
<li>es6 + flow</li>
<li>TypeScript</li>
</ul>
</li>
</ul>
<aside class="notes" data-markdown>
Seems like it has the purpose to become a JavaScript framework of choice.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<h2>Ecosystem</h2>
<table class="ecosystem">
<tr>
<th>Project</th>
<th>Description</th>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-router">vue-router</a></td>
<td>Single-page application routing</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vuex">vuex</a></td>
<td>Large-scale state management</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-cli">vue-cli</a></td>
<td>Project scaffolding</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-loader">vue-loader</a></td>
<td>Single File Component (<code>*.vue</code> file) loader for webpack</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer">vue-server-renderer</a></td>
<td>Server-side rendering support</td>
</tr>
<tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-test-utils">vue-test-utils</a></td>
<td>Testing utility library</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-class-component">vue-class-component</a></td>
<td>TypeScript decorator for a class-based API</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-rx">vue-rx</a></td>
<td>RxJS integration</td>
</tr>
<tr>
<td><a class="ecosystem__link" href="https://github.com/vuejs/vue-devtools">vue-devtools</a></td>
<td>Browser DevTools extension</td>
</tr>
</table>
<aside class="notes" data-markdown>
**Vue** can easily be a library and a framework depending on our goals. It consists of a core library that focuses on the view layer and an ecosystem of supporting libraries.
Some of the core libraries maintained by **Vue** team are shown in the table.
And others...
</aside>
</section>
<section data-background-color="#ffffff">
<section>
<h2>How it works?</h2>
</section>
<section data-background-color="#ffffff">
<h2>MVVM model</h2>
<img src="src/images/MVVM.png" alt="MVVM">
<aside class="notes" data-markdown>
Technically, **Vue** is focused on the ViewModel layer of the MVVM pattern.
It connects the View and the Model via two way data bindings.
Actual DOM manipulations and output formatting are abstracted away into Directives and Filters.
</aside>
</section>
<section data-background-color="#ffffff">
<img src="src/images/mvvm-add.png" alt="MVVM">
<aside class="notes" data-markdown>
ViewModel - an object that syncs the Model and the View. In **Vue**.js, every **Vue** instance is a ViewModel. They are instantiated with the **Vue** constructor or its sub-classes.
View - The actual DOM that is managed by **Vue** instances. **Vue**.js uses DOM-based templating. Each **Vue** instance is associated with a corresponding DOM element.
Model - A slightly modified plain JavaScript object, or data object. Once an object is used as data inside a **Vue** instance, it becomes reactive.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Components</h2>
<img src="src/images/components.png" alt="components">
<aside class="notes" data-markdown>
In **Vue**.js, every component is simply a **Vue** instance. Components form a nested tree-like hierarchy that represents our application interface. They can be instantiated by a custom constructor returned from `Vue.extend`, but a more declarative approach is registering them with `Vue.component(id, constructor)`.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Lifecycle</h2>
<img src="src/images/lifecycle.png" alt="lifecycle">
<aside class="notes" data-markdown>
Each **Vue** instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Reactivity</h2>
<img src="src/images/reactivity.png" alt="reactivity">
<aside class="notes" data-markdown>
Every component instance has a corresponding **watcher** instance, which records any properties “touched” during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<h2>Component structure</h2>
<img src="src/images/anatomy-of-vue-component.png" alt="Anatomy of vue components">
<aside class="notes" data-markdown>
Anatomy of **Vue** Component give us a brief overview of a typical **Vue** single file component. At high-level, **Vue** single file component consists of three sections:
+ Template
+ Script
+ Style
Template section is where we put our HTML markup code along with any data variables or computed properties which are defined in script section of the code.
In script section, we can define any local data, props, computed properties, watchers, methods, **Vue** lifecycle hooks along with the registration of any child component as needed.
Finally, the style section allow us to define our component styles to make it presentable using normal CSS or by using Less, SCSS pre-processors etc.
</aside>
</section>
<section data-background-color="#ffffff">
<section>
<h2>Interpolations</h2>
<aside class="notes" data-markdown>
**Vue**.js uses an HTML-based template syntax that allows us to declaratively bind the rendered DOM to the underlying **Vue** instance’s data.
Under the hood, **Vue** compiles the templates into Virtual DOM render functions. Combined with the reactivity system, **Vue** is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Text</h2>
<pre class="code"><code class="lang-html">
<span>Message: {{ msg }}</span>
<span v-once>This will never change: {{ msg }}</span>
</code></pre>
<aside class="notes" data-markdown>
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces).
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Raw HTML</h2>
<pre class="code"><code class="lang-html">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</code></pre>
<aside class="notes" data-markdown>
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, we will need to use the `v-html` **directive**.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Attributes</h2>
<pre class="code"><code class="lang-html">
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
</code></pre>
<aside class="notes" data-markdown>
Mustaches cannot be used inside HTML attributes. Instead, we need to use a `v-bind` **directive**.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Using JavaScript Expressions</h2>
<pre class="code"><code class="lang-html">
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
</code></pre>
<aside class="notes" data-markdown>
**Vue**.js actually supports the full power of JavaScript expressions inside all data bindings.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<section>
<h2>Directives</h2>
<ul>
<li>v-bind — dynamically binds to one or more attributes</li>
<li>v-if — condition for element rendering</li>
<li>v-for — loops an array of objects</li>
<li>v-model — associates a condition with input element</li>
<li>v-on — connects the event listener to the element</li>
<li>v-show — toggles element visibility by changing the CSS display property</li>
</ul>
<aside class="notes" data-markdown>
Directives are special attributes with the `v-` prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes.
Some built-in directives are shown in the list with some examples in the following slides.
</aside>
</section>
<section>
<h5>v-bind</h5>
<pre class="code"><code class="lang-html">
<!-- full syntax -->
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
</code></pre>
</section>
<section>
<h5>v-on</h5>
<pre class="code"><code class="lang-html">
<!-- full syntax -->
<a v-on:click="doMethod"> ... </a>
<!-- shorthand -->
<a @click="doMethod"> ... </a>
</code></pre>
</section>
<section>
<h5>Dynamic arguments</h5>
<pre class="code"><code class="lang-html">
<!-- full syntax -->
<a v-bind:[attributeName]="url"> ... </a>
<!-- shorthand -->
<a :[attributeName]="url"> ... </a>
<!-- full syntax -->
<a v-on:[eventName]="doSomething"> ... </a>
<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>
</code></pre>
<aside class="notes" data-markdown>
It is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets.
</aside>
</section>
<section>
<h5>Modifiers</h5>
<pre class="code"><code class="lang-html">
<form v-on:submit.prevent="onSubmit"> ... </form>
</code></pre>
<aside class="notes" data-markdown>
Modifiers are special postfixes, which indicate that a directive should be bound in some special way.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<section>
<h2>Computed <br>Properties <br>and Watchers</h2>
</section>
<section data-background-color="#ffffff">
<h2>Computed</h2>
<pre class="code"><code class="lang-html">
<div id="demo">{{ fullName }}</div>
</code></pre>
<pre class="code"><code class="lang-javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</code></pre>
<aside class="notes" data-markdown>
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in our templates can make them bloated and hard to maintain. That’s why for any complex logic, we should use a computed property
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Watch</h2>
<pre class="code"><code class="lang-javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
</code></pre>
<aside class="notes" data-markdown>
**Vue** does provide a more generic way to observe and react to data changes on a **Vue** instance: **watch properties**. When we have some data that needs to change based on some other data, it is tempting to overuse `watch`.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Computed Setter</h2>
<pre class="code"><code class="lang-javascript">
//...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
//...
</code></pre>
<aside class="notes" data-markdown>
Computed properties are by default getter-only, but we can also provide a `setter` when we need it.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<section>
<h2>Binding HTML Classes</h2>
<pre class="code"><code class="lang-html">
<div v-bind:class="{
'active': isActive,
'text-danger': hasError
}"> ... </div>
</code></pre>
<pre class="code"><code class="lang-javascript">
//...
data: { isActive: true, hasError: false }
</code></pre>
<pre class="code"><code class="lang-html">
<div v-bind:class="classObject"> ... </div>
</code></pre>
<aside class="notes" data-markdown>
A common need for data binding is manipulating an element’s class list and its inline styles. For this reason, **Vue** provides special enhancements when `v-bind` is used with `class` and `style`.
</aside>
</section>
<section>
<h2>Binding Inline Styles</h2>
<pre class="code"><code class="lang-html">
<div v-bind:style="{
color: activeColor,
fontSize: fontSize + 'px'
}"> ... </div>
</code></pre>
<pre class="code"><code class="lang-javascript">
//...
data: { activeColor: 'red', fontSize: 30 }
</code></pre>
<aside class="notes" data-markdown>
The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object.
</aside>
</section>
</section>
<section data-background-color="#ffffff">
<h2>Conditional Rendering</h2>
<pre class="code"><code class="lang-html">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
</code></pre>
<pre class="code"><code class="lang-html">
<h1 v-show='ok'>Hello!</div>
</code></pre>
<aside class="notes" data-markdown>
The directives `v-if`, `v-else` and `v-else-if` are used to conditionally render a block.
Another option for conditionally displaying an element is the `v-show` directive.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>List Rendering</h2>
<pre class="code"><code class="lang-html">
<ul id="example-1">
<li v-for="item in items" v-bind:key="item.message">
{{ item.message }}
</li>
</ul>
</code></pre>
<pre class="code"><code class="lang-javascript">
const example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</code></pre>
<aside class="notes" data-markdown>
One of the options for list rendering is mapping an array to elements with `v-for`.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Method Event Handlers</h2>
<pre class="code"><code class="lang-html">
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div>
</code></pre>
<pre class="code"><code class="lang-javascript">
const example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
}
}
})
</code></pre>
<aside class="notes" data-markdown>
We can use the `v-on` directive to listen to DOM events and run some JavaScript when they’re triggered.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Form Input Bindings</h2>
<pre class="code"><code class="lang-html">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</code></pre>
<pre class="code"><code class="lang-html">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</code></pre>
<pre class="code"><code class="lang-html">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>Picked: {{ picked }}</span>
</code></pre>
<aside class="notes" data-markdown>
We can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements.
`v-model` internally uses different properties and emits different events for different input elements.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Event & Key Modifiers</h2>
<pre class="code"><code class="lang-html">
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- also available .prevent, .capture, .self, .once, .passive, ... -->
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- also available .tab, .delete, .esc, .space, ... -->
<input @keyup.enter="submit">
</code></pre>
<aside class="notes" data-markdown>
It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. To address this problem, **Vue** provides event modifiers for `v-on`.
</aside>
</section>
<section data-background-color="#ffffff">
<h2>Etc...</h2>
<a class="etc__link" href="https://vuejs.org/v2/guide/">https://vuejs.org/v2/guide/</a>
</section>
<section data-background-color="#ffffff">
<h2>Dev tools</h2>
<img class="add" src="src/images/devtool.png" alt="vue devtools">
<aside class="notes" data-markdown>
For debugging in the browser there is a **Vue**-devtools, which allows us to see what components are in our application and their current status.
It also works great with Vuex and allows us to perform so-called time-travel debugging: in the browser, we can see the status history and switch between them.
</aside>
</section>
<section data-background-color="#ffffff">
<h1>Vue 3</h1>
<ul>
<li class="fragment">Composition API</li>
<li class="fragment">Virtual DOM rewrite for better performance and improved TypeScript support</li>
<li class="fragment">Native portals – now called Teleport</li>
<li class="fragment">Fragments (virtual elements that won't be rendered in the DOM tree)</li>
<li class="fragment">Global mounting</li>
<li class="fragment">Conditional suspending of component rendering</li>
</ul>
<aside class="notes" data-markdown>
As Evan You summarized it, **Vue** 3 will be **faster**, **smaller**, **more maintainable** and it will be **easier to target native**.
One of the most significant changes is that a new API that will allow for a function-based way of writing our component. It lets us encapsulate logic into "composition functions" and reuse that logic across components.
Other pretty exciting changes in **Vue** 3:
+ Virtual DOM rewrite for better performance and improved TypeScript support
+ Native portals – now called Teleport
+ Fragments (virtual elements that won't be rendered in the DOM tree)
+ Global mounting
+ Conditional suspending of component rendering
+ ... and more.
</aside>
</section>
<section data-background-image="src/images/final.jpg">
<h2>Thanks</h2>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
hash: true,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>