diff --git a/assets/why-vue/chinese.js.srt b/assets/why-vue/chinese.js.srt
new file mode 100644
index 000000000..c1b354fbd
--- /dev/null
+++ b/assets/why-vue/chinese.js.srt
@@ -0,0 +1,547 @@
+1
+00:00:00,000 --> 00:00:02,418
+- 在过去的 10 年时间里
+我们的网页变得
+
+2
+00:00:02,418 --> 00:00:05,600
+更加动态化和强大了
+多亏有 JavaScript
+
+3
+00:00:05,600 --> 00:00:07,541
+我们已经把很多传统的
+
+4
+00:00:07,541 --> 00:00:10,120
+服务端代码放到了浏览器中
+
+5
+00:00:10,120 --> 00:00:13,051
+这样就产生了成千上万行的 JavaScript 代码
+
+6
+00:00:13,051 --> 00:00:15,691
+它们连接了各式各样的 HTML 和 CSS 文件
+
+7
+00:00:15,691 --> 00:00:17,821
+但缺乏正规的组织形式
+
+8
+00:00:17,821 --> 00:00:19,781
+这也是为什么越来越多的开发者使用
+
+9
+00:00:19,781 --> 00:00:23,948
+诸如 Angular、React 或 Vue 这样的
+JavaScript 框架
+
+10
+00:00:24,821 --> 00:00:27,829
+Vue 是一款值得拥有的、多用途且高性能的
+
+11
+00:00:27,829 --> 00:00:29,860
+JavaScript 框架
+它能够帮助你创建
+
+12
+00:00:29,860 --> 00:00:33,381
+可维护性和可测试性更强的代码库
+
+13
+00:00:33,381 --> 00:00:36,229
+Vue 是渐进式的 JavaScript 框架
+也就是说
+
+14
+00:00:36,229 --> 00:00:38,621
+如果你已经有一个现成的服务端应用
+
+15
+00:00:38,621 --> 00:00:41,627
+你可以将 Vue 作为该应用的一部分嵌入其中
+
+16
+00:00:41,627 --> 00:00:44,381
+带来更加丰富的交互体验
+
+17
+00:00:44,381 --> 00:00:46,269
+或者，如果你希望将更多业务逻辑
+
+18
+00:00:46,269 --> 00:00:48,240
+放到前端来实现
+
+19
+00:00:48,240 --> 00:00:50,611
+Vue 的核心库及其生态系统
+
+20
+00:00:50,611 --> 00:00:52,421
+绝对可以满足你的各式需求
+
+21
+00:00:52,421 --> 00:00:53,829
+和其它前端框架一样
+
+22
+00:00:53,829 --> 00:00:55,960
+Vue 允许你将一个网页分割成
+
+23
+00:00:55,960 --> 00:01:00,000
+可复用的组件
+每个组件都包含属于自己的 HTML
+
+24
+00:01:00,000 --> 00:01:02,291
+CSS、JavaScript 以用来渲染
+
+25
+00:01:02,291 --> 00:01:04,269
+网页中相应的地方
+
+26
+00:01:04,269 --> 00:01:06,260
+接下来我们就亲自动手感受一下 Vue
+
+27
+00:01:06,260 --> 00:01:08,301
+我们来构建一个商品库存的页面
+
+28
+00:01:08,301 --> 00:01:10,187
+也尽请关注视频结尾
+
+29
+00:01:10,187 --> 00:01:13,571
+来自 Vue 的作者尤雨溪发来的信息
+
+30
+00:01:13,571 --> 00:01:15,301
+我们不是教你如何使用 Vue
+
+31
+00:01:15,301 --> 00:01:16,981
+而是介绍一些核心概念
+
+32
+00:01:16,981 --> 00:01:19,460
+正是这些东西让 Vue 如此实用
+
+33
+00:01:19,460 --> 00:01:21,200
+和许多 JavaScript 应用一样
+
+34
+00:01:21,200 --> 00:01:24,272
+我们从网页中需要展示的数据开始
+
+35
+00:01:24,272 --> 00:01:26,591
+使用 Vue 的起步非常简单
+
+36
+00:01:26,591 --> 00:01:29,745
+我们引入 Vue 库
+创建一个 Vue 的实例
+
+37
+00:01:29,745 --> 00:01:33,673
+然后通过应用的 id 嵌入到我们的根元素中
+
+38
+00:01:33,673 --> 00:01:36,032
+el 是元素 (element) 的缩写
+
+39
+00:01:36,032 --> 00:01:39,505
+我们还要将数据放入一个对象
+
+40
+00:01:39,505 --> 00:01:41,993
+并且将 X 修改为一个表达式
+
+41
+00:01:41,993 --> 00:01:44,544
+用双大括号括起来
+
+42
+00:01:44,544 --> 00:01:46,945
+如你所看到的，它已经工作起来了
+
+43
+00:01:46,945 --> 00:01:50,695
+非常好，但是 Vue 的魔力在数据变更时才会出现
+
+44
+00:01:50,695 --> 00:01:51,975
+如果我们打开控制台
+
+45
+00:01:51,975 --> 00:01:54,735
+改变 product 的值
+
+46
+00:01:54,735 --> 00:01:57,324
+注意在 product 的值改变的同时
+
+47
+00:01:57,324 --> 00:01:59,953
+Vue 自动更新了我们的 HTML
+
+48
+00:01:59,953 --> 00:02:01,745
+这是因为 Vue 是响应式的
+
+49
+00:02:01,745 --> 00:02:03,273
+也就是说当我们的数据变更时
+
+50
+00:02:03,273 --> 00:02:05,193
+Vue 会帮你更新所有
+
+51
+00:02:05,193 --> 00:02:07,255
+网页中用到它的地方
+
+52
+00:02:07,255 --> 00:02:10,305
+除了字符串，Vue 对其它类型的数据也是如此
+
+53
+00:02:10,305 --> 00:02:11,604
+所以我们把这个简单的商品换成
+
+54
+00:02:11,604 --> 00:02:14,604
+一个商品数组试试看
+
+55
+00:02:14,604 --> 00:02:17,865
+然后我们将 <h2>
+改为一个无序列表
+
+56
+00:02:17,865 --> 00:02:20,535
+再为数组中的每个商品
+创建一个列表项
+
+57
+00:02:20,535 --> 00:02:22,618
+使用 Vue 的 v-for 指令
+
+58
+00:02:24,353 --> 00:02:26,615
+让每个商品都拥有各自的列表项
+
+59
+00:02:26,615 --> 00:02:28,495
+如你这里看到的
+
+60
+00:02:28,495 --> 00:02:30,352
+这也是一个小小的亮点
+
+61
+00:02:30,352 --> 00:02:32,312
+现在我们先从空列表开始
+
+62
+00:02:32,312 --> 00:02:34,815
+然后从一个实际的 API 获取我们的商品信息
+
+63
+00:02:34,815 --> 00:02:37,433
+这个 API 是从某个数据库获取来的
+
+64
+00:02:37,433 --> 00:02:38,863
+当应用被创建时
+
+65
+00:02:38,863 --> 00:02:41,866
+我们会从这个 API 获取最新的商品信息
+
+66
+00:02:41,866 --> 00:02:43,199
+这就是你要从这里获取的全部
+
+67
+00:02:43,199 --> 00:02:45,063
+我们获取商品列表
+
+68
+00:02:45,063 --> 00:02:46,923
+并把它们更新到我们的数据中
+
+69
+00:02:46,923 --> 00:02:48,281
+如你所看到的，在我们的网页中
+
+70
+00:02:48,281 --> 00:02:51,435
+各列表项展示了该 API 返回的对象
+
+71
+00:02:51,435 --> 00:02:53,474
+好吧，这还不是常人能读懂的样子
+
+72
+00:02:53,474 --> 00:02:56,265
+所以我们来改变一下它的展示方式
+
+73
+00:02:56,265 --> 00:02:59,643
+我们将打印出其数量和名称
+
+74
+00:02:59,643 --> 00:03:02,265
+就这样就可以了，打印出来的效果非常好
+
+75
+00:03:02,265 --> 00:03:03,563
+我们可能需要特别留意
+
+76
+00:03:03,563 --> 00:03:05,675
+数量为零的项目
+
+77
+00:03:05,675 --> 00:03:09,595
+所以我们添加一个 <span>
+写入文字 OUT OF STOCK
+
+78
+00:03:09,595 --> 00:03:13,334
+这个区域会在项目数量为零的时候出现
+
+79
+00:03:13,334 --> 00:03:16,134
+这里我们用到了 v-if 指令
+
+80
+00:03:16,134 --> 00:03:20,362
+因为我们的 jacket 数量为零，它卖完了
+
+81
+00:03:20,362 --> 00:03:22,081
+如果我们想要打印出
+
+82
+00:03:22,081 --> 00:03:24,641
+列表中商品的总数该怎么办呢？
+
+83
+00:03:24,641 --> 00:03:26,468
+为了做这件事，我们需要创建
+
+84
+00:03:26,468 --> 00:03:29,570
+一个名为 totalProducts 的计算属性
+
+85
+00:03:29,570 --> 00:03:34,228
+它会返回我们所有商品的数量总和
+
+86
+00:03:34,228 --> 00:03:36,490
+也许你对 JavaScript 的 reduce 不熟悉
+
+87
+00:03:36,490 --> 00:03:40,468
+它在这里用来把每个商品的数量加在一起
+
+88
+00:03:40,468 --> 00:03:41,851
+如你所看到的，在我们的浏览器中
+
+89
+00:03:41,851 --> 00:03:45,308
+它已经把总数量准确的加起来了
+
+90
+00:03:45,308 --> 00:03:47,588
+现在我将要在浏览器中向你展示
+
+91
+00:03:47,588 --> 00:03:51,380
+Vue 的 Chrome 插件
+我们可以在这里看到我们的数组数据
+
+92
+00:03:51,380 --> 00:03:53,547
+并就地对其进行审查
+
+93
+00:03:55,108 --> 00:03:57,460
+现在我们在命令行中，为了好玩
+
+94
+00:03:57,460 --> 00:03:59,850
+我们来把数组中最后一个项目 pop 出来
+
+95
+00:03:59,850 --> 00:04:01,828
+看看会发生什么
+
+96
+00:04:01,828 --> 00:04:04,359
+如你所看到的，不仅我们的列表同步更新了
+
+97
+00:04:04,359 --> 00:04:07,940
+连我们的商品总数也在预料之内的同步更新了
+
+98
+00:04:07,940 --> 00:04:10,410
+接下来，让我们在页面中添加一些交互行为
+
+99
+00:04:10,410 --> 00:04:12,346
+通过按钮来完成
+
+100
+00:04:12,346 --> 00:04:14,490
+我们将为每一个商品创建一个增加按钮
+
+101
+00:04:14,490 --> 00:04:15,850
+当点击它时
+
+102
+00:04:15,850 --> 00:04:18,850
+就将商品数量加一
+
+103
+00:04:19,959 --> 00:04:22,279
+回到浏览器，注意当我们添加一个项目时会怎样
+
+104
+00:04:22,279 --> 00:04:25,159
+不只是更新整个库存
+
+105
+00:04:25,159 --> 00:04:27,780
+同时当我们增加 jacket 商品数量时
+
+106
+00:04:27,780 --> 00:04:30,300
+我们的 OUT OF STOCK 提示不见了
+
+107
+00:04:30,300 --> 00:04:31,860
+如果你想点击这个按钮很多次
+
+108
+00:04:31,860 --> 00:04:33,890
+那一定很烦，所以如果我们想要
+
+109
+00:04:33,890 --> 00:04:37,719
+直接写入 jacket 或 hiking sock 的数量
+该怎么办呢？
+
+110
+00:04:37,719 --> 00:04:40,580
+我们只需创建一个文本框
+
+111
+00:04:40,580 --> 00:04:43,867
+并通过 v-model 指令
+绑定我们的商品数量字段
+
+112
+00:04:43,867 --> 00:04:46,519
+指明这一定是个数字
+
+113
+00:04:46,519 --> 00:04:48,060
+你会发现，现在我可以输入
+
+114
+00:04:48,060 --> 00:04:52,450
+每个项目的总数
+并且数据会被立刻更新
+
+115
+00:04:52,450 --> 00:04:54,500
+我甚至可以将数量设置回零
+
+116
+00:04:54,500 --> 00:04:57,899
+这样我就又看到 OUT OF STOCK 的声明了
+
+117
+00:04:57,899 --> 00:05:01,232
+而我的增加按钮仍然可以正常工作
+
+118
+00:05:02,259 --> 00:05:03,999
+如果我们构建一个大型的应用
+
+119
+00:05:03,999 --> 00:05:05,839
+在这一点上
+我们可能需要将东西分割
+
+120
+00:05:05,839 --> 00:05:09,290
+成为各自的组件和文件
+
+121
+00:05:09,290 --> 00:05:11,827
+Vue 甚至有一个命令行工具
+
+122
+00:05:11,827 --> 00:05:15,828
+使快速开启一个真实的工程变得非常简单
+
+123
+00:05:15,828 --> 00:05:18,879
+我们甚至可以使用 Vue 的单文件组件
+
+124
+00:05:18,879 --> 00:05:21,770
+它包含了各自的 HTML、JavaScrept
+
+125
+00:05:21,770 --> 00:05:23,687
+以及带作用域的 CSS 或 SCSS
+
+126
+00:05:25,599 --> 00:05:28,926
+- Hi，我是尤雨溪，Vue.js 的作者
+
+127
+00:05:28,926 --> 00:05:31,587
+你现在看到的仅仅是
+
+128
+00:05:31,587 --> 00:05:33,065
+Vue 可以做的一些皮毛的小事情
+
+129
+00:05:33,065 --> 00:05:34,856
+在我们的生态系统之中有各种丰富的东西
+
+130
+00:05:34,856 --> 00:05:36,555
+可以帮助你构建、组织
+
+131
+00:05:36,555 --> 00:05:39,076
+发展你的前端应用
+
+132
+00:05:39,076 --> 00:05:42,457
+如果想更深入的了解 Vue
+请立刻阅读我们的文档
+
+133
+00:05:42,457 --> 00:05:44,708
+我想你会乐在其中的
diff --git a/assets/why-vue/english.js.srt b/assets/why-vue/english.js.srt
new file mode 100644
index 000000000..8a4e393f7
--- /dev/null
+++ b/assets/why-vue/english.js.srt
@@ -0,0 +1,588 @@
+1
+00:00:00,000 --> 00:00:02,418
+- Over the last 10 years
+our web pages have become
+
+2
+00:00:02,418 --> 00:00:05,600
+more dynamic and powerful
+thanks to JavaScript.
+
+3
+00:00:05,600 --> 00:00:07,541
+We've moved a lot of
+code that was normally on
+
+4
+00:00:07,541 --> 00:00:10,120
+the server side into our browsers,
+
+5
+00:00:10,120 --> 00:00:13,051
+leaving us with thousands
+of lines of JavaScript code
+
+6
+00:00:13,051 --> 00:00:15,691
+connecting to various HTML and CSS files
+
+7
+00:00:15,691 --> 00:00:17,821
+with no formal organization.
+
+8
+00:00:17,821 --> 00:00:19,781
+This is why more and
+more developers are using
+
+9
+00:00:19,781 --> 00:00:23,948
+JavaScript frameworks like,
+Angular, React, or Vue.
+
+10
+00:00:24,821 --> 00:00:27,829
+Vue is an approachable,
+versatile, and performant
+
+11
+00:00:27,829 --> 00:00:29,860
+JavaScript framework
+that helps you create
+
+12
+00:00:29,860 --> 00:00:33,381
+a more maintainable,
+and testable code base.
+
+13
+00:00:33,381 --> 00:00:36,229
+Vue is a progressive JavaScript 
+framework, which means,
+
+14
+00:00:36,229 --> 00:00:38,621
+if you have an existing
+server-side application,
+
+15
+00:00:38,621 --> 00:00:41,627
+you can plug Vue into just
+one part of your application
+
+16
+00:00:41,627 --> 00:00:44,381
+that needs a richer, more
+interactive experience.
+
+17
+00:00:44,381 --> 00:00:46,269
+Or, if you want to build
+more business logic
+
+18
+00:00:46,269 --> 00:00:48,240
+into your frontend from the get go,
+
+19
+00:00:48,240 --> 00:00:50,611
+Vue has the core libraries
+and the ecosystem
+
+20
+00:00:50,611 --> 00:00:52,421
+you'll need to scale.
+
+21
+00:00:52,421 --> 00:00:53,829
+Like other frontend frameworks,
+
+22
+00:00:53,829 --> 00:00:55,960
+Vue allows you to take a
+web page and split it up
+
+23
+00:00:55,960 --> 00:01:00,000
+into reusable components,
+each having its own HTML,
+
+24
+00:01:00,000 --> 00:01:02,291
+CSS, and JavaScript needed to render
+
+25
+00:01:02,291 --> 00:01:04,269
+that piece of the page.
+
+26
+00:01:04,269 --> 00:01:06,260
+Next, we'll take a look
+at Vue in action by
+
+27
+00:01:06,260 --> 00:01:08,301
+building a product inventory page,
+
+28
+00:01:08,301 --> 00:01:10,187
+but stay tuned to the end of the video
+
+29
+00:01:10,187 --> 00:01:13,571
+for a message from
+Vue's creator, Evan You.
+
+30
+00:01:13,571 --> 00:01:15,301
+We won't be teaching you how to use Vue,
+
+31
+00:01:15,301 --> 00:01:16,981
+but we'll introduce a couple key concepts
+
+32
+00:01:16,981 --> 00:01:19,460
+that make Vue so useful.
+
+33
+00:01:19,460 --> 00:01:21,200
+As with many JavaScript applications,
+
+34
+00:01:21,200 --> 00:01:24,272
+we start from the need to
+display data on to our web page.
+
+35
+00:01:24,272 --> 00:01:26,591
+With Vue, it starts out really simple.
+
+36
+00:01:26,591 --> 00:01:29,745
+We include the Vue library,
+create a Vue instance,
+
+37
+00:01:29,745 --> 00:01:33,673
+and plug into our root
+element with the ID of app.
+
+38
+00:01:33,673 --> 00:01:36,032
+E L stands for element.
+
+39
+00:01:36,032 --> 00:01:39,505
+We'll also move our data inside an object
+
+40
+00:01:39,505 --> 00:01:41,993
+and change X into an expression
+
+41
+00:01:41,993 --> 00:01:44,544
+with the double curly braces.
+
+42
+00:01:44,544 --> 00:01:46,945
+As you can see, it works.
+
+43
+00:01:46,945 --> 00:01:50,695
+Pretty cool, but the magic of
+Vue starts when data changes.
+
+44
+00:01:50,695 --> 00:01:51,975
+If we jump into the console,
+
+45
+00:01:51,975 --> 00:01:54,735
+we change the value of our product.
+
+46
+00:01:54,735 --> 00:01:57,324
+Notice that as soon as the
+value of product changed,
+
+47
+00:01:57,324 --> 00:01:59,953
+Vue automatically updated our HTML.
+
+48
+00:01:59,953 --> 00:02:01,745
+This is because Vue is reactive,
+
+49
+00:02:01,745 --> 00:02:03,273
+meaning that when our data changes,
+
+50
+00:02:03,273 --> 00:02:05,193
+Vue takes care of updating all the places
+
+51
+00:02:05,193 --> 00:02:07,255
+we're using it in our web page.
+
+52
+00:02:07,255 --> 00:02:10,305
+This works with any kind
+of data, not just strings.
+
+53
+00:02:10,305 --> 00:02:11,604
+So instead of a single product,
+
+54
+00:02:11,604 --> 00:02:14,604
+let's use an array of products.
+
+55
+00:02:14,604 --> 00:02:17,865
+Then we'll update our
+H2 to an unordered list,
+
+56
+00:02:17,865 --> 00:02:20,535
+and create a new list item
+for each product in the array
+
+57
+00:02:20,535 --> 00:02:22,618
+using Vue's v-for directive.
+
+58
+00:02:24,353 --> 00:02:26,615
+This way, each product
+gets its own list item
+
+59
+00:02:26,615 --> 00:02:28,495
+as you see here.
+
+60
+00:02:28,495 --> 00:02:30,352
+This is still a little contrived though.
+
+61
+00:02:30,352 --> 00:02:32,312
+So let's start with our list empty
+
+62
+00:02:32,312 --> 00:02:34,815
+and fetch our products from an actual API
+
+63
+00:02:34,815 --> 00:02:37,433
+which could be coming
+from a database somewhere.
+
+64
+00:02:37,433 --> 00:02:38,863
+When our app is created,
+
+65
+00:02:38,863 --> 00:02:41,866
+we'll fetch the latest
+products from this API.
+
+66
+00:02:41,866 --> 00:02:43,199
+All you need to take from it is that
+
+67
+00:02:43,199 --> 00:02:45,063
+we're fetching our list of products
+
+68
+00:02:45,063 --> 00:02:46,923
+and updating them in our data.
+
+69
+00:02:46,923 --> 00:02:48,281
+As you can see on our web page,
+
+70
+00:02:48,281 --> 00:02:51,435
+each list item is showing
+the object it returned.
+
+71
+00:02:51,435 --> 00:02:53,474
+Well, it's not human readable yet,
+
+72
+00:02:53,474 --> 00:02:56,265
+so let's change the way it's displayed.
+
+73
+00:02:56,265 --> 00:02:59,643
+We'll print out quantity and name.
+
+74
+00:02:59,643 --> 00:03:02,265
+And there it is, printing out nicely.
+
+75
+00:03:02,265 --> 00:03:03,563
+We might want to call attention to the
+
+76
+00:03:03,563 --> 00:03:05,675
+items that have quantity zero.
+
+77
+00:03:05,675 --> 00:03:09,595
+So let's add a little span
+with the text, out of stock.
+
+78
+00:03:09,595 --> 00:03:13,334
+This should only appear if
+our item quantity equals zero.
+
+79
+00:03:13,334 --> 00:03:16,134
+We're going to use the v-if directive.
+
+80
+00:03:16,134 --> 00:03:20,362
+Because our jacket has quantity
+of zero, it's out of stock.
+
+81
+00:03:20,362 --> 00:03:22,081
+What if we wanted to
+print out the total number
+
+82
+00:03:22,081 --> 00:03:24,641
+of products under our list?
+
+83
+00:03:24,641 --> 00:03:26,468
+To make this work, we need to create
+
+84
+00:03:26,468 --> 00:03:29,570
+a computed property called totalProducts
+
+85
+00:03:29,570 --> 00:03:34,228
+which returns the total
+quantity of our products.
+
+86
+00:03:34,228 --> 00:03:36,490
+If you're not familiar
+with JavaScript reduce,
+
+87
+00:03:36,490 --> 00:03:40,468
+it's adding up all the
+quantities from each product.
+
+88
+00:03:40,468 --> 00:03:41,851
+As you can see, over in our browser,
+
+89
+00:03:41,851 --> 00:03:45,308
+it's properly adding
+up all the quantities.
+
+90
+00:03:45,308 --> 00:03:47,588
+Here in the browser, I
+want to show you Vue's
+
+91
+00:03:47,588 --> 00:03:51,380
+Chrome plugin where we
+can see our array of data
+
+92
+00:03:51,380 --> 00:03:53,547
+and inspect it right here.
+
+93
+00:03:55,108 --> 00:03:57,460
+Since we're in the console, just for fun,
+
+94
+00:03:57,460 --> 00:03:59,850
+let's pop the last item out of the array
+
+95
+00:03:59,850 --> 00:04:01,828
+and see what happens.
+
+96
+00:04:01,828 --> 00:04:04,359
+As you can see, not only
+is our list updated,
+
+97
+00:04:04,359 --> 00:04:07,940
+but our total as well, as you would hope.
+
+98
+00:04:07,940 --> 00:04:10,410
+Next, let's add some
+interactivity to this page
+
+99
+00:04:10,410 --> 00:04:12,346
+through the use of a button.
+
+100
+00:04:12,346 --> 00:04:14,490
+We'll create an add
+button for each product
+
+101
+00:04:14,490 --> 00:04:15,850
+and when a click occurs,
+
+102
+00:04:15,850 --> 00:04:18,850
+we'll increment the quantity by one.
+
+103
+00:04:19,959 --> 00:04:22,279
+Back in the browser, notice
+how when we add an item,
+
+104
+00:04:22,279 --> 00:04:25,159
+not only does the total
+inventory get updated,
+
+105
+00:04:25,159 --> 00:04:27,780
+but also if we increment
+our jacket product,
+
+106
+00:04:27,780 --> 00:04:30,300
+our out of stock notice goes away.
+
+107
+00:04:30,300 --> 00:04:31,860
+Clicking this button a million times
+
+108
+00:04:31,860 --> 00:04:33,890
+is going to get tiring,
+so what if we wanted to
+
+109
+00:04:33,890 --> 00:04:37,719
+write in the quantity of
+jackets or hiking socks?
+
+110
+00:04:37,719 --> 00:04:40,580
+We just create a new input
+field and bind it to our
+
+111
+00:04:40,580 --> 00:04:43,867
+product quantity field
+with the v-model directive
+
+112
+00:04:43,867 --> 00:04:46,519
+specifying that it is always a number.
+
+113
+00:04:46,519 --> 00:04:48,060
+You'll notice now, I can input the total
+
+114
+00:04:48,060 --> 00:04:52,450
+quantity of each item and
+it gets updated immediately.
+
+115
+00:04:52,450 --> 00:04:54,500
+I can even set the quantity back to zero
+
+116
+00:04:54,500 --> 00:04:57,899
+and I get my out of stock statement.
+
+117
+00:04:57,899 --> 00:05:01,232
+And my add buttons still work just fine.
+
+118
+00:05:02,259 --> 00:05:03,999
+If we were building a larger application,
+
+119
+00:05:03,999 --> 00:05:05,839
+we might want to split
+things up at this point
+
+120
+00:05:05,839 --> 00:05:09,290
+into their own components and files.
+
+121
+00:05:09,290 --> 00:05:11,827
+Vue even has a command line interface
+
+122
+00:05:11,827 --> 00:05:15,828
+which makes it simple to
+start real projects quickly.
+
+123
+00:05:15,828 --> 00:05:18,879
+We might even use single
+file Vue components
+
+124
+00:05:18,879 --> 00:05:21,770
+which contain their own HTML, JavaScript,
+
+125
+00:05:21,770 --> 00:05:23,687
+and Scoped CSS, or SCSS.
+
+126
+00:05:25,599 --> 00:05:28,926
+- Hi, I'm Evan You, the creator of Vue.js.
+
+127
+00:05:28,926 --> 00:05:31,587
+What you've seen here
+barely scratched the surface
+
+128
+00:05:31,587 --> 00:05:33,065
+of what Vue can do.
+
+129
+00:05:33,065 --> 00:05:34,856
+There's so much more in the ecosystem
+
+130
+00:05:34,856 --> 00:05:36,555
+to help you build, organize,
+
+131
+00:05:36,555 --> 00:05:39,076
+and scale your frontend applications.
+
+132
+00:05:39,076 --> 00:05:42,457
+To get a better taste, read
+our documentation today.
+
+133
+00:05:42,457 --> 00:05:44,708
+I think you'll enjoy the View.