Skip to content

Commit 96494ae

Browse files
bhnddowinfbhnddowinf
committed
加载图片太慢，所以分 md
1 parent 4e5e405 commit 96494ae

File tree

14 files changed

+922
-931
lines changed

14 files changed

+922
-931
lines changed

‎02.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
##02.讲解起步
2+
3+
简介：怎么样开始使用 vue.js
4+
5+
https://www.youtube.com/watch?v=avMPdV0avok&feature=youtu.be
6+
7+
https://pan.baidu.com/s/1gfFHZVH
8+
9+
#### 此章范例如下
10+
11+
1. [vue.js 简单结构] (http://codepen.io/bhnddowinf/pen/EKNEPd)
12+
13+
2. [使用文字框] (http://codepen.io/bhnddowinf/pen/QNGmKM)
14+
15+
3. [双向绑定] (http://codepen.io/bhnddowinf/pen/GZNxro)
16+
17+
4. [反转字串，按钮操作数据] (http://codepen.io/bhnddowinf/pen/KzNoay)
18+
19+
5. [综合] (http://codepen.io/bhnddowinf/pen/EKNEwr)

‎03.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
##03.概述
2+
3+
简介：讲解 vue.js 两个功能，响应式的数据绑定，组合的视图组件
4+
5+
https://youtu.be/c1PKzLMPpfQ
6+
7+
http://pan.baidu.com/s/1c1VNwFu
8+
9+
#### 此章范例如下：
10+
11+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.001.jpeg)
12+
13+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.002.jpeg)
14+
15+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.003.jpeg)
16+
17+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.004.jpeg)
18+
19+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.005.jpeg)
20+
21+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.006.jpeg)
22+
23+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.007.jpeg)
24+
25+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.008.jpeg)
26+
27+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.009.jpeg)
28+
29+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.010.jpeg)
30+
31+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.011.jpeg)
32+
33+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.012.jpeg)
34+
35+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.013.jpeg)
36+
37+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.014.jpeg)
38+
39+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/img/Overview%20%E6%A6%82%E8%BF%B0.015.jpeg)
40+
41+
42+
1. [响应式数据绑定] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/001%20Reactive%20data%20binding%20demo.html)
43+
44+
2. [响应式数据绑] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/002%20Reactive%20data%20binding%20second%20demo.html)
45+
46+
3. [定义模板，注册组件] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/003-%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF%EF%BC%8C%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6.html)
47+
48+
4. [两栏式] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/004%20%E4%B8%A4%E6%A0%8F%E5%BC%8F.html)
49+
50+
5. [两栏式与 vue] (https://github.com/bhnddowinf/vuejs-learn/blob/master/03/005%20%E4%B8%A4%E6%A0%8F%E5%BC%8F%E4%B8%8E%20vue.html)
51+

‎04.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
## 04.Vue 实例
3+
4+
简介：从构造器，建立 vue.js 的实例，而这个实例，有所谓的状态回调（实例生命周期），可以依业务撰写代码。
5+
6+
https://youtu.be/QbEJ5pfgxw0
7+
8+
https://pan.baidu.com/s/1c5IOBO
9+
10+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/lifecycle.jpg)
11+
12+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.001.jpeg)
13+
14+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.002.jpeg)
15+
16+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.003.jpeg)
17+
18+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.004.jpeg)
19+
20+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.005.jpeg)
21+
22+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.006.jpeg)
23+
24+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.007.jpeg)
25+
26+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.008.jpeg)
27+
28+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.009.jpeg)
29+
30+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.010.jpeg)
31+
32+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.011.jpeg)
33+
34+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.012.jpeg)
35+
36+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/img/The%20Vue%20Instance%20%E5%AE%9E%E4%BE%8B.013.jpeg)
37+
38+
39+
#### 此章范例如下：
40+
41+
1.[构造器 Constructor](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/001%20Constructor%20demo.html)
42+
43+
2.[组件 Component](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/002%20component.html)
44+
45+
3.[属性与方法 Properties and Methods ](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/003%20Properties-and-Methods.html)
46+
47+
4.[属性与方法 Properties and Methods 2](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/004%20Properties-and-Methods%202.html)
48+
49+
5.[实例生命周期 Instance Lifecycle ](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/005%20Instance-Lifecycle.html)
50+
51+
6.[生命周期 图示 Life Cycle](https://github.com/bhnddowinf/vuejs-learn/blob/master/04/006%20life%20cycle.html)

‎05.md

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
## 05.数据绑定语法
2+
3+
简介：vue.js 从 model 层，调出资料至 view 层显示以及交互。
4+
5+
https://www.youtube.com/watch?v=K-T_i7X4lrY&feature=youtu.be
6+
7+
http://v.youku.com/v_show/id_XMTUxMzU3NzcwOA==.html
8+
9+
https://pan.baidu.com/s/1bpFkmIz
10+
11+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.001.jpeg)
12+
13+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.002.jpeg)
14+
15+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.003.jpeg)
16+
17+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.004.jpeg)
18+
19+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.005.jpeg)
20+
21+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.006.jpeg)
22+
23+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.007.jpeg)
24+
25+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.008.jpeg)
26+
27+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.009.jpeg)
28+
29+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.010.jpeg)
30+
31+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.011.jpeg)
32+
33+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.012.jpeg)
34+
35+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.013.jpeg)
36+
37+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.014.jpeg)
38+
39+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.015.jpeg)
40+
41+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.016.jpeg)
42+
43+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.017.jpeg)
44+
45+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.018.jpeg)
46+
47+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.019.jpeg)
48+
49+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.020.jpeg)
50+
51+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/img/Data%20Binding%20Syntax%20%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E8%AF%AD%E6%B3%95.021.jpeg)
52+
53+
54+
55+
56+
#### 此章范例如下：
57+
58+
1.[view-interpolations-text](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/001%20view-interpolations-text%20.html)
59+
60+
2.[Raw Html](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/002%20Raw%20Html.html)
61+
62+
3.[partial](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/003%20partial-0.html)
63+
64+
4.[partial 1](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/003%20partial-1.html)
65+
66+
5.[partial 2](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/003%20partial-2.html)
67+
68+
6.[Attributes](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/004%20Attributes.html)
69+
70+
7.[Java Script Expressions](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/005%20JavaScriptExpressions.html)
71+
72+
8.[Java Script Expressons error](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/005%20JavaScriptExpressions-1.html)
73+
74+
9.[filters](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/006%20filters.html)
75+
76+
10.[filter 传参](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/007%20filters%20%E8%BF%9E%E7%BB%AD%E4%B8%A4%E6%AC%A1%E8%BF%87%E6%BB%A4%E5%99%A8.html)
77+
78+
11.[filter 串联](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/007%20filters%20%E8%BF%9E%E7%BB%AD%E4%B8%A4%E6%AC%A1%E8%BF%87%E6%BB%A4%E5%99%A8.html)
79+
80+
12.[filter 自定义](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/008%20filters%20%E4%B8%8E%E4%BC%A0%E5%8F%82.html)
81+
82+
13.[指令](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/010%20%E6%8C%87%E4%BB%A4.html)
83+
84+
14.[指令 参数](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/011%20%E6%8C%87%E4%BB%A4-%E5%8F%82%E6%95%B0.html)
85+
86+
15.[指令 事件](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/012%20%E6%8C%87%E4%BB%A4-%E4%BA%8B%E4%BB%B6.html)
87+
88+
16.[指令 修饰符](https://github.com/bhnddowinf/vuejs-learn/blob/master/05/013%20%E6%8C%87%E4%BB%A4%E4%BF%AE%E9%A5%B0%E7%AC%A6.html)
89+

‎06.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
## 06.计算属性
3+
4+
简介：将 model 层的资料，依 js 表达式，呈现业务逻辑。
5+
6+
https://youtu.be/T5faXmjGEgc
7+
8+
https://pan.baidu.com/s/1kVNbzZh
9+
10+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.001.jpeg)
11+
12+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.002.jpeg)
13+
14+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.003.jpeg)
15+
16+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.004.jpeg)
17+
18+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.005.jpeg)
19+
20+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.006.jpeg)
21+
22+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.007.jpeg)
23+
24+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.008.jpeg)
25+
26+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.009.jpeg)
27+
28+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.010.jpeg)
29+
30+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.011.jpeg)
31+
32+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.012.jpeg)
33+
34+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/img/Computed%20Properties%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.013.jpeg)
35+
36+
37+
#### 此章范例如下：
38+
39+
1. [计算属性基本] (https://github.com/bhnddowinf/vuejs-learn/blob/master/06/001%20Computed%20Properties%20Basic.html)
40+
41+
2. [观察 watch demo](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/002%20watch%20demo.html)
42+
43+
3. [计算属性 computed demo](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/003%20Computed%20demo.html)
44+
45+
4. [计算属性 2 ，computed getter , setter demo](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/004%20get%20and%20set.html)
46+
47+
5. [计算属性 综合示例，computed sum](https://github.com/bhnddowinf/vuejs-learn/blob/master/06/005%20sum.html)
48+

‎07.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
## 07.Class 与 Style 绑定
2+
3+
简介：vue.js 对于 css ，如何轻便使用 class, style 。
4+
5+
https://youtu.be/uXOdJZfY-WU
6+
7+
https://pan.baidu.com/s/1bDAgZ8
8+
9+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.001.jpeg)
10+
11+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.002.jpeg)
12+
13+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.003.jpeg)
14+
15+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.004.jpeg)
16+
17+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.005.jpeg)
18+
19+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.006.jpeg)
20+
21+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.007.jpeg)
22+
23+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.008.jpeg)
24+
25+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.009.jpeg)
26+
27+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.010.jpeg)
28+
29+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.011.jpeg)
30+
31+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.012.jpeg)
32+
33+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.013.jpeg)
34+
35+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.014.jpeg)
36+
37+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.015.jpeg)
38+
39+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.016.jpeg)
40+
41+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/img/class%20and%20style%20bindings.017.jpeg)
42+
43+
44+
45+
46+
1.[绑定html class, BindingHtmlClasses](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/001%20BindingHtmlClasses.html)
47+
48+
2.[对象语法，Object Styntax](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/002%20Object%20Syntax.html)
49+
50+
3.[对象语法1，object](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/003%20object.html)
51+
52+
4.[对象语法2，object2](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/003-1%20object.html)
53+
54+
5.[阵列语法，array](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/004%20Array.html)
55+
56+
6.[三元表达式，list conditionally](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/005%20%20list%20conditionally.html)
57+
58+
7.[数组与对象语法，multiple conditional classes](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/006%20%20multiple%20conditional%20classes.html)
59+
60+
8.[绑定内联样式，binding inline styles](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/007%20BindingInlineStyles.html)
61+
62+
9.[绑定物件，binding object] (https://github.com/bhnddowinf/vuejs-learn/blob/master/07/008%20BindingObject.html)
63+
64+
10.[绑定物件1，binding object1](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/008-1%20BindingObject.html)
65+
66+
11.[数组语法，multiple style objects](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/009%20multiple%20style%20objects.html%20)
67+
68+
12.[自动添加前缀，transform](https://github.com/bhnddowinf/vuejs-learn/blob/master/07/010%20transform.html)

‎08.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
## 08.条件渲染
3+
4+
简介：v-if, v-show 观念或使用。
5+
6+
https://youtu.be/5nG0k1VN7ro
7+
8+
https://pan.baidu.com/s/1kVNbzZT
9+
10+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.001.jpeg)
11+
12+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.002.jpeg)
13+
14+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.003.jpeg)
15+
16+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.004.jpeg)
17+
18+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.005.jpeg)
19+
20+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.006.jpeg)
21+
22+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.007.jpeg)
23+
24+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.008.jpeg)
25+
26+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.009.jpeg)
27+
28+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.010.jpeg)
29+
30+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.011.jpeg)
31+
32+
![](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/img/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93.012.jpeg)
33+
34+
35+
1.[v-if](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/01%20v-if%20demo.html)
36+
37+
2.[template](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/02%20template.html)
38+
39+
3.[v-show](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/03%20v-show.html)
40+
41+
4.[v-else](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/04%20v-else.html)
42+
43+
5.[v-if many](https://github.com/bhnddowinf/vuejs-learn/blob/master/08/05%20v-if%20many.html)

0 commit comments

Comments
 (0)