├── css
    └── style.css
├── Lesson23-基础的基础
    ├── README.md
    └── index.html
├── Lesson04-处理用户输入
    ├── README.md
    └── index.html
├── Lesson01-什么是Vue.js
    └── README.md
├── Lesson24-局部的组件
    ├── README.md
    └── index.html
├── Lesson02-从index.html开始
    ├── README.md
    └── index.html
├── README.md
├── Lesson26-数据
    ├── README.md
    └── index.html
├── Lesson14-元素显示
    ├── README.md
    └── index.html
├── Lesson28-传递变量
    ├── README.md
    └── index.html
├── Lesson15-列表渲染
    ├── README.md
    └── index.html
├── Lesson16-js对象迭代
    ├── README.md
    └── index.html
├── Lesson06-组件
    ├── README.md
    └── index.html
├── Lesson18-表单控件绑定
    ├── README.md
    └── index.html
├── Lesson11-class绑定
    ├── README.md
    └── index.html
├── Lesson08-计算属性
    ├── README.md
    └── index.html
├── Lesson31-slot插槽
    ├── README.md
    └── index.html
├── Lesson05-按钮事件
    ├── README.md
    └── index.html
├── Lesson07-过滤器
    ├── README.md
    └── index.html
├── Lesson13-条件渲染
    ├── README.md
    └── index.html
├── Lesson19-表单复选框
    ├── README.md
    └── index.html
├── Lesson12-class对象绑定
    ├── README.md
    └── index.html
├── Lesson32-组合slot
    ├── README.md
    └── index.html
├── Lesson03-条件与循环
    ├── README.md
    └── index.html
├── Lesson25-表行组件
    ├── README.md
    └── index.html
├── Lesson09-观察属性
    ├── README.md
    └── index.html
├── Lesson17-事件处理器
    ├── README.md
    └── index.html
├── Lesson20-表单单选按钮
    ├── README.md
    └── index.html
├── Lesson10-设定计算属性
    ├── README.md
    └── index.html
├── Lesson27-传递数据
    ├── README.md
    └── index.html
├── Lesson30-事件传递
    ├── README.md
    └── index.html
├── Lesson29-参数验证
    ├── README.md
    └── index.html
├── Lesson21-表单下拉框
    ├── README.md
    └── index.html
└── Lesson22-表单修饰符
    ├── index.html
    └── README.md


/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-size: 24rpx;
 3 | }
 4 | 
 5 | button {
 6 |     width: 80%;
 7 |     height: 45rpx;
 8 |     font-size: 20rpx;
 9 | }
10 | 
11 | .active {
12 |     color: red;
13 | }
14 | 
15 | .big {
16 |     font-weight: bolder;
17 |     font-size: 100rpx;
18 | }
19 | 
20 | .border1 {
21 |     border: 1rpx solid gray;
22 | }
23 | 


--------------------------------------------------------------------------------
/Lesson23-基础的基础/README.md:
--------------------------------------------------------------------------------
 1 | 组件：基础的基础
 2 | ================
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 组件（Component,Portlet）
 7 | 
 8 | ### 组件
 9 | 
10 | 组件就是页面上的一小块区域内容，完成一个小的页面功能，请参照视频第六课。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <today-weather></today-weather>
17 | </div>
18 | <script>
19 |     Vue.component('today-weather', {
20 |         template: '<div>今天下雨，出不去啦，干什么呢？看Youtube吧!</div>'
21 |     });
22 |     var App = new Vue({
23 |         el: '#App', 
24 |     });
25 | </script>
26 | ~~~
27 | 
28 | 


--------------------------------------------------------------------------------
/Lesson04-处理用户输入/README.md:
--------------------------------------------------------------------------------
 1 | 处理用户输入
 2 | ============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-model
 7 | 
 8 | ### v-model
 9 | 
10 | 为页面输入框进行数据邦定，例如：
11 | 
12 | + input
13 | + select
14 | + textarea
15 | + components
16 | 
17 | ### 使用例
18 | 
19 | ~~~html
20 | <div id="App">
21 |     <p>您最喜欢的游戏是：{{mygame}}</p>
22 |     <input v-model="mygame">
23 | </div>
24 | <script>
25 |     var App = new Vue({
26 |         el: '#App',
27 |         data: {
28 |             mygame: '超级马里奥'
29 |         },
30 |     });
31 | </script>
32 | ~~~
33 | 
34 | 


--------------------------------------------------------------------------------
/Lesson01-什么是Vue.js/README.md:
--------------------------------------------------------------------------------
 1 | 什么是Vue.js？
 2 | ==============
 3 | 
 4 | Vue.js是一套开发Web页面的Javascript脚本框架，听起来难，其实是Web-Javascript脚本框架中最容易上手的框架，没有之一。
 5 | 
 6 | ## 官方网站
 7 | 
 8 | * https://cn.vuejs.org/
 9 | 
10 | ## 竞争对手
11 | 
12 | * AngularJS1/AngularJS2
13 | * ReactJS
14 | * EmberJS
15 | * Knockout
16 | * 等等
17 | 
18 | https://cn.vuejs.org/v2/guide/comparison.html
19 | 
20 | ## 技术前提
21 | * HTML/CSS
22 | * Javascript
23 | * Node.js(极力推荐)
24 | 
25 | ## 开发工具
26 | * 记事本等文本编辑器
27 |  - Visual Studio Code
28 |  - Brackets
29 |  - ATOM
30 | * 浏览器（IE9,Chrome,FireFox,Safari）
31 | 


--------------------------------------------------------------------------------
/Lesson24-局部的组件/README.md:
--------------------------------------------------------------------------------
 1 | 组件：局部的组件
 2 | ================
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 组件的局部注册
 7 | 
 8 | ### 组件
 9 | 
10 | Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <my-weather></my-weather>
17 | </div>
18 | <script>
19 |     var WeatherComponent = {
20 |         template: '<div>今天下雨，随它去吧！</div>'
21 |     };
22 |     var App = new Vue({
23 |         el: '#App', 
24 |         data: {
25 |         },
26 |         components: {
27 |             'my-weather': WeatherComponent
28 |         },
29 |     });
30 | </script>
31 | ~~~
32 | 
33 | 


--------------------------------------------------------------------------------
/Lesson02-从index.html开始/README.md:
--------------------------------------------------------------------------------
 1 | 从index.html开始
 2 | ================
 3 | 
 4 | ## 知识点
 5 | 
 6 | * html5文档
 7 | * vue.js导入
 8 | * Vue对象
 9 | 
10 | ## index.html
11 | 
12 | 从第一个index.html开始吧！
13 | 
14 | ### vue.js引用
15 | 
16 | ~~~html
17 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
18 | ~~~
19 | 
20 | ### html代码块
21 | 
22 | ~~~html
23 | <div id="App">
24 |   {{ message }}
25 | </div>
26 | ~~~
27 | 
28 | ### javascript脚本部分
29 | 
30 | ~~~javascript
31 | var App = new Vue({
32 |   el: '#App',
33 |   data: {
34 |     message: 'Hello Vue.js World!'
35 |   }
36 | });
37 | ~~~
38 | 
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Vue.js学习
 2 | ========
 3 | 
 4 | ## 课程详细
 5 | 
 6 | 01. 什么是Vue.js？
 7 | 02. 从index.html开始
 8 | 03. 条件与循环
 9 | 04. 处理用户输入
10 | 05. 按钮事件
11 | 06. 组件
12 | 07. 过滤器
13 | 08. 计算属性
14 | 09. 观察属性
15 | 10. 设定机算属性
16 | 11. Class绑定
17 | 12. Class对象绑定
18 | 13. 条件渲染
19 | 14. 元素显示v-show
20 | 15. 列表渲染
21 | 16. JS对象迭代
22 | 17. 事件处理器
23 | 18. 表单控件绑定
24 | 19. 表单复选框
25 | 20. 表单单选按钮
26 | 21. 表单下拉框
27 | 22. 表单修饰符
28 | 23. 组件：基础的基础
29 | 24. 组件：局部的组件
30 | 25. 组件：表行组件
31 | 26. 组件：数据
32 | 27. 组件：传递数据
33 | 28. 组件：传递变量
34 | 29. 组件：参数验证
35 | 30. 组件：事件传递
36 | 31. 组件：slot插槽
37 | 32. 组件：组合slot


--------------------------------------------------------------------------------
/Lesson26-数据/README.md:
--------------------------------------------------------------------------------
 1 | 组件：数据
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 组件的数据函数
 7 | 
 8 | ### 组件的数据
 9 | 
10 | 为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <div>今天的天气是<today-weather/></div>
17 | </div>
18 | <script>
19 |     Vue.component('today-weather', {
20 |         template: '<strong>{{todayWeather}}</strong>',
21 |         data: function(){
22 |             return {
23 |                 todayWeather: '雨加雪'
24 |             };
25 |         }
26 |     });
27 |     var App = new Vue({
28 |         el: '#App', 
29 |     });
30 | </script>
31 | ~~~
32 | 
33 | 


--------------------------------------------------------------------------------
/Lesson14-元素显示/README.md:
--------------------------------------------------------------------------------
 1 | 元素显示
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-show
 7 | 
 8 | ### v-show
 9 | 
10 | 标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失)
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <h1 v-show="result">任天堂新一代主机Switch</h1>
15 |     <button @click="btnClick">考试成绩</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App', 
20 |         data: {
21 |             result: true
22 |         },
23 |         methods: {
24 |             btnClick: function(){
25 |                 this.result = !this.result;
26 |             },
27 |         },
28 |     });
29 | </script>
30 | ~~~
31 | 
32 | 


--------------------------------------------------------------------------------
/Lesson02-从index.html开始/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | 	<head>
 5 | 		<title></title>
 6 | 		<meta charset="UTF-8">
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 | 		<link href="../css/style.css" rel="stylesheet">
10 | 	</head>
11 | 
12 | 	<body>
13 | 		<div id="App"> {{ message }} </div>
14 | 		<script>
15 | 			var App = new Vue({
16 | 				el: '#App',
17 | 				data: {
18 | 					message: 'Hello Vue.js World!'
19 | 				}
20 | 			});
21 | 		</script>
22 | 	</body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Lesson28-传递变量/README.md:
--------------------------------------------------------------------------------
 1 | 组件：传递变量
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 为组件传递变量数据
 7 | 
 8 | ### 组件的数据
 9 | 
10 | 制作可接受变量参数的组件。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <div>请输入您的名字：<input v-model="myname"></div>
17 |     <hr/>
18 |     <say-hello :pname="myname" />
19 | </div>
20 | <script>
21 |     Vue.component('say-hello', {
22 |         props: ['pname'],
23 |         template: '<div>你好，<strong>{{pname}}</strong>！</div>',
24 |     });
25 |     var App = new Vue({
26 |         el: '#App', 
27 |         data: {
28 |             myname: 'Koma'
29 |         }
30 |     });
31 | </script>
32 | ~~~
33 | 
34 | 


--------------------------------------------------------------------------------
/Lesson15-列表渲染/README.md:
--------------------------------------------------------------------------------
 1 | 列表渲染
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-for
 7 | 
 8 | ### v-for
 9 | 
10 | 循环数组元素，整理内容显示到页面上。
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <ul>
15 |         <li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li>
16 |     </ul>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App', 
21 |         data: {
22 |             games: [
23 |                 {title:"勇者斗恶龙",price:500},
24 |                 {title:"库跑卡丁车",price:400},
25 |                 {title:"马里奥世界",price:550},
26 |             ]
27 |         },
28 |     });
29 | </script>
30 | ~~~
31 | 
32 | 


--------------------------------------------------------------------------------
/Lesson04-处理用户输入/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <p>您最喜欢的游戏是：{{mygame}}</p>
14 |     <input v-model="mygame">
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App',
19 |         data: {
20 |             mygame: '超级马里奥GTA'
21 |         },
22 |     });
23 | </script>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/Lesson23-基础的基础/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <today-weather></today-weather>
13 | </div>
14 | <script>
15 |     Vue.component('today-weather', {
16 |         template: '<div>今天下雨，出不去啦，干什么呢？看Youtube吧!</div>'
17 |     });
18 |     var App = new Vue({
19 |         el: '#App', 
20 |     });
21 | </script>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/Lesson16-js对象迭代/README.md:
--------------------------------------------------------------------------------
 1 | JS对象迭代
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-for
 7 | 
 8 | ### v-for
 9 | 
10 | 循环JS对象，把对象内容循环显示到页面上。
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <h1>JS对象迭代</h1>
15 |     <div v-for="(value, key) in mygame">
16 |         {{ key }} : {{ value }}
17 |     </div>
18 | </div>
19 | <script>
20 |     var App = new Vue({
21 |         el: '#App', 
22 |         data: {
23 |             mygame: {
24 |                 title: "乌贼娘2代",
25 |                 price: 350,
26 |                 pubdate: "2017年夏季",
27 |                 category: "射击",
28 |                 agerange: "全年龄",
29 |             },
30 |         },
31 |     });
32 | </script>
33 | ~~~
34 | 
35 | 


--------------------------------------------------------------------------------
/Lesson06-组件/README.md:
--------------------------------------------------------------------------------
 1 | 组件
 2 | ======
 3 | 
 4 | ## 知识点
 5 | 
 6 | * component
 7 | 
 8 | ### component
 9 | 
10 | 定义页面的局部区域块，完成单独的页面**小**功能。
11 | 
12 | 还是不明白？看个图吧！
13 | 
14 | ~~~html
15 | <div id="App">
16 |   <ol>
17 |     <game-item v-for="item in games" v-bind:game="item"></game-item>
18 |   </ol>
19 | </div>
20 | <script>
21 | /* 组件定义：game-item */
22 | Vue.component('game-item', {
23 |   props: ['game'],
24 |   template: '<li>{{ game.title }}</li>'
25 | });
26 | /* Vue对象实例化 */
27 | var App = new Vue({
28 |   el: '#App',
29 |   data: {
30 |     games: [
31 |       { title: '斗地主' },
32 |       { title: '打麻雀' },
33 |       { title: 'UNO' }
34 |     ]
35 |   }
36 | });
37 | </script>
38 | ~~~
39 | 
40 | 


--------------------------------------------------------------------------------
/Lesson18-表单控件绑定/README.md:
--------------------------------------------------------------------------------
 1 | 表单控件绑定
 2 | ============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-model
 7 | * input[type="text"]
 8 | 
 9 | ### v-model
10 | 
11 | 为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）
12 | 
13 | ~~~html
14 | <div id="App">
15 |     <h1>表单控件绑定</h1>
16 |     <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
17 |     <p>Message is: {{ message }}</p>
18 |     <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
19 | </div>
20 | <script>
21 |     var App = new Vue({
22 |         el: '#App', 
23 |         data: {
24 |             message: "我爱马里奥",
25 |         },
26 |         methods: {
27 |         },
28 |     });
29 | </script>
30 | ~~~
31 | 
32 | 


--------------------------------------------------------------------------------
/Lesson11-class绑定/README.md:
--------------------------------------------------------------------------------
 1 | Class绑定
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-bind:class
 7 | 
 8 | ### v-bind:class
 9 | 
10 | 为html标记绑定样式单class属性。
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <div v-bind:class="{active:isActive}">红色文本1</div>
15 |     <div :class="{active:isActive}">红色文本2</div>
16 |     <button @click="btnClick">改变class吧</button>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App',
21 |         data: {
22 |             isActive: true,
23 |         },
24 |         methods: {
25 |             btnClick: function(){
26 |                 this.isActive = false;
27 | 								//this.isActive = !this.isActive （取反值）
28 |             },
29 |         },
30 |     });
31 | </script>
32 | ~~~
33 | 
34 | 


--------------------------------------------------------------------------------
/Lesson08-计算属性/README.md:
--------------------------------------------------------------------------------
 1 | 计算属性
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * computed
 7 | 
 8 | ### computed
 9 | 
10 | 处理元数据，便于进行二次利用。（比如：消费税自动计算功能）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App',
19 |         data: {
20 |             price: 29980
21 |         },
22 |         computed: {
23 |             priceInTax: function(){
24 |                 return this.price * 1.08;
25 |             },
26 |             priceChinaRMB: function(){
27 |                 return Math.round(this.priceInTax / 16.75);
28 |             },
29 |         },
30 |     });
31 | </script>
32 | ~~~
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/Lesson24-局部的组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <my-weather></my-weather>
13 | </div>
14 | <script>
15 |     var WeatherComponent = {
16 |         template: '<div>今天下雨，随它去吧！</div>'
17 |     };
18 |     var App = new Vue({
19 |         el: '#App', 
20 |         data: {
21 |         },
22 |         components: {
23 |             'my-weather': WeatherComponent
24 |         },
25 |     });
26 | </script>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Lesson31-slot插槽/README.md:
--------------------------------------------------------------------------------
 1 | 组件：slot插槽
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * slot
 7 | 
 8 | ### slot
 9 | 
10 | slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <say-to pname="koma">
17 |         你的视频做的太差了。
18 |     </say-to>
19 |     <say-to pname="mike">
20 |         你千万不要学koma。
21 |     </say-to>
22 |     <say-to pname="john">
23 |         你教教他们两个吧。
24 |     </say-to>
25 | </div>
26 | <script>
27 |     Vue.component('say-to', {
28 |         props: ['pname'],
29 |         template: '<div>'
30 |             + '你好，<strong>{{pname}}</strong>！'
31 |             + '<slot></slot>'
32 |             + '</div>',
33 |     });
34 |     var App = new Vue({
35 |         el: '#App',
36 |     });
37 | </script>
38 | ~~~
39 | 
40 | 


--------------------------------------------------------------------------------
/Lesson26-数据/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <div>今天的天气是<today-weather/></div>
13 | </div>
14 | <script>
15 |     Vue.component('today-weather', {
16 |         template: '<strong>{{todayWeather}}</strong>',
17 |         data: function(){
18 |             return {
19 |                 todayWeather: '雨加雪'
20 |             };
21 |         }
22 |     });
23 |     var App = new Vue({
24 |         el: '#App', 
25 |     });
26 | </script>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Lesson05-按钮事件/README.md:
--------------------------------------------------------------------------------
 1 | 按钮事件
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-on
 7 | 
 8 | ### v-on
 9 | 
10 | 为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <p>您最喜欢的游戏是：{{mygame}}</p>
15 |     <button v-on:click="btnClick('我的世界')">我的世界</button>
16 |     <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button>
17 |     <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button>
18 |     <button @click="btnClick('魔界战记5')">魔界战记5</button>
19 | </div>
20 | <script>
21 |     var App = new Vue({
22 |         el: '#App',
23 |         data: {
24 |             mygame: '超级马里奥'
25 |         },
26 |         methods: {
27 |             btnClick: function(pname){
28 |                 this.mygame = pname;
29 |             },
30 |         },
31 |     });
32 | </script>
33 | ~~~
34 | 
35 | 


--------------------------------------------------------------------------------
/Lesson07-过滤器/README.md:
--------------------------------------------------------------------------------
 1 | 过滤器
 2 | =======
 3 | 
 4 | ## 知识点
 5 | 
 6 | * filters
 7 | 
 8 | ### filters
 9 | 
10 | 格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <p>{{message}}</p>
15 |     <p>{{message | toupper }}</p>
16 |     <hr>
17 |     <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p>
18 | </div>
19 | <script>
20 |     var App = new Vue({
21 |         el: '#App',
22 |         data: {
23 |             message: 'hello vue.js world.',
24 |             num: 0.3
25 |         },
26 |         filters: {
27 |             toupper: function(value){
28 |                 return value.toUpperCase();
29 |             },
30 |             topercentage: function(value){
31 |                 return value * 100 + '%';
32 |             },
33 |         },
34 |     });
35 | </script>
36 | ~~~
37 | 
38 | 


--------------------------------------------------------------------------------
/Lesson13-条件渲染/README.md:
--------------------------------------------------------------------------------
 1 | 条件渲染
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-if
 7 | * v-else-if
 8 | * v-else
 9 | 
10 | ### v-if
11 | 
12 | 判断vue.js的变量的值，然后执行页面渲染逻辑。（if-elseif-else）
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <h1 v-if="result == 0">成绩未公布</h1>
17 |     <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
18 |     <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
19 |     <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
20 |     <button @click="btnClick">考试成绩</button>
21 | </div>
22 | <script>
23 |     var App = new Vue({
24 |         el: '#App', 
25 |         data: {
26 |             result: 0
27 |         },
28 |         methods: {
29 |             btnClick: function(){
30 |                 this.result = Math.round(Math.random() * 100);
31 |             },
32 |         },
33 |     });
34 | </script>
35 | ~~~
36 | 
37 | 


--------------------------------------------------------------------------------
/Lesson14-元素显示/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <h1 v-show="result">任天堂新一代主机Switch</h1>
14 |     <button @click="btnClick">显示按钮</button>
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App', 
19 |         data: {
20 |             result: true
21 |         },
22 |         methods: {
23 |             btnClick: function(){
24 |                 this.result = !this.result;
25 |             },
26 |         },
27 |     });
28 | </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/Lesson28-传递变量/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <div>请输入您的名字：<input v-model="myname"></div>
13 |     <hr/>
14 |     <say-hello :pname="myname" />
15 | </div>
16 | <script>
17 |     Vue.component('say-hello', {
18 |         props: ['pname'],
19 |         template: '<div>你好，<strong>{{pname}}</strong>！</div>',
20 |     });
21 |     var App = new Vue({
22 |         el: '#App', 
23 |         data: {
24 |             myname: 'Koma'
25 |         }
26 |     });
27 | </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/Lesson19-表单复选框/README.md:
--------------------------------------------------------------------------------
 1 | 表单复选框
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-model
 7 | * input[type="checkbox"]
 8 | 
 9 | ### 表单复选框绑定
10 | 
11 | ~~~html
12 | <div id="App">
13 |     <h1>表单复选框</h1>
14 |     <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
15 |     <label for="生化危机7">生化危机7</label>
16 |     <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
17 |     <label for="模拟飞行">模拟飞行</label>
18 |     <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
19 |     <label for="塞尔达传说">塞尔达传说</label>
20 |     <br>
21 |     <p>您选择的游戏是: {{ checkedGames }}</p>
22 | </div>
23 | <script>
24 |     var App = new Vue({
25 |         el: '#App', 
26 |         data: {
27 |             checkedGames: []
28 |         },
29 |         methods: {
30 |         },
31 |     });
32 | </script>
33 | ~~~
34 | 
35 | 


--------------------------------------------------------------------------------
/Lesson18-表单控件绑定/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <h1>表单控件绑定</h1>
14 |     <input type="text" v-model="message" placeholder="来呀，编辑我吧！">
15 |     <p>Message is: {{ message }}</p>
16 |     <textarea v-model="message" placeholder="加入多行编辑" rows="8" cols="34"></textarea>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App', 
21 |         data: {
22 |             message: "我爱马里奥",
23 |         },
24 |         methods: {
25 |         },
26 |     });
27 | </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/Lesson12-class对象绑定/README.md:
--------------------------------------------------------------------------------
 1 | Class对象绑定
 2 | =============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-bind:class
 7 | 
 8 | ### v-bind:class
 9 | 
10 | 为html标记绑定样式单class对象。
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <div :class="myClass">红色文本</div>
15 |     <button @click="btnClick">改变class吧</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App',
20 |         data: {
21 |             myClass: {
22 |                 active: true,
23 |                 big: true,
24 |             },
25 |         },
26 |         methods: {
27 |             btnClick: function(){
28 | 								this.myClass.active = false;
29 |                 this.myClass.big = false;
30 | 								//this.myClass.active = !this.myClass.active;(取反值)
31 |                 //this.myClass.big = !this.myClass.big;(取反值)
32 |             },
33 |         },
34 |     });
35 | </script>
36 | ~~~
37 | 
38 | 


--------------------------------------------------------------------------------
/Lesson06-组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |   <ol>
14 |     <game-item v-for="item in games" v-bind:game="item"></game-item>
15 |   </ol>
16 | </div>
17 | <script>
18 | /* 组件定义：game-item */
19 | Vue.component('game-item', {
20 |   props: ['game'],
21 |   template: '<li>{{ game.title }}</li>'
22 | });
23 | /* Vue对象实例化 */
24 | var App = new Vue({
25 |   el: '#App',
26 |   data: {
27 |     games: [
28 |       { title: '斗地主' },
29 |       { title: '打麻雀' },
30 |       { title: 'UNO' }
31 |     ]
32 |   }
33 | });
34 | </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Lesson11-class绑定/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <div v-bind:class="{active:isActive}">红色文本1</div>
14 |     <div :class="{active:isActive}">红色文本2</div>
15 |     <button @click="btnClick">改变class吧</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App',
20 |         data: {
21 |             isActive: true,
22 |         },
23 |         methods: {
24 |             btnClick: function(){
25 |                 this.isActive = !this.isActive;
26 |             },
27 |         },
28 |     });
29 | </script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Lesson15-列表渲染/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <ul>
14 |         <li v-for="(game, index) in games">({{index+1}}) {{game.title}} / 售价：{{game.price}}元</li>
15 |         <!-- index 作为数组显示 -->
16 |     </ul>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App', 
21 |         data: {
22 |             games: [
23 |                 {title:"勇者斗恶龙",price:500},
24 |                 {title:"库跑卡丁车",price:400},
25 |                 {title:"马里奥世界",price:550},
26 |             ]
27 |         },
28 |     });
29 | </script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Lesson16-js对象迭代/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <h1>JS对象迭代</h1>
14 |     <div v-for="(value, key) in mygame">
15 |         {{ key }} : {{ value }}
16 |     </div>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App', 
21 |         data: {
22 |             mygame: {
23 |                 title: "乌贼娘2代",
24 |                 price: 350,
25 |                 pubdate: "2017年夏季",
26 |                 category: "射击",
27 |                 agerange: "全年龄",
28 |             },
29 |         },
30 |     });
31 | </script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Lesson32-组合slot/README.md:
--------------------------------------------------------------------------------
 1 | 组件：组合slot
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * slot命名
 7 | 
 8 | ### slot命名
 9 | 
10 | 在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <nba-all-stars c="奥尼尔" pf="加内特">
17 |         <span slot="sf">皮尔斯</span>
18 |         <span slot="sg">雷阿伦</span>
19 |         <span slot="pg">隆多</span>
20 |     </nba-all-stars>
21 | </div>
22 | <script>
23 |     Vue.component('nba-all-stars', {
24 |         props: ['c', 'pf'],
25 |         template: '<div>'
26 |             + '<div>中锋：{{c}}</div>'
27 |             + '<div>大前：{{pf}}</div>'
28 |             + '<div>小前：<slot name="sf"></slot></div>'
29 |             + '<div>分卫：<slot name="sg"></slot></div>'
30 |             + '<div>控卫：<slot name="pg"></slot></div>'
31 |             + '</div>',
32 |     });
33 |     var App = new Vue({
34 |         el: '#App',
35 |     });
36 | </script>
37 | ~~~
38 | 
39 | 


--------------------------------------------------------------------------------
/Lesson08-计算属性/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
14 | </div>
15 | <script>
16 |     var App = new Vue({
17 |         el: '#App',
18 |         data: {
19 |             price: 29980
20 |         },
21 |         computed: {
22 |             priceInTax: function(){
23 |                 return this.price * 1.08;
24 |             },
25 |             priceChinaRMB: function(){
26 |                 return Math.round(this.priceInTax / 16.75);
27 |             },
28 |         },
29 |     });
30 | </script>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/Lesson31-slot插槽/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <say-to pname="koma">
13 |         你的视频做的太差了。
14 |     </say-to>
15 |     <say-to pname="mike">
16 |         你千万不要学koma。
17 |     </say-to>
18 |     <say-to pname="john">
19 |         你教教他们两个吧。
20 |     </say-to>
21 | </div>
22 | <script>
23 |     Vue.component('say-to', {
24 |         props: ['pname'],
25 |         template: '<div>'
26 |             + '你好，<strong>{{pname}}</strong>！'
27 |             + '<slot></slot>'
28 |             + '</div>',
29 |     });
30 |     var App = new Vue({
31 |         el: '#App',
32 |     });
33 | </script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/Lesson03-条件与循环/README.md:
--------------------------------------------------------------------------------
 1 | 条件与循环
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-if
 7 | * v-for
 8 | 
 9 | ### v-if
10 | 
11 | 条件判断式，根据表达式的真伪进行页面处理。
12 | 
13 | ~~~html
14 | <p v-if="seen">快看我！</p>
15 | ~~~
16 | 
17 | ### v-for
18 | 
19 | 处理数组循环，将数据循环显示到页面上。
20 | 
21 | ~~~html
22 | <ol>
23 |   <li v-for="game in games">
24 |     {{ game.title }}
25 |   </li>
26 | </ol>
27 | ~~~
28 | 
29 | ## 综合例
30 | 
31 | ~~~html
32 | <div id="App">
33 |     <h3>游戏列表</h3>
34 |     <div v-if="seen">2017最新发卖</div>
35 |     <ol>
36 |         <li v-for="game in games">{{game.title}} / {{game.price}}元</li>
37 |     </ol>
38 | </div>
39 | <script>
40 |     var App = new Vue({
41 |         el: '#App',
42 |         data: {
43 |             seen: true,
44 |             games: [
45 |                 {title:'勇者斗恶龙',price:400},
46 |                 {title:'超级马里奥',price:380},
47 |                 {title:'我的世界',price:99},
48 |             ],
49 |         },
50 |     });
51 | </script>
52 | ~~~
53 | 
54 | 


--------------------------------------------------------------------------------
/Lesson12-class对象绑定/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <div :class="myClass">红色文本</div>
14 |     <button @click="btnClick">改变class吧</button>
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App',
19 |         data: {
20 |             myClass: {
21 |                 active: true,
22 |                 big: true,
23 |             },
24 |         },
25 |         methods: {
26 |             btnClick: function(){
27 |                 this.myClass.active = !this.myClass.active;
28 |                 this.myClass.big = !this.myClass.big;
29 |             },
30 |         },
31 |     });
32 | </script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Lesson13-条件渲染/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <h1 v-if="result == 0">成绩未公布</h1>
14 |     <h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
15 |     <h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
16 |     <h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
17 |     <button @click="btnClick">考试成绩</button>
18 | </div>
19 | <script>
20 |     var App = new Vue({
21 |         el: '#App', 
22 |         data: {
23 |             result: 0
24 |         },
25 |         methods: {
26 |             btnClick: function(){
27 |                 this.result = Math.round(Math.random() * 100);
28 |             },
29 |         },
30 |     });
31 | </script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Lesson05-按钮事件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <p>您最喜欢的游戏是：{{mygame}}</p>
14 |     <button v-on:click="btnClick('我的世界')">我的世界</button>
15 |     <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button>
16 |     <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button>
17 |     <button @click="btnClick('魔界战记5')">魔界战记5</button>
18 | </div>
19 | <script>
20 |     var App = new Vue({
21 |         el: '#App',
22 |         data: {
23 |             mygame: '超级马里奥'
24 |         },
25 |         methods: {
26 |             btnClick: function(pname){
27 |                 this.mygame = pname;
28 |             },
29 |         },
30 |     });
31 | </script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Lesson25-表行组件/README.md:
--------------------------------------------------------------------------------
 1 | 组件：表行组件
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 制作表行组件
 7 | 
 8 | ### 表行组件
 9 | 
10 | 为自己的页面表格编写表行组件。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <h1>2017年最期待的游戏是：</h1>
17 |     <table border="1">
18 |         <tr>
19 |             <td>编号</td>
20 |             <td>游戏名称</td>
21 |         </tr>
22 |         <my-row1></my-row1>
23 |         <my-row2></my-row2>
24 |         <my-row3></my-row3>
25 |     </table>
26 | </div>
27 | <script>
28 |     Vue.component('my-row1', {
29 |         template: '<tr><td>(1)</td><td>塞尔达传说:荒野之息(3/3)</td></tr>'
30 |     });    
31 |     Vue.component('my-row2', {
32 |         template: '<tr><td>(2)</td><td>新马里奥赛车(4/28)</td></tr>'
33 |     });    
34 |     Vue.component('my-row3', {
35 |         template: '<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
36 |     });    
37 |     var App = new Vue({
38 |         el: '#App', 
39 |         data: {
40 |         },
41 |         methods: {
42 |         },
43 |     });
44 | </script>
45 | ~~~
46 | 
47 | 


--------------------------------------------------------------------------------
/Lesson07-过滤器/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <p>{{message}}</p>
14 |     <p>{{message | toupper }}</p>
15 |     <hr>
16 |     <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App',
21 |         data: {
22 |             message: 'hello vue.js world.',
23 |             num: 0.3
24 |         },
25 |         filters: {
26 |             toupper: function(value){
27 |                 return value.toUpperCase();
28 |             },
29 |             topercentage: function(value){
30 |                 return value * 100 + '%';
31 |             },
32 |         },
33 |     });
34 | </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Lesson09-观察属性/README.md:
--------------------------------------------------------------------------------
 1 | 观察属性
 2 | =========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * $watch
 7 | 
 8 | ### $watch
 9 | 
10 | 与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
15 |     <button @click="btnClick(10000)">加价10000円</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App',
20 |         data: {
21 |             price: 29980,
22 |             priceInTax: 0,
23 |             priceChinaRMB: 0,
24 |         },
25 |         watch: {
26 |             price: function(newVal, oldVal){
27 |                 console.log(newVal, oldVal);
28 |                 this.priceInTax = Math.round(this.price * 1.08);
29 |                 this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
30 |             },
31 |         },
32 |         methods: {
33 |             btnClick: function(newPrice){
34 |                 this.price += newPrice;
35 |             },
36 |         },
37 |     });
38 | </script>
39 | ~~~
40 | 
41 | 


--------------------------------------------------------------------------------
/Lesson17-事件处理器/README.md:
--------------------------------------------------------------------------------
 1 | 事件处理器
 2 | ===========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-on:(event)/@(event)
 7 | 
 8 | ### v-on:(event)
 9 | 
10 | 页面元素的事件绑定。（click,keyup,load等等）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <h1>事件处理器</h1>
15 |     <input id="txtName" v-on:keyup="txtKeyup($event)">
16 |     <button id="btnOK" v-on:click="btnClick($event)">OK</button>
17 | </div>
18 | <script>
19 |     var App = new Vue({
20 |         el: '#App', 
21 |         data: {},
22 |         methods: {
23 |             txtKeyup: function(event){
24 |                 this.debugLog(event);
25 |             },
26 |             btnClick: function(event){
27 |                 this.debugLog(event);
28 |             },
29 |             debugLog:function(event){
30 |                 console.log(
31 |                     event.srcElement.tagName, 
32 |                     event.srcElement.id, 
33 |                     event.srcElement.innerHTML, 
34 |                     event.key?event.key:""
35 |                 );
36 |             },
37 |         },
38 |     });
39 | </script>
40 | ~~~
41 | 
42 | 


--------------------------------------------------------------------------------
/Lesson19-表单复选框/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>表单复选框</h1>
13 |     <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
14 |     <label for="生化危机7">生化危机7</label>
15 |     <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
16 |     <label for="模拟飞行">模拟飞行</label>
17 |     <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
18 |     <label for="塞尔达传说">塞尔达传说</label>
19 |     <br>
20 |     <p>您选择的游戏是: {{ checkedGames }}</p>
21 | </div>
22 | <script>
23 |     var App = new Vue({
24 |         el: '#App', 
25 |         data: {
26 |             checkedGames: []
27 |         },
28 |         methods: {
29 |         },
30 |     });
31 | </script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Lesson20-表单单选按钮/README.md:
--------------------------------------------------------------------------------
 1 | 表单单选按钮
 2 | ============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-model
 7 | * input[type="radio"]
 8 | 
 9 | ### 表单单选按钮绑定
10 | 
11 | ~~~html
12 | <div id="App">
13 |     <h1>表单单选按钮</h1>
14 | 
15 |     <h3>选择性别</h3>
16 |     <input type="radio" id="male" value="男" v-model="pickedSex">
17 |     <label for="male">男</label>
18 |     <br>
19 |     <input type="radio" id="female" value="女" v-model="pickedSex">
20 |     <label for="female">女</label>
21 | 
22 |     <h3>选择爱好</h3>
23 |     <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
24 |     <label for="game">玩游戏</label>
25 |     <br>
26 |     <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
27 |     <label for="movie">看电影</label>
28 | 
29 |     <h3>选择结果</h3>
30 |     <p>性别: {{ pickedSex }}</p>
31 |     <p>爱好: {{ pickedHobby }}</p>
32 | 
33 | </div>
34 | <script>
35 |     var App = new Vue({
36 |         el: '#App', 
37 |         data: {
38 |             pickedSex: "",
39 |             pickedHobby: "",
40 |         },
41 |         methods: {
42 |         },
43 |     });
44 | </script>
45 | ~~~
46 | 
47 | 


--------------------------------------------------------------------------------
/Lesson32-组合slot/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <nba-all-stars c="奥尼尔" pf="加内特">
13 |         <span slot="sf">皮尔斯</span>
14 |         <span slot="sg">雷阿伦</span>
15 |         <span slot="pg">隆多</span>
16 |     </nba-all-stars>
17 | </div>
18 | <script>
19 |     Vue.component('nba-all-stars', {
20 |         props: ['c', 'pf'],
21 |         template: '<div>'
22 |             + '<div>中锋：{{c}}</div>'
23 |             + '<div>大前：{{pf}}</div>'
24 |             + '<div>小前：<slot name="sf"></slot></div>'
25 |             + '<div>分卫：<slot name="sg"></slot></div>'
26 |             + '<div>控卫：<slot name="pg"></slot></div>'
27 |             + '</div>',
28 |     });
29 |     var App = new Vue({
30 |         el: '#App',
31 |     });
32 | </script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Lesson10-设定计算属性/README.md:
--------------------------------------------------------------------------------
 1 | 设定计算属性
 2 | ============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * setter
 7 | 
 8 | ### setter
 9 | 
10 | 设置计算属性，同步更新元数据的值。（又是令人费解的描述）
11 | 
12 | ~~~html
13 | <div id="App">
14 |     <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
15 |     <button @click="btnClick(10800)">把含税改价为10800円</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App',
20 |         data: {
21 |             price: 29980
22 |         },
23 |         computed: {
24 |             priceInTax: {
25 |                 get:function(){
26 |                     return this.price * 1.08;
27 |                 },
28 |                 set: function(value){
29 |                     this.price = value / 1.08;
30 |                 }
31 |             },
32 |             priceChinaRMB: function(){
33 |                 return Math.round(this.priceInTax / 16.75);
34 |             },
35 |         },
36 |         methods: {
37 |             btnClick: function(newPrice){
38 |                 this.priceInTax = newPrice;
39 |             },
40 |         },
41 |     });
42 | </script>
43 | ~~~
44 | 
45 | 


--------------------------------------------------------------------------------
/Lesson27-传递数据/README.md:
--------------------------------------------------------------------------------
 1 | 组件：传递数据
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * 为组件传递数据
 7 | 
 8 | ### 组件数据传递
 9 | 
10 | 制作可接受参数的组件。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <h1>您的成绩评价</h1>
17 |     <test-result :score="50"></test-result>
18 |     <test-result :score="65"></test-result>
19 |     <test-result :score="90"></test-result>
20 |     <test-result :score="100"></test-result>
21 | </div>
22 | <script>
23 |     Vue.component('test-result', {
24 |         props: ['score'],
25 |         template: '<div><strong>{{score}}分，{{testResult}}</strong></div>',
26 |         computed: {
27 |             testResult: function() {
28 |                 var strResult = "";
29 |                 if (this.score < 60)
30 |                     strResult = "不及格";
31 |                 else if (this.score < 90)
32 |                     strResult = "中等生";
33 |                 else if (this.score <= 100)
34 |                     strResult = "优秀生";
35 |                 return strResult;
36 |             }
37 |         }
38 |     });
39 |     var App = new Vue({
40 |         el: '#App', 
41 |     });
42 | </script>
43 | ~~~
44 | 
45 | 


--------------------------------------------------------------------------------
/Lesson30-事件传递/README.md:
--------------------------------------------------------------------------------
 1 | 组件：事件传递
 2 | ===============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-on
 7 | * $emit
 8 | 
 9 | ### v-on
10 | 
11 | 侦听组件事件，当组件触发事件后进行事件处理。
12 | 
13 | ### $emit
14 | 
15 | 触发事件，并将数据提交给事件侦听者。
16 | 
17 | ## 综合例
18 | 
19 | ~~~html
20 | <div id="App">
21 |     <h1>人生加法</h1>
22 |     <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
23 |     <hr/>
24 |     <h3>{{result}}</h3>
25 | </div>
26 | <script>
27 |     Vue.component('add-method', {
28 |         props: ['a', 'b'],
29 |         template: '<div><button v-on:click="add">加吧</button></div>',
30 |         methods: {
31 |             add: function(){
32 |                 var value = 0;
33 |                 value = this.a + this.b;
34 |                 this.$emit('add_event', {
35 |                     result:value
36 |                 });
37 |             }
38 |         },
39 |     });
40 |     var App = new Vue({
41 |         el: '#App', 
42 |         data: {
43 |             result: 0
44 |         },
45 |         methods: {
46 |             getAddResult: function(pval){
47 |                 this.result = pval.result;
48 |             }
49 |         },
50 |     });
51 | </script>
52 | ~~~
53 | 
54 | 


--------------------------------------------------------------------------------
/Lesson17-事件处理器/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <h1>事件处理器</h1>
14 |     <input id="txtName" v-on:keyup="txtKeyup($event)">
15 |     <button id="btnOK" v-on:click="btnClick($event)">OK</button>
16 | </div>
17 | <script>
18 |     var App = new Vue({
19 |         el: '#App', 
20 |         data: {},
21 |         methods: {
22 |             txtKeyup: function(event){
23 |                 this.debugLog(event);
24 |             },
25 |             btnClick: function(event){
26 |                 this.debugLog(event);
27 |             },
28 |             debugLog:function(event){
29 |                 console.log(
30 |                     event.srcElement.tagName, 
31 |                     event.srcElement.id, 
32 |                     event.srcElement.innerHTML, 
33 |                     event.key?event.key:""
34 |                 );
35 |             },
36 |         },
37 |     });
38 | </script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/Lesson09-观察属性/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
14 |     <button @click="btnClick(10000)">加价10000円</button>
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App',
19 |         data: {
20 |             price: 0,
21 |             priceInTax: 0,
22 |             priceChinaRMB: 0,
23 |         },
24 |         watch: {
25 |             price: function(newVal, oldVal){
26 |                 console.log(newVal, oldVal);
27 |                 this.priceInTax = Math.round(this.price * 1.08);
28 |                 this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
29 |             },
30 |         },
31 |         methods: {
32 |             btnClick: function(newPrice){
33 |                 this.price += newPrice;
34 |             },
35 |         },
36 |     });
37 |     App.price = 29980;
38 | </script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/Lesson20-表单单选按钮/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>表单单选按钮</h1>
13 | 
14 |     <h3>选择性别</h3>
15 |     <input type="radio" id="male" value="男" v-model="pickedSex">
16 |     <label for="male">男</label>
17 |     <br>
18 |     <input type="radio" id="female" value="女" v-model="pickedSex">
19 |     <label for="female">女</label>
20 | 
21 |     <h3>选择爱好</h3>
22 |     <input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
23 |     <label for="game">玩游戏</label>
24 |     <br>
25 |     <input type="radio" id="movie" value="看电影" v-model="pickedHobby">
26 |     <label for="movie">看电影</label>
27 | 
28 |     <h3>选择结果</h3>
29 |     <p>性别: {{ pickedSex }}</p>
30 |     <p>爱好: {{ pickedHobby }}</p>
31 | 
32 | </div>
33 | <script>
34 |     var App = new Vue({
35 |         el: '#App', 
36 |         data: {
37 |             pickedSex: "",
38 |             pickedHobby: "",
39 |         },
40 |         methods: {
41 |         },
42 |     });
43 | </script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/Lesson30-事件传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>人生加法</h1>
13 |     <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
14 |     <hr/>
15 |     <h3>{{result}}</h3>
16 | </div>
17 | <script>
18 |     Vue.component('add-method', {
19 |         props: ['a', 'b'],
20 |         template: '<div><button v-on:click="add">加吧</button></div>',
21 |         methods: {
22 |             add: function(){
23 |                 var value = 0;
24 |                 value = this.a + this.b;
25 |                 this.$emit('add_event', {
26 |                     result:value
27 |                 });
28 |             }
29 |         },
30 |     });
31 |     var App = new Vue({
32 |         el: '#App', 
33 |         data: {
34 |             result: 0
35 |         },
36 |         methods: {
37 |             getAddResult: function(pval){
38 |                 this.result = pval.result;
39 |             }
40 |         },
41 |     });
42 | </script>
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/Lesson03-条件与循环/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 |     <div id="App">
13 |         <h3>游戏列表</h3>
14 |         <!-- Virtual DOM -->
15 |         <div v-if="seen">2020最新发卖</div>
16 |         <ol>
17 |             <li v-for="game in games">{{game.title}} / {{game.price}}元</li>
18 |         </ol>
19 |     </div>
20 |     <script>
21 |         var App = new Vue({
22 |             el: '#App'
23 |             , data: {
24 |                 seen: false
25 |                 , games: [
26 |                     {
27 |                         title: '勇者斗恶龙'
28 |                         , price: 400
29 |                     }
30 |                     , {
31 |                         title: '超级马里奥'
32 |                         , price: 380
33 |                     }
34 |                     , {
35 |                         title: '我的世界'
36 |                         , price: 99
37 |                     }
38 |             , ]
39 |             , }
40 |         , });
41 |     </script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/Lesson27-传递数据/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>您的成绩评价</h1>
13 |     <test-result :score="50"></test-result>
14 |     <test-result :score="65"></test-result>
15 |     <test-result :score="90"></test-result>
16 |     <test-result :score="100"></test-result>
17 | </div>
18 | <script>
19 |     Vue.component('test-result', {
20 |         props: ['score'],
21 |         template: '<div><strong>{{score}}分，{{testResult}}</strong></div>',
22 |         computed: {
23 |             testResult: function() {
24 |                 var strResult = "";
25 |                 if (this.score < 60)
26 |                     strResult = "不及格";
27 |                 else if (this.score < 90)
28 |                     strResult = "中等生";
29 |                 else if (this.score <= 100)
30 |                     strResult = "优秀生";
31 |                 return strResult;
32 |             }
33 |         }
34 |     });
35 |     var App = new Vue({
36 |         el: '#App', 
37 |     });
38 | </script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/Lesson25-表行组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>2017年最期待的游戏是：</h1>
13 |     <table border="1">
14 |         <tr>
15 |             <td>编号</td>
16 |             <td>游戏名称</td>
17 |         </tr>
18 |         <tr is="my-row1"></tr>
19 |         <tr is="my-row2"></tr>
20 |         <tr is="my-row3"></tr>
21 | <!--
22 |         <my-row1></my-row1>
23 |         <my-row2></my-row2>
24 |         <my-row3></my-row3>
25 | -->
26 |     </table>
27 | </div>
28 | <script>
29 |     Vue.component('my-row1', {
30 |         template: '<tr><td>(1)</td><td>塞尔达传说:荒野之息(3/3)</td></tr>'
31 |     });    
32 |     Vue.component('my-row2', {
33 |         template: '<tr><td>(2)</td><td>新马里奥赛车(4/28)</td></tr>'
34 |     });    
35 |     Vue.component('my-row3', {
36 |         template: '<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
37 |     });    
38 |     var App = new Vue({
39 |         el: '#App', 
40 |         data: {
41 |         },
42 |         methods: {
43 |         },
44 |     });
45 | </script>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/Lesson10-设定计算属性/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | 
11 | <body>
12 | <div id="App">
13 |     <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p>
14 |     <button @click="btnClick(10800)">把含税改价为10800円</button>
15 | </div>
16 | <script>
17 |     var App = new Vue({
18 |         el: '#App',
19 |         data: {
20 |             price: 29980
21 |         },
22 |         computed: {
23 |             priceInTax: {
24 |                 get:function(){
25 |                     return this.price * 1.08;
26 |                 },
27 |                 set: function(value){
28 |                     this.price = value / 1.08;
29 |                 }
30 |             },
31 |             priceChinaRMB: function(){
32 |                 return Math.round(this.priceInTax / 16.75);
33 |             },
34 |         },
35 |         methods: {
36 |             btnClick: function(newPrice){
37 |                 this.priceInTax = newPrice;
38 |             },
39 |         },
40 |     });
41 | </script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/Lesson29-参数验证/README.md:
--------------------------------------------------------------------------------
 1 | 组件：参数验证
 2 | ==============
 3 | 
 4 | ## 知识点
 5 | 
 6 | * props:组件参数验证语法
 7 | 
 8 | ### 组件的数据
 9 | 
10 | 为组件中接受到的变量进行逻辑验证。
11 | 
12 | ## 综合例
13 | 
14 | ~~~html
15 | <div id="App">
16 |     <h1>身世之谜</h1>
17 |     <show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
18 | </div>
19 | <script>
20 |     Vue.component('show-member-info', {
21 |         props: {
22 |             name: {
23 |                 type: String,
24 |                 required: true,
25 |             },
26 |             age: {
27 |                 type: Number,
28 |                 validator: function (value) {
29 |                     return value >= 0 && value <= 130;
30 |                 }                
31 |             },
32 |             detail: {
33 |                 type: Object,
34 |                 default: function() {
35 |                     return {
36 |                         address: 'US',
37 |                         language: 'English',
38 |                     };
39 |                 }
40 |             },
41 |         },
42 |         template: '<div>姓名：{{this.name}}<br/>' 
43 |             + '年龄：{{this.age}}岁<br/>'
44 |             + '地址：{{this.detail.address}}<br/>'
45 |             + '语言：{{this.detail.language}} </div>',
46 |     });
47 |     var App = new Vue({
48 |         el: '#App', 
49 |     });
50 | </script>
51 | ~~~
52 | 
53 | 


--------------------------------------------------------------------------------
/Lesson21-表单下拉框/README.md:
--------------------------------------------------------------------------------
 1 | 表单下拉框
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * v-model
 7 | * select
 8 | 
 9 | ### 表单下拉框绑定
10 | 
11 | ~~~html
12 | <div id="App">
13 |     <h3>你最喜欢的NBA球星是：</h3>
14 |     <select v-model="likedNBAStar" style="width:210px;">
15 |         <option>科比</option>
16 |         <option>詹姆斯</option>
17 |         <option>哈登</option>
18 |         <option>库里</option>
19 |         <option>杜兰特</option>
20 |     </select>
21 | 
22 |     <h3>我的全明星：</h3>
23 |     <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
24 |         <option>阿德托昆博</option>
25 |         <option>怀特赛德</option>
26 |         <option>阿尔德里奇</option>
27 |         <option>戴维斯</option>
28 |         <option>格里芬</option>
29 |         <option>詹姆斯</option>
30 |         <option>杜兰特</option>
31 |         <option>巴特勒</option>
32 |         <option>德罗赞</option>
33 |         <option>哈登</option>
34 |         <option>科比</option>
35 |         <option>韦德</option>
36 |         <option>伦纳德</option>
37 |         <option>库里</option>
38 |         <option>欧文</option>
39 |         <option>保罗</option>
40 |         <option>林树豪</option>
41 |     </select>
42 | 
43 |     <h3>选择结果</h3>
44 |     <p>我最最喜欢: {{ likedNBAStar }}</p>
45 |     <p>我的全明星: {{ likedNBAStars }}</p>
46 | 
47 | </div>
48 | <script>
49 |     var App = new Vue({
50 |         el: '#App', 
51 |         data: {
52 |             likedNBAStar: null,
53 |             likedNBAStars: [],
54 |         },
55 |         methods: {
56 |         },
57 |     });
58 | </script>
59 | ~~~
60 | 
61 | 


--------------------------------------------------------------------------------
/Lesson29-参数验证/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>身世之谜</h1>
13 |     <show-member-info name="koma" :age="25" :detail="{address:'earth', language:'世界语'}"></show-member-info>
14 | </div>
15 | <script>
16 |     Vue.component('show-member-info', {
17 |         props: {
18 |             name: {
19 |                 type: String,
20 |                 required: true,
21 |             },
22 |             age: {
23 |                 type: Number,
24 |                 validator: function (value) {
25 |                     return value >= 0 && value <= 130;
26 |                 }                
27 |             },
28 |             detail: {
29 |                 type: Object,
30 |                 default: function() {
31 |                     return {
32 |                         address: 'US',
33 |                         language: 'English',
34 |                     };
35 |                 }
36 |             },
37 |         },
38 |         template: '<div>姓名：{{this.name}}<br/>' 
39 |             + '年龄：{{this.age}}岁<br/>'
40 |             + '地址：{{this.detail.address}}<br/>'
41 |             + '语言：{{this.detail.language}} </div>',
42 |     });
43 |     var App = new Vue({
44 |         el: '#App', 
45 |     });
46 | </script>
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/Lesson22-表单修饰符/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h1>用户注册</h1>
13 |     
14 |     <div>
15 |         <label for="username">用户：</label>
16 |         <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
17 |         <span v-if="checkUsernameOK">可注册</span>
18 |     </div>
19 |     <div>
20 |         <label for="age">年龄：</label>
21 |         <input type="number" id="age" v-model.number="age">
22 |     </div>
23 |     <div>
24 |         <label for="content">个人简介：</label><br/>
25 |         <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
26 |     </div>
27 |     
28 |     <h4>信息区</h4>
29 |     <p>{{username}}</p>
30 |     <p>{{age}}</p>
31 |     <p><pre>{{content}}</pre></p>
32 | </div>
33 | <script>
34 |     var App = new Vue({
35 |         el: '#App', 
36 |         data: {
37 |             username: "",
38 |             checkUsernameOK: false,
39 |             age: "",
40 |             content: "",
41 |         },
42 |         methods: {
43 |             checkUsername: function(){
44 |                 if (this.username.length > 0) this.checkUsernameOK = true;
45 |                 else this.checkUsernameOK = false;
46 |             },
47 |         },
48 |     });
49 | </script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/Lesson21-表单下拉框/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <title></title>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 |     <link href="../css/style.css" rel="stylesheet"> </head>
10 | <body>
11 | <div id="App">
12 |     <h3>你最喜欢的NBA球星是：</h3>
13 |     <select v-model="likedNBAStar" style="width:210px;">
14 |         <option>科比</option>
15 |         <option>詹姆斯</option>
16 |         <option>哈登</option>
17 |         <option>库里</option>
18 |         <option>杜兰特</option>
19 |     </select>
20 | 
21 |     <h3>我的全明星：</h3>
22 |     <select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
23 |         <option>阿德托昆博</option>
24 |         <option>怀特赛德</option>
25 |         <option>阿尔德里奇</option>
26 |         <option>戴维斯</option>
27 |         <option>格里芬</option>
28 |         <option>詹姆斯</option>
29 |         <option>杜兰特</option>
30 |         <option>巴特勒</option>
31 |         <option>德罗赞</option>
32 |         <option>哈登</option>
33 |         <option>科比</option>
34 |         <option>韦德</option>
35 |         <option>伦纳德</option>
36 |         <option>库里</option>
37 |         <option>欧文</option>
38 |         <option>保罗</option>
39 |         <option>林树豪</option>
40 |     </select>
41 | 
42 |     <h3>选择结果</h3>
43 |     <p>我最最喜欢: {{ likedNBAStar }}</p>
44 |     <p>我的全明星: {{ likedNBAStars }}</p>
45 | 
46 | </div>
47 | <script>
48 |     var App = new Vue({
49 |         el: '#App', 
50 |         data: {
51 |             likedNBAStar: null,
52 |             likedNBAStars: [],
53 |         },
54 |         methods: {
55 |         },
56 |     });
57 | </script>
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/Lesson22-表单修饰符/README.md:
--------------------------------------------------------------------------------
 1 | 表单修饰符
 2 | ==========
 3 | 
 4 | ## 知识点
 5 | 
 6 | * .lazy
 7 | * .number
 8 | * .trim
 9 | 
10 | ### .lazy
11 | 
12 | 用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。
13 | 
14 | ~~~html
15 | 用户名：<input v-model.lazy="username">
16 | ~~~
17 | 
18 | ### .number
19 | 
20 | 将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。
21 | 
22 | ~~~html
23 | 年龄：<input v-model.number="age" type="number">
24 | ~~~
25 | 
26 | ### .trim
27 | 
28 | 自动去掉用户输入内容两端的空格。
29 | 
30 | ~~~html
31 | 意见：<input v-model.trim="content">
32 | ~~~
33 | 
34 | ## 综合例
35 | 
36 | ~~~html
37 | <div id="App">
38 |     <h1>用户注册</h1>
39 |     
40 |     <div>
41 |         <label for="username">用户：</label>
42 |         <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
43 |         <span v-if="checkUsernameOK">可注册</span>
44 |     </div>
45 |     <div>
46 |         <label for="age">年龄：</label>
47 |         <input type="number" id="age" v-model.number="age">
48 |     </div>
49 |     <div>
50 |         <label for="content">个人简介：</label><br/>
51 |         <textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
52 |     </div>
53 |     
54 |     <h4>信息区</h4>
55 |     <p>{{username}}</p>
56 |     <p>{{age}}</p>
57 |     <p><pre>{{content}}</pre></p>
58 | </div>
59 | <script>
60 |     var App = new Vue({
61 |         el: '#App', 
62 |         data: {
63 |             username: "",
64 |             checkUsernameOK: false,
65 |             age: "",
66 |             content: "",
67 |         },
68 |         methods: {
69 |             checkUsername: function(){
70 |                 if (this.username.length > 0) this.checkUsernameOK = true;
71 |                 else this.checkUsernameOK = false;
72 |             },
73 |         },
74 |     });
75 | </script>
76 | ~~~
77 | 
78 | 


--------------------------------------------------------------------------------