chinese.js.srt

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、JavaScript

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
我想你会乐在其中的