├── .editorconfig ├── .gitignore ├── Lesson1-1 ├── ex-1.html ├── ex-2.html └── ex-3.html ├── Lesson1-2 ├── ex-1.html └── ex-2.html ├── Lesson1-3 ├── ex-1.html └── ex-2.html ├── Lesson1-4 ├── ex-1.html ├── ex-2.html └── ex-3.html ├── Lesson2-1 ├── ex-1.html ├── ex-2.html ├── ex-3.html └── ex-4.html ├── Lesson2-2 ├── ex_1.html ├── ex_2.html ├── ex_3.html ├── ex_4.html ├── ex_5.html └── ex_6.html ├── Lesson2-3 ├── ex_1.html ├── ex_2.html ├── ex_3.html ├── ex_4.html └── ex_5.html ├── Lesson2-4 ├── ex_1.html ├── ex_2.html └── ex_3.html ├── Lesson3-1 ├── ex_1.html ├── ex_2.html ├── ex_3.html ├── ex_4.html ├── ex_5.html └── ex_6.html ├── Lesson3-2 ├── ex_1.html ├── ex_2.html ├── ex_3.html ├── ex_4.html ├── flightInfo_1.html └── flightInfo_2.html ├── Lesson3-3 ├── content.js ├── entry.js ├── index.html ├── style.css └── webpack.config.js ├── Lesson3-4 ├── CompanyLogo.vue ├── CompanyTitle.vue ├── index.html ├── main.js ├── package.json └── webpack.config.js ├── README.md ├── css ├── lesson1-1.css ├── lesson1-3.css └── lesson2-1.css ├── docs ├── dist │ ├── 77901b04f4a8e72fcf03ee1313f4717a.png │ └── bundle.js └── index.html ├── images ├── bill gates & ---<<<@.jpg └── defaultAvatar.png └── js ├── jquery.js └── vue.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /Lesson1-1/ex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 视图驱动 6 | 7 | 8 | 9 |
10 | 请选择： 11 |
12 | 13 |
14 |
    15 |
16 |
17 |
18 |
19 | 20 | 21 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Lesson1-1/ex-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 数据驱动 6 | 7 | 8 | 9 |
10 | 请选择： 11 |
12 | {{selected}} 13 |
14 |
    15 |
  • {{option}}
    • 16 |
17 |
18 |
19 |
20 | 21 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Lesson1-1/ex-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 复杂的数据驱动 6 | 7 | 8 | 9 | 10 |
11 |

Vue.js 开发示例

12 | 您选择的是{{selected.name}}，今年{{selected.age}}岁，{{selected.gender}}，在{{selected.department}}工作。 13 |
14 | 请选择： 15 |
16 | {{selected.name}} 19 |
20 |
    21 |
  • {{option.name}}
    • 22 |
23 |
24 |
25 |
26 |
27 | 28 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /Lesson1-2/ex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.js 数据绑定 6 | 7 | 8 | 9 |
10 |

Vue.js 数据绑定

11 |
12 | 13 |
姓名：{{user.name}}
14 |
简介：{{{user.profile}}}
15 |
16 |
17 | 18 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Lesson1-2/ex-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.js 计算属性 6 | 7 | 8 | 9 |
10 |

Vue.js 计算属性

11 |
12 |
13 | 正方形边长：{{ a }}m 14 |
15 | 16 |
17 | 正方形面积：{{ s }}m2 18 |
19 |
20 |
21 | 22 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Lesson1-3/ex-1.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 | Vue.js前端框架详解－基础&进阶&实战 26 | Vue.js前端框架详解－基础&进阶&实战 27 | 28 |
29 |
30 | 34 |
35 |
36 | 37 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Lesson1-3/ex-2.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 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Lesson1-4/ex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 数组元素遍历 6 | 7 | 8 | 9 |
10 |
11 |
12 |

乘客列表

13 |
14 |
姓名
15 |
证件类型
16 |
证件号码
17 |
手机号码
18 |
航班说明
19 |
20 |
21 |
22 | 姓名： 23 | {{pax.name}} 24 |
25 |
26 | 证件类型： 27 | {{pax.idType}} 28 |
29 |
30 | 证件号码： 31 | {{pax.idNumber}} 32 |
33 |
34 | 手机号码： 35 | {{pax.mobile}} 36 |
37 |
38 | 说明： 39 | {{flightSummary}} 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |

价格信息

48 | 49 | 50 | 60 | 61 |
62 |
63 |
64 |
65 | 66 | 67 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /Lesson1-4/ex-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 对象属性遍历 6 | 7 | 8 | 9 |
10 |

对象属性遍历

11 | 14 |
15 | 16 | 17 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Lesson1-4/ex-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 过滤与排序 6 | 7 | 8 | 9 |
10 | 11 | 16 |
17 | 18 | 19 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /Lesson2-1/ex-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 类与样式绑定 6 | 7 | 8 | 9 |
10 |

类与样式绑定

11 |
12 |
13 | 15 |
16 |
17 |
18 |
19 | 图片形状 20 |
21 | 24 |
25 |
26 | 29 |
30 |
31 |
32 |
33 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Lesson2-1/ex-2.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 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Lesson2-1/ex-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 类与样式绑定 7 | 8 | 9 | 10 | 11 |
12 |

13 | 类绑定数组语法 14 |

15 | 16 | 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 |
17 | Table Caption 18 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
48 |
49 | 50 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Lesson2-1/ex-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 类与样式绑定 7 | 8 | 9 | 10 | 11 |
12 |

13 | 样式绑定对象与数组语法 14 |

15 |
16 |
17 | 颜色：红，字体：30px 18 |
19 |
20 |
21 | 颜色一样红，字体也是30px 22 |
23 |
24 |
25 | 颜色继续红，字体保持30px，并且增加了阴影 26 |
27 |
28 |
29 | 30 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Lesson2-2/ex_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

Text 数据双向绑定

11 |
12 |
13 | 姓名： 14 |
15 |
16 | {{user.name}} 17 |
18 |
19 |
20 |
21 | 年龄： 22 |
23 |
24 | {{user.age}} 25 |
26 |
27 |
28 |
29 | File： 30 |
31 |
32 | {{user.file}} 33 |
34 |
35 |
36 |
37 | 出生年月： 38 |
39 |
40 | {{user.birthday}} 41 |
42 |
43 |
44 |
45 | 喜欢的颜色： 46 |
47 |
48 | {{user.color}} 49 |
50 |
51 |
52 |
53 | 简介： 54 |
55 |
56 | {{user.profile}} 57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 | 65 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /Lesson2-2/ex_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

Checkbox 数据双向绑定

11 |
12 | 16 |
17 |
18 |
19 | 23 | 27 | 31 |
32 | Checked names: {{ checkedNames | json }} 33 |
34 |
35 |
36 |
37 | 41 | 45 |
46 | Checked (no values): {{ checkedNoValue | json }} 47 |
48 |
49 |
50 | 51 | 52 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Lesson2-2/ex_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

Radio 数据双向绑定

11 |
12 | 15 | 18 | 21 | 24 |
25 |
26 |
27 | Picked: {{ picked }} 28 |
29 |
30 |
31 | 32 | 33 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Lesson2-2/ex_4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

Select 数据双向绑定

11 |
12 |
13 | 18 | 19 | Selected: {{ selected }} 20 | 21 |
22 |
23 |
24 |
25 |
26 | 31 | 32 | Selected: {{ arrSelected | json }} 33 | 34 |
35 |
36 |
37 | 38 | 39 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Lesson2-2/ex_5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

Checkbox 绑定 Value

11 |
12 |
13 | 升级套餐： 14 |
15 |
16 | 23 |
24 |
25 |
26 |
27 | package: {{ package | json }} 28 |
29 |
30 |
31 |
32 |
33 | 购买保险： 34 |
35 |
36 | 45 |
46 |
47 |
48 |
49 | insurances: {{ insurances | json }} 50 |
51 |
52 |
53 | 54 | 55 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /Lesson2-2/ex_6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单控件绑定 6 | 7 | 8 | 9 |
10 |

参数特性

11 | 12 |
13 |
14 | msg: 15 | 16 | {{ msg }} 17 | 18 |
19 |
20 | normal: 21 |
22 |
23 | lazy: 24 |
25 |
26 | debounce: 27 |
28 |
29 |
30 | 31 |
32 |
33 | age: 34 | 35 | {{ age | JSON }} 36 | 37 |
38 |
39 | range: 40 |
41 |
42 | Type="number": 43 |
44 |
45 | number: 46 |
47 |
48 |
49 |
50 | typeof age: 51 | 52 | {{ typeof age }} 53 | 54 |
55 |
56 | 59 | 62 |
63 |
64 | 75 |
76 |
77 | 80 |
81 |
82 |
83 | 84 |
85 |
86 | voted: {{ voted | json }} 87 |
88 |
89 | MVP vote (up to 2 players) 90 | 93 | 96 | 99 | 102 |
103 |
104 |
105 | 106 | 107 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /Lesson2-3/ex_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 事件绑定与处理 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Vue 实例方法声明 与 DOM事件绑定

13 |
14 |
15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 | The method is declared in methods attribute of Vue instance options object. 29 |
30 |
31 |
32 | The method is declared in data attribute of Vue instance options object. 33 |
34 |
35 |
36 | The method is to be declared by calling $set. 37 |
38 |
39 |
40 | 41 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /Lesson2-3/ex_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 事件绑定与处理 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

内联语句事件绑定

14 |
15 | 18 | 19 | {{thumbsUp}} 20 | 21 |
22 |
23 | 24 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Lesson2-3/ex_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 事件绑定与处理 6 | 7 | 8 | 9 |
10 |
11 |

访问原生DOM事件属性

12 |
13 |
14 | {{ msg }} 15 |
16 |
17 | 18 | 21 |
22 |
23 |
24 |
25 | 26 | 27 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Lesson2-3/ex_4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 事件绑定与处理 6 | 7 | 8 | 9 |
10 |
11 |

事件修饰符

12 |
13 |
14 | {{ msg }} 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 |

Click Me - It’ll trigger the click event for the .row block

24 | Me too. 25 |
26 |
28 | {{ $index }} - {{ element }} 29 |
30 |
31 |
32 | 33 |
34 |
35 |

Capture Modifier

36 |
37 |
39 | {{ $index }} - {{ element }} 40 |
41 |
42 |
43 | 44 |
45 |

46 | Click EXACTLY Me, 47 | But NOT Me, 48 | Nor Me 49 |

50 |
51 |
52 |
53 | 54 | 55 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Lesson2-3/ex_5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 事件绑定与处理 6 | 7 | 8 | 9 |
10 |
11 |

按键修饰符

12 |
13 |
14 | {{ msg }} 15 |
16 |
17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |

Help Desk

25 |
26 |
27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget odio vulputate, rhoncus metus a, condimentum tellus. Nullam commodo tempor dui, et sodales orci feugiat et. Nunc metus ligula, vulputate ac volutpat sed, vestibulum a massa. Sed lacinia efficitur tellus, a ultricies libero. Phasellus felis felis, convallis id elit eu, elementum lobortis erat. Nulla sollicitudin id erat eu varius. Aenean volutpat, lorem ut scelerisque interdum, felis mauris suscipit lacus, aliquam mollis augue diam eu nisl. Ut ut aliquam lectus. Sed consectetur rutrum lorem, id tempor mi lobortis placerat. Sed ut posuere nisl. Mauris tincidunt consectetur placerat. Aliquam ut lacus auctor, congue nibh non, tempus lacus. Vestibulum at velit viverra felis tempus viverra. Nullam a libero velit. Etiam feugiat nec tortor nec feugiat. 28 |
29 |
30 |
31 |
32 | 33 | 34 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /Lesson2-4/ex_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Watcher 的使用 6 | 7 | 8 | 9 |
10 |
11 |
12 |

通过 watch 选项声明 watcher

13 |
14 |
15 | 姓： 16 |
17 |
18 | 名： 19 |
20 |
21 | 乘客姓名：{{ paxName }} 22 |
23 |
24 |
25 | 26 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Lesson2-4/ex_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Watcher 的使用 6 | 7 | 8 | 9 | 10 |
11 |

深度观察

12 |
13 |
14 | 姓： 15 | 16 |
17 |
18 | 名： 19 | 20 |
21 |
22 | {{ user.fullName }} 的粉丝： 23 |
24 |
25 | 28 |
29 |
30 |
31 | 公明哥哥，你不要俺铁牛了？ 32 |
33 |
34 |
35 |
36 | 37 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /Lesson2-4/ex_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Watcher 的使用 6 | 7 | 8 | 9 |
10 |
11 |
12 |

$watch 方法及取消观察

13 |
14 |
15 | 姓： 16 |
17 |
18 | 名： 19 |
20 |
21 | 内宾 22 | 外宾 23 |
24 |
25 | 乘客姓名：{{ paxName}} 26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /Lesson3-1/ex_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Vue 扩展实例

14 |
15 |
16 | 扩展选项中的信息： 17 |
18 |
19 | {{ msg }} 20 |
21 |
22 |
23 |
24 | 实例选项中的信息： 25 |
26 |
27 | {{ newMsg }} 28 |
29 |
30 |
31 |
32 | 实例选项覆盖扩展选项内容： 33 |
34 |
35 | {{ i }} 36 |
37 |
38 |
39 |
40 | 实例选项与扩展选项内容合并： 41 |
42 |
43 | {{ obj | json }} 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 | 父组件中的 msg 数据：{{msg}} 77 |
78 |
79 | 80 |
81 | 82 |
83 | 89 | 90 | 166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /Lesson3-1/ex_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

HTML限制条件及注意事项

21 |
22 | Select 控件： 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | Select 控件： 31 | 36 |
37 |
38 | 39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 61 | 64 | 65 | 66 | 75 |
ii + 1
59 |   60 | 62 |   63 |
76 |
77 | 78 |
79 |

自定义标签条件渲染

80 |
81 | 82 | 83 |
84 |
85 | 86 |
87 |

跟媒体相关的注意事项

88 |
89 |

使用 v-cloak 指令

90 | 91 |
92 | 93 |
94 |

视频自动播放

95 |
96 | 97 |
98 | 99 |
100 |
101 |
102 | 103 | 104 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /Lesson3-1/ex_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 9 | 10 | 11 |
12 |

通过 props 传递数据到子组件

13 |
We have an msg: {{parentMsg}}.
14 |
15 | Edit msg: 16 | 17 |
18 |
19 | And the array in parent component is: {{arrData | json}} 20 |
21 | 22 | 23 | 24 |
25 | 26 | 44 | 45 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /Lesson3-1/ex_4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 9 | 10 | 11 |
12 |

父子组件通信

13 |
14 |

Parent

15 |
16 | 17 | 18 |

Message sent to the child: {{msgToTheChild}}

19 | 20 |
21 |
22 |
23 | 44 | 57 | 58 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /Lesson3-1/ex_5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 9 | 10 | 11 |
12 |

内容分发

13 |
14 |

Parent

15 |
16 | 17 |
内容一（匿名）
18 |
内容二 {{msg}}（具名一）
19 |
内容三（具名二）
20 |
内容四 {{msg}}（具名一）
21 |
内容五（匿名）
22 |
内容六（具名二）
23 | 24 |
25 |
26 |
27 | 28 | 42 | 43 | 44 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Lesson3-1/ex_6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

动态组件

15 |
16 |
17 | 18 | Home 19 | 20 | 21 | Products 22 | 23 |
24 | 25 |
26 | 过渡动画效果： 27 | 34 |
35 |
36 | 过渡模式： 37 | 40 | 43 |
44 |
45 |
46 |
47 | 58 | 66 | 67 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /Lesson3-2/ex_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件实战 - 模板与样式 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

单程直达机票航班信息展示

15 |
16 |
17 | 18 |
19 |
20 |
21 | 24 | 80 | 81 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /Lesson3-2/ex_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件实战 - 使用 props 传入航班数据 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

单程直达机票航班信息展示

15 |
16 |
17 | 24 |
25 |
26 |
27 | 30 | 86 | 87 | 224 | 225 | 226 | 227 | -------------------------------------------------------------------------------- /Lesson3-2/ex_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件实战 - 添加计算属性 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

单程直达机票航班信息展示

15 |
16 |
17 | 24 |
25 |
26 |
27 | 30 | 86 | 87 | 264 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /Lesson3-2/ex_4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 组件实战 - 使用组件 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

单程直达机票航班信息展示

15 |
16 |

可选航班数据设置

17 |
18 |
19 |
20 | 供应商 21 |
22 |
23 | 26 |
27 |
28 |
29 |
30 | 共享航班 31 |
32 |
33 | 45 |
46 |
47 |
48 | 51 |
52 | 53 |
54 |
55 |
56 | 59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 | 73 |
74 |
75 |
76 | 79 | 135 | 136 | 313 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /Lesson3-2/flightInfo_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 单程直达机票航班信息 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 |
21 | 产品供应商： 22 |
上海华程西南旅行社有限公司 23 |
08309722 24 |
25 |
26 |

27 | 10-13 周四 上海 武汉 28 |

29 |
30 |
31 | 东方航空 MU9345 波音737-800 经济舱 32 |
33 |
34 | 上海航空 FM9345 35 |
36 |
37 |
38 |
39 |
22:30
40 |
浦东国际机场T2
41 |
42 |
43 |
44 | 2h05m 45 |
46 |
47 | 48 |
49 |
50 |
51 |
52 |
00:35
53 |
54 | 55 |
56 | 到达时间为第2天，2016年10月14日 00时35分 57 |
58 |
59 |
60 |
天河国际机场T2
61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Lesson3-2/flightInfo_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 单程直达机票航班信息 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |

18 | 10-13 周四 上海 武汉 19 |

20 |
21 | 东方航空 MU9345 波音737-800 经济舱 22 |
23 |
24 |
25 |
22:30
26 |
浦东国际机场T2
27 |
28 |
29 |
30 | 2h05m 31 |
32 |
33 | 34 |
35 |
36 |
37 |
00:35
38 |
天河国际机场T2
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Lesson3-3/content.js: -------------------------------------------------------------------------------- 1 | module.exports = 'content.js 说：webpack 我看行！' 2 | -------------------------------------------------------------------------------- /Lesson3-3/entry.js: -------------------------------------------------------------------------------- 1 | document.write(require('./content.js')) 2 | -------------------------------------------------------------------------------- /Lesson3-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack 打包示例 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Lesson3-3/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingMario/vue-course/a8d6af12fb1a67c8eb440e78720678e954d33f6c/Lesson3-3/style.css -------------------------------------------------------------------------------- /Lesson3-3/webpack.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingMario/vue-course/a8d6af12fb1a67c8eb440e78720678e954d33f6c/Lesson3-3/webpack.config.js -------------------------------------------------------------------------------- /Lesson3-4/CompanyLogo.vue: -------------------------------------------------------------------------------- 1 | 6 | 13 | 19 | -------------------------------------------------------------------------------- /Lesson3-4/CompanyTitle.vue: -------------------------------------------------------------------------------- 1 | 4 | 14 | 22 | -------------------------------------------------------------------------------- /Lesson3-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue 单文件组件 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Lesson3-4/main.js: -------------------------------------------------------------------------------- 1 | var CompanyTitle = require('./CompanyTitle.vue') 2 | var Vue = require('vue') 3 | 4 | new Vue({ 5 | el: 'body', 6 | components: { 7 | CompanyTitle 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /Lesson3-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson3-4", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "dependencies": { 7 | "vue": "^1.0.28" 8 | }, 9 | "devDependencies": { 10 | "babel-core": "^6.17.0", 11 | "babel-eslint": "^7.0.0", 12 | "babel-loader": "^6.2.5", 13 | "babel-plugin-transform-runtime": "^6.15.0", 14 | "babel-preset-es2015": "^6.16.0", 15 | "babel-runtime": "^6.11.6", 16 | "coffee-loader": "^0.7.2", 17 | "coffee-script": "^1.11.1", 18 | "css-loader": "^0.25.0", 19 | "eslint": "^3.8.0", 20 | "eslint-config-standard": "^6.2.0", 21 | "eslint-loader": "^1.5.0", 22 | "eslint-plugin-html": "^1.5.3", 23 | "eslint-plugin-promise": "^3.0.0", 24 | "eslint-plugin-standard": "^2.0.1", 25 | "extract-text-webpack-plugin": "^1.0.1", 26 | "file-loader": "^0.9.0", 27 | "style-loader": "^0.13.1", 28 | "url-loader": "^0.5.7", 29 | "vue-hot-reload-api": "^1.3.3", 30 | "vue-html-loader": "^1.2.3", 31 | "vue-loader": "^8.5.4", 32 | "vue-style-loader": "^1.0.0", 33 | "webpack": "^1.13.2", 34 | "webpack-dev-server": "^1.16.2" 35 | }, 36 | "scripts": { 37 | "test": "echo \"Error: no test specified\" && exit 1", 38 | "dev": "webpack-dev-server --inline" 39 | }, 40 | "author": "", 41 | "license": "ISC" 42 | } 43 | -------------------------------------------------------------------------------- /Lesson3-4/webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 2 | 3 | module.exports = { 4 | // 应用的入口 5 | entry: './main.js', 6 | // 编译打包后的输出 7 | output: { 8 | path: __dirname, 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | // `loaders` 是需要用到的 loader 组成的数组 13 | // 这里只配置 vue-loader 14 | loaders: [{ 15 | test: /\.vue$/, // 正则匹配所有以 `.vue` 结尾的文件 16 | loader: 'vue!eslint' // 对匹配到的文件使用何种 loader 17 | }, { 18 | test: /\.(png|jpg|gif)$/, 19 | loader: 'url', 20 | query: { 21 | // 低于该值则内联为 base64，单位是 byte 22 | limit: 10000, 23 | // 对于超过阈值的文件，定义命名规则 24 | name: '[name].[ext]?[hash]' 25 | } 26 | }] 27 | }, 28 | vue: { 29 | loaders: { 30 | css: ExtractTextPlugin.extract("css") 31 | } 32 | }, 33 | plugins: [ 34 | new ExtractTextPlugin("style.css") 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 极客学院 Vue.js 课程示例代码 2 | 3 | [极客学院](http://www.jikexueyuan.com/) Vue.js 课程的示例代码。 4 | 5 | -------------------------------------------------------------------------------- /css/lesson1-1.css: -------------------------------------------------------------------------------- 1 | .form-select { 2 | cursor: pointer; 3 | display: inline-block; 4 | } 5 | .form-select-text { 6 | display: inline-block; 7 | width: 100px; 8 | padding-left: 5px; 9 | border-bottom: 1px dashed black; 10 | } 11 | .form-select-text .glyphicon { 12 | float: right; 13 | } 14 | .form-select-list { 15 | background-color: white; 16 | position: absolute; 17 | border: 1px solid black; 18 | width: 100px; 19 | } 20 | .form-select-list ul { 21 | margin: 0; 22 | padding: 0; 23 | list-style: none; 24 | } 25 | .form-select-list li { 26 | padding: 0 0 0 5px; 27 | } 28 | .form-select-list li:hover { 29 | color: blue; 30 | background-color: ghostwhite; 31 | } 32 | -------------------------------------------------------------------------------- /css/lesson1-3.css: -------------------------------------------------------------------------------- 1 | .item { 2 | cursor: pointer; 3 | } 4 | .subitems div { 5 | padding-left: 15px; 6 | } 7 | -------------------------------------------------------------------------------- /css/lesson2-1.css: -------------------------------------------------------------------------------- 1 | [data-pseudo-content]::before { 2 | content: attr(data-pseudo-content); 3 | } 4 | .switch { 5 | display: inline-block; 6 | width: 90px; 7 | font-size: 0; 8 | border-radius: 2px; 9 | border: 1px solid #0082ff; 10 | height: 20px; 11 | } 12 | .switch span { 13 | display: inline-block; 14 | width: 44px; 15 | line-height: 18px; 16 | font-size: 12px; 17 | vertical-align: middle; 18 | text-align: center; 19 | cursor: pointer; 20 | } 21 | .switch .switch-item-1 { 22 | background-color: #0082ff; 23 | color: #fff; 24 | } 25 | .switch .switch-item-2 { 26 | background-color: #fff; 27 | color: #a8b1c0; 28 | } 29 | .switch.switched .switch-item-1 { 30 | background-color: #fff; 31 | color: #a8b1c0; 32 | } 33 | .switch.switched .switch-item-2 { 34 | background-color: #0082ff; 35 | color: #fff; 36 | } 37 | -------------------------------------------------------------------------------- /docs/dist/77901b04f4a8e72fcf03ee1313f4717a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingMario/vue-course/a8d6af12fb1a67c8eb440e78720678e954d33f6c/docs/dist/77901b04f4a8e72fcf03ee1313f4717a.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 课程代码详解 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /images/bill gates & ---<<<@.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingMario/vue-course/a8d6af12fb1a67c8eb440e78720678e954d33f6c/images/bill gates & ---<<<@.jpg -------------------------------------------------------------------------------- /images/defaultAvatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingMario/vue-course/a8d6af12fb1a67c8eb440e78720678e954d33f6c/images/defaultAvatar.png --------------------------------------------------------------------------------