├── .gitignore
├── 00-一言接口-文字打印
    ├── index.html
    └── js
    │   └── jquery-3.1.1.min.js
├── 01-Vue基本模板
    ├── index.html
    └── js
    │   └── vue.js
├── 02-Vue数据单向绑定
    ├── index.html
    └── js
    │   └── vue.js
├── 03-Vue数据双向传递
    ├── index.html
    └── js
    │   └── vue.js
├── 04-Vue指令v-once
    ├── index.html
    └── js
    │   └── vue.js
├── 05-Vue指令v-cloak
    ├── index.html
    └── js
    │   └── vue.js
├── 06-Vue指令v-text-v-html
    ├── index.html
    └── js
    │   └── vue.js
├── 07-Vue指令v-if
    ├── index.html
    └── js
    │   └── vue.js
├── 08-Vue指令v-show
    ├── index.html
    └── js
    │   └── vue.js
├── 09-Vue指令v-for
    ├── index.html
    └── js
    │   └── vue.js
├── 10-Vue指令v-bind
    ├── index.html
    └── js
    │   └── vue.js
├── 11-Vue指令绑定类名
    ├── index.html
    └── js
    │   └── vue.js
├── 12-Vue指令绑定样式
    ├── index.html
    └── js
    │   └── vue.js
├── 13-Vue指令v-on
    ├── index.html
    └── js
    │   └── vue.js
├── 14-Vue自定义全局指令
    ├── index.html
    └── js
    │   └── vue.js
├── 15-Vue自定义局部指令
    ├── index.html
    └── js
    │   └── vue.js
├── 16-Vue计算属性
    ├── index.html
    └── js
    │   └── vue.js
├── 17-Vue计算属性和函数
    ├── index.html
    └── js
    │   └── vue.js
├── 18-Vue自定义全局过滤器
    ├── index.html
    └── js
    │   └── vue.js
├── 19-Vue自定义局部过滤器
    ├── index.html
    └── js
    │   └── vue.js
├── 20-Vue过滤器练习-格式化时间
    ├── index.html
    └── js
    │   └── vue.js
├── 21-Vue学生管理系统
    ├── index.html
    └── js
    │   └── vue.js
├── 22-Vue过渡动画
    ├── index.html
    └── js
    │   └── vue.js
├── 23-Vue过渡动画-JS钩子
    ├── index.html
    └── js
    │   └── vue.js
├── 24-Vue过渡动画-Velocity
    ├── index.html
    └── js
    │   └── vue.js
├── 25-Vue过渡动画-自定义类名
    ├── index.html
    └── js
    │   └── vue.js
├── 26-Vue过渡动画-Animate
    ├── index.html
    └── js
    │   └── vue.js
├── 27-Vue-v-for-key
    ├── index.html
    └── js
    │   └── vue.js
├── 28-Vue列表过渡
    ├── index.html
    └── js
    │   └── vue.js
├── 29-Vue组件-自定义全局组件
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 30-Vue组件-自定义局部组件
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 31-Vue组件-data&methods
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 32-Vue组件-组件切换
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 33-Vue组件-动态组件
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 34-Vue组件-组件动画
    ├── images
    │   ├── bg.jpg
    │   └── fm.jpg
    ├── index.html
    └── js
    │   └── vue.js
├── 35-Vue组件-父子组件
    ├── index.html
    └── js
    │   └── vue.js
├── 36-Vue组件-父子组件数据传递
    ├── index.html
    └── js
    │   └── vue.js
├── 37-Vue组件-父子组件方法传递
    ├── index.html
    └── js
    │   └── vue.js
├── 38-Vue组件-子父组件数据传递
    ├── index.html
    └── js
    │   └── vue.js
├── 39-Vue组件-组件命名
    ├── index.html
    └── js
    │   └── vue.js
├── 40-Vue组件-数据方法多级传递
    ├── index.html
    └── js
    │   └── vue.js
├── 41-Vue组件-匿名插槽
    ├── index.html
    └── js
    │   └── vue.js
├── 42-Vue组件-具名插槽
    ├── index.html
    └── js
    │   └── vue.js
├── 43-Vue组件-v-slot指令
    ├── index.html
    └── js
    │   └── vue.js
├── 44-Vue组件-作用域插槽
    ├── index.html
    └── js
    │   └── vue.js
├── 45-Vue组件-数据传递练习
    ├── index.html
    └── js
    │   └── vue.js
├── 46-Vuex-共享数据基本使用
    ├── index.html
    └── js
    │   ├── vue.js
    │   └── vuex.js
├── 47-Vuex-修改共享数据
    ├── index.html
    └── js
    │   ├── vue.js
    │   └── vuex.js
├── 48-Vuex-getters
    ├── index.html
    └── js
    │   ├── vue.js
    │   └── vuex.js
├── 49-VueRouter-基本介绍
    ├── index.html
    └── js
    │   ├── vue-router.js
    │   └── vue.js
├── 50-VueRouter-传递参数
    ├── index.html
    └── js
    │   ├── vue-router.js
    │   └── vue.js
├── 51-VueRouter-嵌套路由
    ├── index.html
    └── js
    │   ├── vue-router.js
    │   └── vue.js
├── 52-VueRouter-命名视图
    ├── index.html
    └── js
    │   ├── vue-router.js
    │   └── vue.js
├── 53-VueRouter-watch属性
    ├── index.html
    └── js
    │   ├── vue-router.js
    │   └── vue.js
├── 54-Vue生命周期方法
    ├── images
    │   └── lifecycle.png
    ├── index.html
    └── js
    │   └── vue.js
├── 55-Vue特殊特性
    ├── index.html
    └── js
    │   └── vue.js
└── 56-Vue-组件渲染方式
    ├── index.html
    └── js
        └── vue.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | package-lock.json
 8 | tests/**/coverage/
 9 | 
10 | # Editor directories and files
11 | .idea
12 | .vscode
13 | *.suo
14 | *.ntvs*
15 | *.njsproj
16 | *.sln
17 | 


--------------------------------------------------------------------------------
/00-一言接口-文字打印/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>00-一言接口-文字打印</title>
 6 |   <script src="js/jquery-3.1.1.min.js"></script>
 7 |   <style type="text/css">
 8 |       .container {
 9 |           float: left;
10 |           display: inline-block;
11 |           position: relative;
12 |       }
13 | 
14 |       @keyframes blink-caret {
15 |           50% {
16 |               background-color: transparent;
17 |           }
18 |       }
19 | 
20 |       span {
21 |           animation: blink-caret 1s step-end infinite;
22 |           width: 3px;
23 |           height: 20px;
24 |           background-color: #000;
25 |           float: left;
26 |           position: absolute;
27 |           right: -10px;
28 |       }
29 |   </style>
30 | </head>
31 | <body>
32 | <div id="print">
33 |   <div class="container"></div>
34 | </div>
35 | <script type="text/javascript">
36 |   var s = '';
37 |   var con = $('.container');
38 |   var index = 0;
39 |   var length = 0;
40 |   var tId = null;
41 | 
42 |   function start() {
43 |     con.text('');
44 |     con.append('<span></span>');
45 |     tId = setInterval(function () {
46 |       con.append(s.charAt(index));
47 |       if (index++ === length) {
48 |         $.ajax({
49 |           url: "https://v1.hitokoto.cn/?c=i",
50 |           type: "GET",
51 |           dataType: "json",
52 |           success: function (data) {
53 |             s = data.hitokoto
54 |             length = s.length + 5
55 |             console.log(s)
56 |           }
57 |         });
58 |         clearInterval(tId);
59 |         index = 0;
60 |         start()
61 |       }
62 |     }, 300);
63 |   }
64 |   start();
65 | </script>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/01-Vue基本模板/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>01-Vue基本模板</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <h1>{{name}}</h1>
11 | </div>
12 | </body>
13 | <script>
14 |     /* 1. 创建 vue 实例对象 */
15 |     let vue = new Vue({
16 |         // 2. 声明vue的实例对象控制页面的哪个区域
17 |         el: '#app',
18 |         // 3. 声明vue控制区域可以使用的数据
19 |         data: {
20 |             name: 'zsy'
21 |         }
22 |     })
23 | </script>
24 | </html>
25 | <!--
26 | Vue 使用步骤
27 | 1. 导入 vue
28 | 2. 创建 vue 实例
29 | 3. 声明控制区域
30 | 4. 声明可用数据
31 | 5. 使用数据渲染页面组件
32 | -->
33 | 


--------------------------------------------------------------------------------
/02-Vue数据单向绑定/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>02-Vue数据单向绑定</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <h1>{{name}}</h1>
11 | </div>
12 | </body>
13 | <script>
14 |     /* 1. 创建 vue 实例对象 */
15 |     let vm = new Vue({
16 |         // 2. 声明vue的实例对象控制页面的哪个区域
17 |         el: '#app',
18 |         // 3. 声明vue控制区域可以使用的数据
19 |         data: {
20 |             name: 'zsy'
21 |         }
22 |     })
23 | </script>
24 | </html>
25 | <!--
26 | 1. MVVM 设计模式                                vue 中 MVVM 的划分
27 | M: Model 数据模型(保存数据，处理数据业务逻辑)    即vue实例对象中的data
28 | V: View 视图(展示数据，与用户交互)              即vue绑定的页面区域el
29 | VM: View Model 数据模型与视图的桥梁             即vue实例对象 vm
30 | 
31 | 2. Vue 中数据的单向传递
32 | 我们把‘数据’交给‘Vue实例对象’，Vue实例对象将数据传递给界面
33 | M  -> VM  -> V
34 | -->
35 | 


--------------------------------------------------------------------------------
/03-Vue数据双向传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>03-Vue数据双向传递</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h1>{{name}}</h1>
11 |   <input type="text" v-model="msg">
12 | </div>
13 | </body>
14 | <script>
15 |     /* 1. 创建 vue 实例对象 */
16 |     let vm = new Vue({
17 |         // 2. 声明vue的实例对象控制页面的哪个区域
18 |         el: '#app',
19 |         // 3. 声明vue控制区域可以使用的数据
20 |         data: {
21 |           name: 'zsy',
22 |           msg: 'https://github.com/zsy0216'
23 |         }
24 |     })
25 | </script>
26 | </html>
27 | <!--
28 | 1. 数据双向绑定
29 | 默认情况下，Vue只支持数据单向传递 M->VM->V
30 | 但是由于 Vue是基于MVVM设计模式的，所以也提供了双向传递的能力；
31 | 在 <input> <textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定；
32 | 
33 | 2. 注意点：
34 | v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，
35 | 而总是将vue实例的数据作为数据来源。
36 | -->
37 | 


--------------------------------------------------------------------------------
/04-Vue指令v-once/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>04-Vue指令v-once</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h1 v-once>原始数据：{{name}}</h1>
11 |   <h1>当前数据：{{name}}</h1>
12 | </div>
13 | </body>
14 | <script>
15 |     /* 1. 创建 vue 实例对象 */
16 |     let vm = new Vue({
17 |         // 2. 声明vue的实例对象控制页面的哪个区域
18 |         el: '#app',
19 |         // 3. 声明vue控制区域可以使用的数据
20 |         data: {
21 |           name: 'zsy'
22 |         }
23 |     })
24 | </script>
25 | </html>
26 | <!--
27 | 1. 什么是指令？
28 | 指令就是Vue内部提供的一些自定义属性；
29 | 这些属性中封装好了Vue内部实现的一些功能；
30 | 只要使用这些指令就可以使用Vue中实现的这些功能；
31 | 
32 | 2. Vue数据绑定的特点
33 | 只要数据发生变化，界面就会跟着变化；
34 | 
35 | 3. v-once 指令
36 | 页面数据只渲染一次，不会跟着数据变化。
37 | 
38 | -->
39 | 


--------------------------------------------------------------------------------
/05-Vue指令v-cloak/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>05-Vue指令v-cloak</title>
 6 |     <style>
 7 |         [v-cloak] { display:none }
 8 |     </style>
 9 | </head>
10 | <body>
11 | <div id="app">
12 |   <h1>{{name}}</h1>
13 |   <h1 v-cloak>{{name}}</h1>
14 | </div>
15 | </body>
16 | <script src="js/vue.js"></script>
17 | <script>
18 |     /* 1. 创建 vue 实例对象 */
19 |     let vm = new Vue({
20 |         // 2. 声明vue的实例对象控制页面的哪个区域
21 |         el: '#app',
22 |         // 3. 声明vue控制区域可以使用的数据
23 |         data: {
24 |           name: 'zsy'
25 |         }
26 |     })
27 | </script>
28 | </html>
29 | <!--
30 | 1. Vue 数据绑定过程
31 | - 会先将未绑定数据的界面展示给用户；
32 | - 然后再根据模型中的数据和控制的区域生成绑定数据之后的 HTML 代码
33 | - 最后再将绑定数据之后的 HTML 渲染到界面上
34 | 
35 | 正是在最终的 HTML 被生成渲染之前会先显示模板内容，
36 | 所以如果用户网络比较慢或者网页性能较差时，用户会先看到模板内容。
37 | 
38 | 2. 如何解决这个问题？
39 | 利用 v-cloak 配合 [v-cloak] {display:none} 默认先隐藏未渲染的界面；
40 | 等到生成 HTML 渲染之后再重新显示
41 | 
42 | 3. v-cloak 指令作用：数据渲染之后自动显示元素
43 | -->
44 | 


--------------------------------------------------------------------------------
/06-Vue指令v-text-v-html/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>06-Vue指令v-text-v-html</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <!--  插值的方式：可以将指定的数据插入到指定的位置 -->
11 |   <h1>插值的方式: {{name}}  可以将指定的数据插入到指定的位置</h1>
12 |   <!--  插值的方式：不会解析 HTML 标签 -->
13 |   <h1>插值的方式: {{msg}}   不会解析 HTML 标签</h1>
14 | 
15 |   <!-- v-text 的方式：会覆盖原有的内容，不会解析 HTML 标签 -->
16 |   <h1 v-text="name">------</h1>
17 |   <h1 v-text="msg">------</h1>
18 | 
19 |   <!-- v-html 的方式：会覆盖原有的内容，会解析 HTML 标签 -->
20 |   <h1 v-html="name">------</h1>
21 |   <h1 v-html="msg">------</h1>
22 | </div>
23 | </body>
24 | <script>
25 |     /* 1. 创建 vue 实例对象 */
26 |     let vm = new Vue({
27 |         // 2. 声明vue的实例对象控制页面的哪个区域
28 |         el: '#app',
29 |         // 3. 声明vue控制区域可以使用的数据
30 |         data: {
31 |           name: 'zsy',
32 |           msg: '<span>This is span</span>'
33 |         }
34 |     })
35 | </script>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/07-Vue指令v-if/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>07-Vue指令v-if</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h3 v-if="1">我是true</h3>
11 |   <h3 v-if="false">我是false</h3>
12 | 
13 |   <h3 v-if="show">我是true</h3>
14 |   <h3 v-if="hidden">我是false</h3>
15 | 
16 |   <h3 v-if="age >= 18">我是true</h3>
17 |   <h3 v-if="age < 18">我是false</h3>
18 | 
19 |   <h3 v-if="age >= 18">我是成年人</h3>
20 |   <h3 v-else>我是未成年</h3>
21 | 
22 |   <h3 v-if="score >= 80">优秀</h3>
23 |   <h3 v-else-if="score >= 60">良好</h3>
24 |   <h3 v-else>一般</h3>
25 | </div>
26 | </body>
27 | <script>
28 |     /* 1. 创建 vue 实例对象 */
29 |     let vm = new Vue({
30 |         // 2. 声明vue的实例对象控制页面的哪个区域
31 |         el: '#app',
32 |         // 3. 声明vue控制区域可以使用的数据
33 |         data: {
34 |           show: true,
35 |           hidden: false,
36 |           age: 18,
37 |           score: 100
38 |         }
39 |     })
40 | </script>
41 | </html>
42 | <!--
43 | 1. v-if 指令
44 | 条件渲染：如果 v-if 取值是true就渲染元素，否则不渲染。
45 | 
46 | 2. v-if 特点
47 | 如果条件不满足根本不会创建这个元素（重点）
48 | 
49 | 3. v-if 注意点
50 | v-if 可以从模型中获取数据
51 | v-if 可以直接赋值一个表达式
52 | 
53 | 4. v-else 指令
54 | v-else 指令和 v-if 指令配合使用，当 v-if 不满足条件时渲染 v-else 中的元素内容
55 | 
56 | 5. v-else 注意点
57 | v-else 不能单独出现
58 | v-if 和 v-else 中间不能出现其他内容
59 | -->
60 | 


--------------------------------------------------------------------------------
/08-Vue指令v-show/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>08-Vue指令v-show</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h3 v-show="1">我是true</h3>
11 |   <h3 v-show="false">我是false</h3>
12 | 
13 |   <h3 v-show="show">我是true</h3>
14 |   <h3 v-show="hidden">我是false</h3>
15 | 
16 |   <h3 v-show="age >= 18">我是true</h3>
17 |   <h3 v-show="age < 18">我是false</h3>
18 | </div>
19 | </body>
20 | <script>
21 |     /* 1. 创建 vue 实例对象 */
22 |     let vm = new Vue({
23 |         // 2. 声明vue的实例对象控制页面的哪个区域
24 |         el: '#app',
25 |         // 3. 声明vue控制区域可以使用的数据
26 |         data: {
27 |           show: true,
28 |           hidden: false,
29 |           age: 18,
30 |           score: 100
31 |         }
32 |     })
33 | </script>
34 | </html>
35 | <!--
36 | 1. v-show指令
37 | v-show 和 v-if 一样都是条件渲染，取值为true就显示，false就不显示
38 | 
39 | 2. v-if 和 v-show 区别
40 | v-if：只要取值为false就不会创建元素；
41 | v-show：取值为false也会创建元素，只是如果取值为false会设置元素的display为none；
42 | 
43 | 3. v-if 和 v-show 应用场景
44 | 由于取值为false时 v-if 不会创建元素，所以如果需要切换元素的显示和隐藏，每次v-if 都会创建和删除元素；
45 | 由于取值为false时 v-show 会创建元素并设置display为none，所以切换元素显示和隐藏时不会重复创建和删除
46 | 所以：如果开发中需要频繁切换元素显示隐藏，那么推荐使用v-show，否则使用 v-if
47 | -->
48 | 


--------------------------------------------------------------------------------
/09-Vue指令v-for/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>09-Vue指令v-for</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <ul>
11 |     <li v-for="(value, index) in list"> {{index}} - {{value}}</li>
12 |   </ul>
13 | 
14 |   <ul>
15 |     <li v-for="(value, index) in string"> {{index}} - {{value}}</li>
16 |   </ul>
17 | 
18 |   <ul>
19 |     <li v-for="(value, index) in numbers"> {{index}} - {{value}}</li>
20 |   </ul>
21 | 
22 |   <ul>
23 |     <li v-for="(value, key) in object"> {{key}} - {{value}}</li>
24 |   </ul>
25 | </div>
26 | </body>
27 | <script>
28 |     /* 1. 创建 vue 实例对象 */
29 |     let vm = new Vue({
30 |         // 2. 声明vue的实例对象控制页面的哪个区域
31 |         el: '#app',
32 |         // 3. 声明vue控制区域可以使用的数据
33 |         data: {
34 |           list: ['zs', 'ls', 'ww', 'zl'],
35 |           string: 'zsy',
36 |           numbers: '12345',
37 |           object: {
38 |             name: 'zsy',
39 |             age: '18',
40 |             github: 'https://github.com/zsy0216'
41 |           }
42 |         }
43 |     })
44 | </script>
45 | </html>
46 | <!--
47 | 1. v-for 指令
48 | 相当于 JS 中的 for in 循环，可以根据数据多次渲染元素
49 | 
50 | 2. v-for 特点
51 | 可以遍历数组，字符，数字，对象
52 | -->
53 | 


--------------------------------------------------------------------------------
/10-Vue指令v-bind/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>10-Vue指令v-bind</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h1>{{name}}</h1>
11 |   <h1 v-text="name"></h1>
12 |   <input type="text" v-bind:value="name"/>
13 |   <input type="text" :value="name"/>
14 |   <input type="text" :value="name + 'test'"/>
15 | </div>
16 | </body>
17 | <script>
18 |     /* 1. 创建 vue 实例对象 */
19 |     let vm = new Vue({
20 |         // 2. 声明vue的实例对象控制页面的哪个区域
21 |         el: '#app',
22 |         // 3. 声明vue控制区域可以使用的数据
23 |         data: {
24 |             name: 'zsy'
25 |         }
26 |     })
27 | </script>
28 | </html>
29 | <!--
30 | 1. v-bind 指令
31 | 在开发中想要给"元素"绑定数据，我们可以使用{{}}，v-text，v-html
32 | 但是如果想要给"元素的属性"绑定数据，就必须使用 v-bind
33 | 所以 v-bind 的作用是专门用于给"元素的属性"绑定数据的
34 | 
35 | 2. v-bind 格式
36 | v-bind:属性名称="绑定的数据"
37 | :属性名称="绑定的数据"
38 | 
39 | 3. v-bind 特点
40 | 赋值的数据可以是任意一个合法的 JS 表达式
41 | 例如  :属性名称="age + 1"
42 | 
43 | 4. 注意点：
44 | v-model 也可以将数据绑定到元素的属性，但是只局限于input、textarea、select标签
45 | 而想要给其他标签的属性绑定数据，就需要用到 v-bind
46 | -->
47 | 


--------------------------------------------------------------------------------
/11-Vue指令绑定类名/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>11-Vue指令绑定类名</title>
 6 |     <script src="js/vue.js"></script>
 7 |     <style>
 8 |       *{
 9 |           margin: 0;
10 |           padding: 0;
11 |       }
12 |       .size {
13 |           font-size: 30px;
14 |       }
15 |       .color {
16 |           color: red;
17 |       }
18 |       .active {
19 |           background: skyblue;
20 |       }
21 |     </style>
22 | </head>
23 | <body>
24 | <div id="app">
25 |   <p class="size color active"> 这是段落 </p>
26 | 
27 |   <p :class="['size', 'color', 'active']"> 这是段落1: 通过数组绑定 class </p>
28 | 
29 |   <p :class="['size', 'color', flag ? 'active' : '']"> 这是段落2 通过三目运算符绑定 class </p>
30 | 
31 |   <p :class="['size', 'color', {'active' : false}]"> 这是段落3：通过对应绑定 class </p>
32 | 
33 |   <p :class="object"> 这是段落4: 通过实例中的对象来绑定 class </p>
34 | </div>
35 | </body>
36 | <script>
37 |     /* 1. 创建 vue 实例对象 VM */
38 |     let vm = new Vue({
39 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
40 |         el: '#app',
41 |         // 3. 声明vue控制区域可以使用的数据 Model
42 |         data: {
43 |           flag: false,
44 |           object: {
45 |             size: true,
46 |             color: true,
47 |             active: true
48 |           }
49 |         }
50 |     })
51 | </script>
52 | </html>
53 | <!--
54 | 1. v-bind 指令的作用
55 | v-bind指令给"任意标签"的"任意属性"绑定数据；
56 | 对于大部分的属性而言我们只需要直接赋值即可，例如 :value="name"
57 | 但是对于 class 和 type 属性而言，它的格式比较特殊
58 | 
59 | 2. 通过 v-bind 绑定类名格式
60 | :class="['需要绑定类名', ...]"
61 | 
62 | 3. 注意点：
63 | - 直接赋值一个类名(没有放到数组中) 默认回去model中查找
64 |   :class = "需要绑定类名"
65 |   如果需要通过 v-bind 给 class 绑定类名，不能直接赋值
66 |   默认情况下 v-bind 回去 Model 中查找数据，但是 Model 中没有对应的类名
67 | 
68 | - 想要 v-bind 去 style 中查找类名，那么必须把类名放到数组中,且用引号包裹起来
69 | 
70 | - 如果是通过 v-bind 绑定类名，那么在绑定的时候可以编写三目运算符来实现按需绑定
71 | 
72 | - v-bind 绑定类名， 可以通过对象决定是否需要绑定
73 |   格式：{'需要绑定类名' : 是否绑定}
74 | 
75 | - v-bind 绑定类名， 可以使用 Model中的对象来替换数组
76 |   格式：{'需要绑定类名' : 是否绑定}
77 | -->
78 | 


--------------------------------------------------------------------------------
/12-Vue指令绑定样式/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>12-Vue指令绑定样式</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <p :style="{color: 'red'}">这是段落1</p>
11 |   <p :style="object">这是段落2</p>
12 |   <p :style="[object, blueObj]">这是段落3</p>
13 | </div>
14 | </body>
15 | <script>
16 |     /* 1. 创建 vue 实例对象 VM */
17 |     let vm = new Vue({
18 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
19 |         el: '#app',
20 |         // 3. 声明vue控制区域可以使用的数据 Model
21 |         data: {
22 |           object:{
23 |             color: 'red',
24 |             'font-size': '30px'
25 |           },
26 |           blueObj: {
27 |             background: 'skyblue'
28 |           }
29 |         }
30 |     })
31 | </script>
32 | </html>
33 | <!--
34 | 1. 如何通过 v-bind 给 style 属性绑定数据
35 | - 将数据放到对象中
36 |   :style="{color: 'red', 'font-size': '50px'}"
37 | - 将数据放到Model对象中
38 |   object:{
39 |     color: 'red',
40 |     'font-size': '30px'
41 |   }
42 | 
43 | 2. 注意点：
44 | - 如果属性名称包含 "-", 那么必须用引号括起来
45 | - 如果需要绑定 Model 中的多个对象，可以放到一个数组中赋值
46 | 
47 | - 和绑定类名一样，默认情况下 v-model 会去 Model中查询数据，默认无数据则无效
48 |   要使用上面 1 的方式绑定
49 | -->
50 | 


--------------------------------------------------------------------------------
/13-Vue指令v-on/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>13-Vue指令v-on</title>
  6 |     <script src="js/vue.js"></script>
  7 |     <style>
  8 |       * {
  9 |           margin: 0;
 10 |           padding: 0;
 11 |       }
 12 |       .a {
 13 |           width: 300px;
 14 |           height: 300px;
 15 |           background: red;
 16 |       }
 17 |       .b {
 18 |           width: 200px;
 19 |           height: 200px;
 20 |           background: blue;
 21 |       }
 22 |       .c {
 23 |           width: 100px;
 24 |           height: 100px;
 25 |           background: green;
 26 |       }
 27 |     </style>
 28 | </head>
 29 | <body>
 30 | <div id="app">
 31 |     <button v-on:click="click">Button</button>
 32 |     <button @click="click">Button2</button>
 33 | 
 34 |     <button @click.once="click">事件修饰符 .once</button>
 35 |     <a href="https://github.com/zsy0216" @click.prevent="click">事件修饰符 .prevent</a>
 36 | 
 37 |     <!-- 默认情况下，嵌套的元素中如果都监听了相同的事件，那么会触发事件冒泡 -->
 38 |     <div class="a" @click="fn1">
 39 |       <div class="b" @click="fn2">
 40 |         <div class="c" @click.stop="fn3">事件修饰符 .stop</div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <!-- .self 只有当前元素的事件被触发时才会执行 -->
 45 |     <div class="a" @click="fn1">
 46 |       <div class="b" @click.self="fn2">
 47 |         <div class="c" @click="fn3">事件修饰符 .self</div>
 48 |       </div>
 49 |     </div>
 50 | 
 51 |     <!-- 默认情况下是事件冒泡，.capture可以转换成事件捕获 -->
 52 |     <div class="a" @click.capture="fn1">
 53 |       <div class="b" @click.capture="fn2">
 54 |         <div class="c" @click.capture="fn3">事件修饰符 .capture</div>
 55 |       </div>
 56 |     </div>
 57 | 
 58 |     按键修饰符：<input type="text" @keyup="handleKeyUp()" size="124%" value="其他特殊按键修饰符参考：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6"/>
 59 | </div>
 60 | </body>
 61 | <script>
 62 |     /* 1. 创建 vue 实例对象 VM */
 63 |     let vm = new Vue({
 64 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
 65 |         el: '#app',
 66 |         // 3. 声明vue控制区域可以使用的数据 Model
 67 |         data: {
 68 |         },
 69 |         methods: {
 70 |             click() {
 71 |                 alert("button clicked")
 72 |             },
 73 |             fn1() {
 74 |                 alert("红色")
 75 |             },
 76 |             fn2() {
 77 |                 alert("蓝色")
 78 |             },
 79 |             fn3() {
 80 |                 alert("绿色")
 81 |             },
 82 |             handleKeyUp(){
 83 |                 alert("按下了键盘")
 84 |             }
 85 |         }
 86 |     })
 87 | </script>
 88 | </html>
 89 | <!--
 90 | 1. v-on 指令
 91 | v-on 指令专门用于给元素绑定监听事件
 92 | 
 93 | 2. v-on 指令格式
 94 | - v-on:事件名称="回调函数名称"
 95 | - @事件名称="回调函数名称"
 96 | 
 97 | 3. v-on 注意点：
 98 | v-on 绑定的时间被触发之后，会去 Vue 实例对象的 methods 中查找对应的回调函数
 99 | 
100 | 4. v-on 修饰符
101 | 在事件中有很多东西需要我们处理，例如事件冒泡、事件捕获、阻止默认行为等
102 | 那么在Vue中如何处理这些内容呢？我们可以通过v-on修饰符来处理
103 | 
104 | 5. 常见修饰符
105 | .once    - 只触发一次回调
106 | .prevent - 调用 event.preventDefault() 阻止默认行为
107 | .stop    - 调用 event.stopPropagation() 阻止事件冒泡
108 | .self    - 只当事件是从侦听器绑定的元素本身触发时才触发回调
109 | .capture - 添加事件侦听器时使用 capture 模式
110 | 
111 | 6. v-on 使用注意事项
112 | - 绑定回调函数名称的时候，后面可以加() 也可以不加
113 | @click="function"
114 | @click="function()"
115 | 
116 | - 可以给绑定的回调函数传递参数
117 | @click="function('name', 'zsy')"
118 | - 也可以传递原生事件对象
119 | @click="function('name', 'zsy', $event)"
120 | 
121 | - 如果在绑定的函数中需要用到data中的数据必须加上this
122 | 
123 | 7. 按键修饰符
124 | 我们可以通过按键修饰符监听特定按键触发的事件
125 | 例如：可以监听当前事件是否是回车触发的，可以监听当前事件是否是ESC键触发的
126 | 
127 | 8. 按键修饰符分类
128 | 参考：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
129 | - 系统预定义修饰符
130 | - 自定义修饰符
131 | 
132 | -->
133 | 


--------------------------------------------------------------------------------
/14-Vue自定义全局指令/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>14-Vue自定义全局指令</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <!-- 自定义指令 v-red 使字体变为红色 -->
11 |     <p v-red>这是段落</p>
12 | 
13 |     <!-- 自定义指令 v-color 传参 -->
14 |     <p v-color="color">这是段落传递颜色参数</p>
15 | 
16 |     <!-- 自定义指令 v-focus 渲染之后被选中有光标 -->
17 |     <input type="text" v-focus/>
18 | </div>
19 | </body>
20 | <script>
21 |     /* 自定义指令 v-red */
22 |     Vue.directive('red', {
23 |       // el: 被绑定指令的元素
24 |       bind: function (el) {
25 |         el.style.color = 'red'
26 |       }
27 |     })
28 | 
29 |     /* 自定义指令 v-color */
30 |     Vue.directive('color', {
31 |       // el: 被绑定指令的元素
32 |       bind: function (el, binding) {
33 |         el.style.color = binding.value
34 |       }
35 |     })
36 | 
37 |     Vue.directive('focus', {
38 |       // el: 被绑定指令的元素
39 |       inserted: function (el) {
40 |         el.focus()
41 |       }
42 |     })
43 | 
44 |     /* 1. 创建 vue 实例对象 VM */
45 |     let vm = new Vue({
46 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
47 |         el: '#app',
48 |         // 3. 声明vue控制区域可以使用的数据 Model
49 |         data: {
50 |           color: 'blue'
51 |         },
52 |         methods: {
53 | 
54 |         }
55 |     })
56 | </script>
57 | </html>
58 | <!--
59 | 1. 自定义全局指令
60 | 在Vue中除了可以使用Vue内置的一些指令以外，我们还可以自定义指令
61 | https://cn.vuejs.org/v2/guide/custom-directive.html
62 | 
63 | 2. 自定义全局指令语法
64 | Vue.directive('自定义指令名称', {
65 |   声明周期名称: function (el) {
66 |     指令业务逻辑代码
67 |   }
68 | })
69 | 
70 | 3. 指令声明周期方法
71 | 自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行
72 | 例如：指令业务逻辑代码中没有用到元素事件，那么可以在bind阶段执行
73 | 例如：指令业务逻辑代码中用到了元素事件，那么就需要在inserted阶段执行
74 | 
75 | 4. 自定义指令注意点
76 | 使用时需要加上 v-，而自定义时不需要
77 | 
78 | - 指令可以在不同的生命周期阶段执行
79 | bind: 指令被绑定到元素上的时候执行
80 | inserted: 绑定指令的元素被添加到父元素上的时候调用
81 | 
82 | 5. 自定义指令参数
83 | 在使用官方指令的时候我们可以给指令传参
84 | 例如: v-model="name"
85 | 在我们自定义的指令中我们也可以传递参数
86 | 
87 | 6. 获取自定义指令传递的参数
88 | 在执行自定义指令对应的方法的时候，除了会传递el给我们，
89 | 还会传递一个对象，这个对象中就保存了指令传递过来的参数。
90 | 
91 | -->
92 | 


--------------------------------------------------------------------------------
/15-Vue自定义局部指令/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>15-Vue自定义局部指令</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app1">
10 |     <p v-style="'blue'">这是段落1 使用了全局指令</p>
11 | 
12 |     <p v-color="'blue'">这是段落1 使用了局部指令</p>
13 | </div>
14 | <div id="app2">
15 |     <p v-style="'red'">这是段落2 使用了全局指令</p>
16 | 
17 |     <p v-color="'red'">这是段落2 使用了局部指令</p>
18 | </div>
19 | </body>
20 | <script>
21 |     /* 自定义全局指令 v-style */
22 |     Vue.directive('style', {
23 |       // el: 被绑定指令的元素
24 |       bind: function (el, binding) {
25 |         el.style.color = binding.value
26 |       }
27 |     })
28 | 
29 |     /* 1. 创建 vue 实例对象 VM */
30 |     let vm1 = new Vue({
31 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
32 |         el: '#app1',
33 |         // 3. 声明vue控制区域可以使用的数据 Model
34 |         data: {
35 |         },
36 |         methods: {
37 | 
38 |         }
39 |     })
40 | 
41 |     let vm2 = new Vue({
42 |         // 2. 声明vue的实例对象控制页面的哪个区域 View
43 |         el: '#app2',
44 |         // 3. 声明vue控制区域可以使用的数据 Model
45 |         data: {
46 |         },
47 |         methods: {
48 |         },
49 |         directives: {
50 |             'color': {
51 |                 bind: function (el, binding) {
52 |                     el.style.color = binding.value
53 |                 }
54 |             }
55 |         }
56 |     })
57 | </script>
58 | </html>
59 | <!--
60 | 1. 自定义全局指令的特点
61 | 在任何一个 Vue 实例控制的区域都可以使用
62 | 
63 | 2. 自定义局部指令的特点
64 | 只能在自定义的那个 Vue 实例中使用
65 | 
66 | 3. 如何自定义局部指令
67 | 给创建Vue的实例中传递的对象添加
68 | key: 指令名称  value: 对象
69 | directives: {
70 |     'color': {
71 |         bind: function (el, binding) {
72 |             el.style.color = binding.value
73 |         }
74 |     }
75 | }
76 | -->
77 | 


--------------------------------------------------------------------------------
/16-Vue计算属性/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>16-Vue计算属性</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <p> {{name}} </p>
11 |     <p> {{age + 1}} </p>
12 |     <p> {{msg.split("").reverse().join("")}} </p>
13 |     <p> {{handleMsg}} </p>
14 | </div>
15 | </body>
16 | <script>
17 |     /* 1. 创建 vue 实例对象 */
18 |     let vm = new Vue({
19 |         // 2. 声明vue的实例对象控制页面的哪个区域
20 |         el: '#app',
21 |         // 3. 声明vue控制区域可以使用的数据
22 |         data: {
23 |             name: 'zsy',
24 |             age: 18,
25 |             msg: "6120ysz/moc.buhtig//:sptth"
26 |         },
27 |         // 定义计算属性
28 |         computed: {
29 |             handleMsg: function() {
30 |                 let res = this.msg.split("").reverse().join("");
31 |                 return res;
32 |             }
33 |         }
34 |     })
35 | </script>
36 | </html>
37 | <!--
38 | 1. 插值语法特点
39 | 可以在 {{}} 中编写合法的 JavaScript 表达式
40 | 
41 | 2. 在插值语法中编写 JavaScript 表达式缺点
42 | - 没有语法提示
43 | - 语句过于复杂不利于后期维护
44 | 
45 | 3. 如何解决？
46 | 对于任何复杂逻辑，你都应当使用计算属性
47 | 
48 | 4. 注意点：
49 | - 虽然在定义计算属性的时候是通过一个函数返回的数据，
50 |   但是在使用计算属性的时候不能在计算属性名称后面加上小括号，
51 |   因为他是一个属性不是一个函数(方法)
52 | -->
53 | 


--------------------------------------------------------------------------------
/17-Vue计算属性和函数/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>17-Vue计算属性和函数</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <p>通过计算属性处理：{{cptMsg}} </p>
11 |     <p>通过计算属性处理：{{cptMsg}} </p>
12 |     <p>通过计算属性处理：{{cptMsg}} </p>
13 |     <p>通过计算属性处理：{{cptTime}} 次 </p>
14 | 
15 |     <p>通过方法处理： {{fnMsg()}} </p>
16 |     <p>通过方法处理： {{fnMsg()}} </p>
17 |     <p>通过方法处理： {{fnMsg()}} </p>
18 |     <p>通过方法处理：{{fnTime}} 次 </p>
19 | </div>
20 | </body>
21 | <script>
22 |     /* 1. 创建 vue 实例对象 */
23 |     let vm = new Vue({
24 |         // 2. 声明vue的实例对象控制页面的哪个区域
25 |         el: '#app',
26 |         // 3. 声明vue控制区域可以使用的数据
27 |         data: {
28 |             name: 'zsy',
29 |             age: 18,
30 |             msg: "6120ysz/moc.buhtig//:sptth",
31 |             fnTime: 0,
32 |             cptTime: 0
33 |         },
34 |         methods: {
35 |             fnMsg() {
36 |                 this.fnTime++
37 |                 return this.msg.split("").reverse().join("");
38 |             }
39 |         },
40 |         // 定义计算属性
41 |         computed: {
42 |             cptMsg: function() {
43 |                 this.cptTime++
44 |                 let res = this.msg.split("").reverse().join("");
45 |                 return res;
46 |             }
47 |         }
48 |     })
49 | </script>
50 | </html>
51 | <!--
52 | 1. 通过函数和计算属性都能实现上面的需求，区别是什么？
53 | - 函数特点：每次调用都会执行
54 | - 计算属性特点：只要返回的结果没有发生变化，计算属性只会执行一次
55 | 
56 | 2. 计算属性的应用场景
57 | 由于计算属性会将返回的结果缓存起来，所以如果返回的数据不经常发生变化
58 | 那么使用使用计算属性的性能要比使用函数的性能高
59 | 
60 | -->
61 | 


--------------------------------------------------------------------------------
/18-Vue自定义全局过滤器/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>18-Vue自定义全局过滤器</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |     <!--  Vue会把name交给指定的过滤器处理之后，再把处理之后的结果插入元素  -->
11 |     <p>{{name | formatStr | formatStr2}}</p>
12 | </div>
13 | </body>
14 | <script>
15 |     <!--  自定义全局过滤器  -->
16 |     /*
17 |         参数1：过滤器名称
18 |         参数2：处理数据的函数
19 |         注意点：默认情况下处理数据的函数接收一个参数，就是当前要被处理的数据
20 |     * */
21 |     Vue.filter('formatStr', (value) => {
22 |         value = value.replace(/学院/g, '大学')
23 |         return value
24 |     });
25 | 
26 |     Vue.filter('formatStr2', (value) => {
27 |         value = value.replace(/大学/g, '幼儿园')
28 |         return value
29 |     });
30 | 
31 |     /* 1. 创建 vue 实例对象 */
32 |     let vm = new Vue({
33 |         // 2. 声明vue的实例对象控制页面的哪个区域
34 |         el: '#app',
35 |         // 3. 声明vue控制区域可以使用的数据
36 |         data: {
37 |             name: '北京学院, 南京学院, 东京学院'
38 |         }
39 |     })
40 | </script>
41 | </html>
42 | <!--
43 | 1. 过滤器
44 | 过滤器和函数和计算属性一样都是用来处理数据的
45 | 但是过滤器一般用于格式化插入的文本数据
46 | 
47 | 2. 如何自定义全局过滤器
48 | Vue.filter('过滤器名称', 过滤器处理函数(要处理的数据))
49 | 
50 | 3. 如何使用全局过滤器
51 | {{msg | 过滤器名称}}
52 | :value="msg | 过滤器名称"
53 | 
54 | 4. 注意点
55 | - 只能在插值语法和 v-bind 中使用
56 | - 过滤器可以连续使用
57 | 
58 | -->
59 | 


--------------------------------------------------------------------------------
/19-Vue自定义局部过滤器/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>19-Vue自定义局部过滤器</title>
 6 |     <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app1">
10 |     <!--  Vue会把name交给指定的过滤器处理之后，再把处理之后的结果插入元素  -->
11 |     <p>{{name | formatStr}}</p>
12 | </div>
13 | <div id="app2">
14 |     <p>{{name | formatStr}}</p>
15 | </div>
16 | </body>
17 | <script>
18 |     /* 1. 创建 vue 实例对象 */
19 |     let vm1 = new Vue({
20 |         // 2. 声明vue的实例对象控制页面的哪个区域
21 |         el: '#app1',
22 |         // 3. 声明vue控制区域可以使用的数据
23 |         data: {
24 |             name: '北京学院, 南京学院, 东京学院'
25 |         },
26 |         // 定义局部过滤器
27 |         filters: {
28 |             'formatStr': (value) => {
29 |                 return value.replace(/学院/g, "大学")
30 |             }
31 |         }
32 |     })
33 |     let vm2 = new Vue({
34 |         // 2. 声明vue的实例对象控制页面的哪个区域
35 |         el: '#app2',
36 |         // 3. 声明vue控制区域可以使用的数据
37 |         data: {
38 |             name: '北京学院, 南京学院, 东京学院'
39 |         }
40 |     })
41 | </script>
42 | </html>
43 | <!--
44 | 1. 自定义全局过滤器的特点
45 | 在任何一个Vue实例控制的区域都可以使用
46 | 
47 | 2. 自定义局部过滤器的特点
48 | 只能在自定义的那个Vue实例中使用
49 | 
50 | 3. 如何自定义一个局部指令
51 | 给创建 Vue 实例时传递的对象添加
52 | filters: {
53 |     // key: 过滤器名称
54 |     // value: 过滤器处理函数
55 |     'formatStr': function(value) {}
56 | }
57 | -->
58 | 


--------------------------------------------------------------------------------
/20-Vue过滤器练习-格式化时间/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>20-Vue过滤器练习-格式化时间</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <h2>{{ time | dateFormat("yyyy-MM-dd") }}</h2>
11 | </div>
12 | </body>
13 | <script>
14 |   /*
15 |   * 注意点：在使用过滤器的时候，可以在过滤器名称后面加上() 传递参数
16 |   * */
17 |   Vue.filter("dateFormat", function (value, format){
18 |     let date = new Date(value)
19 |     let year = date.getFullYear()
20 |     let month = date.getMonth() + 1 + ""
21 |     let day = date.getDay() + ""
22 |     let hour = date.getHours() + ""
23 |     let minute = date.getMinutes() + ""
24 |     let second = date.getSeconds() + ""
25 |     if (format && format === "yyyy-MM-dd"){
26 |       return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
27 |     }
28 |     return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`
29 |   })
30 | 
31 |   /* 1. 创建 vue 实例对象 */
32 |   let vm = new Vue({
33 |     // 2. 声明vue的实例对象控制页面的哪个区域
34 |     el: '#app',
35 |     // 3. 声明vue控制区域可以使用的数据
36 |     data: {
37 |       time: Date.now()
38 |     }
39 |   })
40 | </script>
41 | </html>
42 | <!--
43 | 1. 过滤器可以传递参数，在处理函数的第二个参数接收
44 | 
45 | 2. padStart(number, String) 方法接收两个参数，由字符串调用
46 |   当字符串的长度不足 第一个参数 的长度时，会在前面填充 第二个参数 的值
47 | -->
48 | 


--------------------------------------------------------------------------------
/21-Vue学生管理系统/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>21-Vue学生管理系统</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <style>
  8 |       * {
  9 |           margin: 0;
 10 |           padding: 0;
 11 |       }
 12 | 
 13 |       #app {
 14 |           width: 800px;
 15 |           margin: 50px auto;
 16 |       }
 17 | 
 18 |       table {
 19 |           width: 100%;
 20 |           background: #000;
 21 |       }
 22 | 
 23 |       table tr {
 24 |           background: #fff;
 25 |       }
 26 | 
 27 |       form {
 28 |           width: 100%;
 29 |           display: flex;
 30 |           justify-content: space-between;
 31 |       }
 32 |   </style>
 33 | </head>
 34 | <body>
 35 | <div id="app">
 36 |   <form v-show="isShow">
 37 |     <input type="text" placeholder="请输入序号" v-model="person.id"/>
 38 |     <input type="text" placeholder="请输入名称" v-model="person.name"/>
 39 |     <input type="text" placeholder="请输入分数" v-model="person.score"/>
 40 |     <input type="submit" @click.prevent="add" value="新增"/>
 41 |     <input type="submit" @click.prevent="query" value="查询"/>
 42 |   </form>
 43 |   <table>
 44 |     <tr>
 45 |       <th>序号</th>
 46 |       <th>姓名</th>
 47 |       <th>分数</th>
 48 |       <th>时间</th>
 49 |       <th>操作</th>
 50 |     </tr>
 51 |     <tr v-for="(person, index) in persons">
 52 |       <td><input type="text" v-model="person.id" :disabled="isDisabled"/></td>
 53 |       <td><input type="text" v-model="person.name" :disabled="isDisabled"/></td>
 54 |       <td><input type="text" v-model="person.score" :disabled="isDisabled"/></td>
 55 |       <td><input type="text" :value="person.time | dateFormat" disabled/></td>
 56 |       <td>
 57 |         <a href="#" @click.prevent="edit">编辑</a>
 58 |         <a href="#" @click.prevent="remove(index)">删除</a><br/>
 59 |         <a href="#" @click.prevent="toggle">更多操作</a>
 60 |       </td>
 61 |     </tr>
 62 |   </table>
 63 | </div>
 64 | </body>
 65 | <script>
 66 |   <!-- 日期格式化 过滤器 -->
 67 |   Vue.filter("dateFormat", function (value, format) {
 68 |     let date = new Date(value)
 69 |     let year = date.getFullYear()
 70 |     let month = date.getMonth() + 1 + ""
 71 |     let day = date.getDay() + ""
 72 |     let hour = date.getHours() + ""
 73 |     let minute = date.getMinutes() + ""
 74 |     let second = date.getSeconds() + ""
 75 |     if (format && format === "yyyy-MM-dd") {
 76 |       return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
 77 |     }
 78 |     return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`
 79 |   })
 80 | 
 81 |   /* 1. 创建 vue 实例对象 */
 82 |   let vm = new Vue({
 83 |     // 2. 声明vue的实例对象控制页面的哪个区域
 84 |     el: '#app',
 85 |     // 3. 声明vue控制区域可以使用的数据
 86 |     data: {
 87 |       isDisabled: true,
 88 |       isShow: false,
 89 |       persons: [{
 90 |         id: 1,
 91 |         name: "zs",
 92 |         score: "99",
 93 |         time: Date.now()
 94 |       }, {
 95 |         id: 2,
 96 |         name: "ls",
 97 |         score: "88",
 98 |         time: Date.now()
 99 |       }, {
100 |         id: 3,
101 |         name: "ww",
102 |         score: "88",
103 |         time: Date.now()
104 |       }],
105 |       person: {
106 |         id: "",
107 |         name: "",
108 |         score: ""
109 |       }
110 |     },
111 |     methods: {
112 |       edit() {
113 |         this.isDisabled = !this.isDisabled
114 |       },
115 |       toggle() {
116 |         this.isShow = !this.isShow
117 |       },
118 |       remove(index) {
119 |         this.persons.splice(index, 1)
120 |       },
121 |       add() {
122 |         this.person.time = Date.now()
123 |         this.persons.push(this.person)
124 |         this.person = {
125 |           id: "",
126 |           name: "",
127 |           score: ""
128 |         }
129 |       },
130 |       query() {
131 |         let search = this.persons.filter((person) => {
132 |           if (person.score === this.person.score) {
133 |             return true
134 |           }
135 |         })
136 |         this.persons = search
137 |       }
138 |     }
139 |   })
140 | </script>
141 | </html>
142 | 


--------------------------------------------------------------------------------
/22-Vue过渡动画/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>22-Vue过渡动画</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <style>
  8 |       .box {
  9 |           margin-top: 50px;
 10 |           width: 200px;
 11 |           height: 200px;
 12 |           background: #ff0000;
 13 |       }
 14 |       .v-enter {
 15 |           opacity: 0;
 16 |       }
 17 |       .v-enter-to {
 18 |           opacity: 1;
 19 |       }
 20 |       .v-enter-active {
 21 |           transition: all 3s;
 22 |       }
 23 |       .v-leave {
 24 |           opacity: 1;
 25 |       }
 26 |       .v-leave-to {
 27 |           opacity: 0;
 28 |       }
 29 |       .v-leave-active {
 30 |           transition: all 3s;
 31 |       }
 32 | 
 33 |       .new-enter {
 34 |           opacity: 0;
 35 |       }
 36 |       .new-enter-to {
 37 |           margin-left: 300px;
 38 |           opacity: 1;
 39 |       }
 40 |       .new-enter-active {
 41 |           transition: all 3s;
 42 |       }
 43 |       .new-leave {
 44 |           opacity: 1;
 45 |       }
 46 |       .new-leave-to {
 47 |           opacity: 0;
 48 |       }
 49 |       .new-leave-active {
 50 |           transition: all 1s;
 51 |       }
 52 |   </style>
 53 | </head>
 54 | <body>
 55 | <div id="app">
 56 |   <button @click="toggle">切换显示状态</button>
 57 |   <transition>
 58 |     <div class="box" v-show="isShow"></div>
 59 |   </transition>
 60 | 
 61 |   <transition appear name="new">
 62 |     <div class="box" v-show="isShow"></div>
 63 |   </transition>
 64 | </div>
 65 | </body>
 66 | <script>
 67 |   /* 1. 创建 vue 实例对象 */
 68 |   let vm = new Vue({
 69 |     // 2. 声明vue的实例对象控制页面的哪个区域
 70 |     el: '#app',
 71 |     // 3. 声明vue控制区域可以使用的数据
 72 |     data: {
 73 |       isShow: true
 74 |     },
 75 |     methods: {
 76 |       toggle() {
 77 |         this.isShow = !this.isShow
 78 |       }
 79 |     }
 80 |   })
 81 | </script>
 82 | </html>
 83 | <!--
 84 | 1. 如何给Vue控制的元素添加过渡动画
 85 | - 将需要执行动画的元素放到 transition 组件中；
 86 | - 当 transition 组件中的元素显示时会自动查找 .v-enter/.v-enter-active/.v-enter-to 类名
 87 |   当 transition 组件中的元素隐藏时会自动查找 .v-leave/.v-leave-active/.v-leave-to 类名
 88 | - 我们只需要在.v-enter 和 .v-leave-to 中指定动画开始的状态
 89 |            在.v-enter-active 和 .v-leave-active 中指定动画执行的状态
 90 |   即可完成动画
 91 | 
 92 | 2. transition 注意点
 93 | - 一个 transition 组件只能放一个元素，多个元素无效
 94 |   如果想给多个元素添加过渡动画，那么就必须创建多个 transition 组件
 95 | 
 96 | 3. 初始动画设置
 97 | 默认情况下第一次进入的时候是没有动画的，如果想一进来就有动画，
 98 | 我们可以通过给transition添加 appear 属性的方式告诉Vue 第一次进入显示动画
 99 | 
100 | 4. 如何给多个不同的元素指定不同的动画
101 | 如果有多个不同的元素需要执行不同的过渡动画，那么我们可以通过给transition指定name的方式来分别指定不同元素的动画效果。
102 | 不同name对应着不同的动画类名，通过不同的类名定义的样式来区分不同元素的动画
103 | .v-enter/.v-enter-active/.v-enter-to 类名对应 .name-enter/.name-enter-active/.name-enter-to
104 | .v-leave/.v-leave-active/.v-leave-to 类名对应 .name-leave/.name-leave-active/.name-leave-to
105 | -->
106 | 


--------------------------------------------------------------------------------
/23-Vue过渡动画-JS钩子/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>23-Vue过渡动画-JS钩子</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <style>
  8 |       .box {
  9 |           margin-top: 50px;
 10 |           width: 200px;
 11 |           height: 200px;
 12 |           background: #ff0000;
 13 |       }
 14 | 
 15 |   </style>
 16 | </head>
 17 | <body>
 18 | <div id="app">
 19 |   <button @click="toggle">切换显示状态</button>
 20 |   <!--
 21 |   注意点：虽然我们是通过JS钩子函数来实现过渡动画，但是Vue默认还是会去查找类名。
 22 |   为了不让Vue去查找类名，可以给transition添加 v-bind:css="false"
 23 |   -->
 24 |   <transition appear
 25 |               v-bind:css="false"
 26 |               v-on:before-enter="beforeEnter"
 27 |               v-on:enter="enter"
 28 |               v-on:after-enter="afterEnter">
 29 |     <div class="box" v-show="isShow"></div>
 30 |   </transition>
 31 | </div>
 32 | </body>
 33 | <script>
 34 |   /* 1. 创建 vue 实例对象 */
 35 |   let vm = new Vue({
 36 |     // 2. 声明vue的实例对象控制页面的哪个区域
 37 |     el: '#app',
 38 |     // 3. 声明vue控制区域可以使用的数据
 39 |     data: {
 40 |       isShow: true
 41 |     },
 42 |     methods: {
 43 |       toggle() {
 44 |         this.isShow = !this.isShow
 45 |       },
 46 |       // 第一个参数代表执行动画的元素
 47 |       beforeEnter(el) {
 48 |         // 进入动画之前
 49 |         el.style.opacity = "0"
 50 | 
 51 |       },
 52 |       // 第二个参数 done 回调函数说明动画指定完毕，不调用后面afterEnter不会执行
 53 |       enter(el, done) {
 54 |         // 进入动画过程中
 55 |         /*
 56 |         * 注意点：如果是通过JS钩子来实现过渡动画
 57 |         * 那么必须在动画执行过程中的钩子函数中添加上
 58 |         * el.offsetWidth 或 el.offsetHeight
 59 |         * */
 60 |         // el.offsetWidth
 61 |         el.offsetHeight
 62 |         el.style.transition = "all 3s"
 63 |         // done()
 64 |         /*
 65 |         * 注意点：如果想让元素一进来就有动画，除了设置appear外，最好延迟调用 done 回调函数
 66 |         * */
 67 |         setTimeout(() => {
 68 |           done()
 69 |         }, 0)
 70 |       },
 71 |       afterEnter(el) {
 72 |         // 进入动画执行完毕
 73 |         el.style.opacity = "1"
 74 |         el.style.marginLeft = "300px"
 75 |       }
 76 |     }
 77 |   })
 78 | </script>
 79 | </html>
 80 | <!--
 81 | 1. 上节过渡存在的问题
 82 | 通过transition+类名的方式确实能够实现过渡效果，但是实现的过渡效果并不能保存动画之后的状态，
 83 | 因为Vue内部的实现是在过程中动态绑定类名，过程完成之后删除类名，而因为删除了类名，动画则完成后消失。
 84 | 
 85 | 2. 在Vue中如何保存过渡动画最终的效果——通过Vue提供的JS钩子来实现过渡动画
 86 | v-on:before-enter="beforeEnter" 进入动画之前
 87 | v-on:enter="enter" 进入动画执行过程中
 88 | v-on:after-enter="afterEnter" 进入动画完成之后
 89 | v-on:enter-cancelled="enterCancelled" 进入动画被取消
 90 | 
 91 | v-on:before-leave="beforeLeave" 进入动画之前
 92 | v-on:leave="leave" 进入动画执行过程中
 93 | v-on:after-leave="afterLeave" 进入动画完成之后
 94 | v-on:leave-cancelled="leaveCancelled" 进入动画被取消
 95 | 
 96 | 3. JS钩子实现过渡动画注意点：
 97 | - 在动画过程中必须写上 el.offsetWidth 或 el.offsetHeight
 98 | - 在 enter 和 leave 方法中必须调用 done 回调函数，否则 after-enter 和 enter-leave不会执行
 99 | - 需要添加初始动画，那么需要把 done 方法包裹到 setTimeout 方法中调用
100 | -->
101 | 


--------------------------------------------------------------------------------
/24-Vue过渡动画-Velocity/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>24-Vue过渡动画-Velocity</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <style>
 8 |       .box {
 9 |           margin-top: 50px;
10 |           width: 200px;
11 |           height: 200px;
12 |           background: #ff0000;
13 |       }
14 |   </style>
15 | </head>
16 | <body>
17 | <div id="app">
18 |   <button @click="toggle">切换显示状态</button>
19 |   <transition appear
20 |               v-bind:css="false"
21 |               v-on:before-enter="beforeEnter"
22 |               v-on:enter="enter"
23 |               v-on:after-enter="afterEnter">
24 |     <div class="box" v-show="isShow"></div>
25 |   </transition>
26 | </div>
27 | </body>
28 | <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
29 | <script>
30 |   /* 1. 创建 vue 实例对象 */
31 |   let vm = new Vue({
32 |     // 2. 声明vue的实例对象控制页面的哪个区域
33 |     el: '#app',
34 |     // 3. 声明vue控制区域可以使用的数据
35 |     data: {
36 |       isShow: true
37 |     },
38 |     methods: {
39 |       toggle() {
40 |         this.isShow = !this.isShow
41 |       },
42 |       // 第一个参数代表执行动画的元素
43 |       beforeEnter(el) {
44 |         // 进入动画之前
45 |         el.style.opacity = "0"
46 | 
47 |       },
48 |       // 第二个参数 done 回调函数说明动画指定完毕，不调用后面afterEnter不会执行
49 |       enter(el, done) {
50 |         // 进入动画过程中
51 |         Velocity(el, {opacity: 1, marginLeft: "300px"}, 3000)
52 |         done()
53 |       },
54 |       afterEnter(el) {
55 |         // 进入动画执行完毕
56 |         el.style.opacity = "1"
57 |         el.style.marginLeft = "300px"
58 |       }
59 |     }
60 |   })
61 | </script>
62 | </html>
63 | <!--
64 | 使用 Velocity 实现过渡动画，在Vue中除了可以自己实现动画外，还可以结合第三方框架实现过渡动画
65 | 1. 导入 Velocity 库
66 | 2. 在动画指定过程钩子函数中编写 Velocity 动画
67 | -->
68 | 


--------------------------------------------------------------------------------
/25-Vue过渡动画-自定义类名/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>25-Vue过渡动画-自定义类名</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <style>
 8 |       .box {
 9 |           margin-top: 50px;
10 |           width: 200px;
11 |           height: 200px;
12 |           background: #ff0000;
13 |       }
14 | 
15 |       .enter-zsy {
16 |           opacity: 0;
17 |       }
18 | 
19 |       .enter-to-zsy {
20 |           opacity: 1;
21 |           margin-left: 500px;
22 |       }
23 | 
24 |       .enter-active-zsy {
25 |           transition: all 3s;
26 |       }
27 |   </style>
28 | </head>
29 | <body>
30 | <div id="app">
31 |   <button @click="toggle">切换显示状态</button>
32 |   <transition appear
33 |               enter-class="enter-zsy"
34 |               enter-active-class="enter-active-zsy"
35 |               enter-to-class="enter-to-zsy"
36 |   >
37 |     <div class="box" v-show="isShow"></div>
38 |   </transition>
39 |   >
40 | </div>
41 | </body>
42 | <script>
43 |   /* 1. 创建 vue 实例对象 */
44 |   let vm = new Vue({
45 |     // 2. 声明vue的实例对象控制页面的哪个区域
46 |     el: '#app',
47 |     // 3. 声明vue控制区域可以使用的数据
48 |     data: {
49 |       isShow: true
50 |     },
51 |     methods: {
52 |       toggle() {
53 |         this.isShow = !this.isShow
54 |       }
55 |     }
56 |   })
57 | </script>
58 | </html>
59 | <!--
60 | 1. 自定义类名动画
61 | 在Vue中，除了
62 |   - 可以使用默认类名(v-xxx)来指定过渡动画
63 |   - 可以使用自定义类名前缀(yy-xxx)来指定过渡动画(transition name = "yy")
64 |   - 可以使用JS钩子函数里指定过渡动画
65 |   之外
66 | 还可以使用自定义类名的方式来指定过渡动画
67 |   - 在 transition 设置 enter-class/enter-active-class/enter-to-class
68 |                       leave-class/leave-active-class/leave-to-class
69 |                       指定进入或离开三个过程对应的类名
70 | -->
71 | 


--------------------------------------------------------------------------------
/26-Vue过渡动画-Animate/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>26-Vue过渡动画-Animate</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <style>
 8 |       .box {
 9 |           margin-top: 50px;
10 |           width: 200px;
11 |           height: 200px;
12 |           background: #ff0000;
13 |       }
14 |   </style>
15 |   <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"/>
16 | </head>
17 | <body>
18 | <div id="app">
19 |   <button @click="toggle">切换显示状态</button>
20 |   <transition appear
21 |               enter-class=""
22 |               enter-active-class="animated bounceInRight"
23 |               enter-to-class=""
24 |   >
25 |     <div class="box" v-show="isShow"></div>
26 |   </transition>
27 | </div>
28 | </body>
29 | <script>
30 |   /* 1. 创建 vue 实例对象 */
31 |   let vm = new Vue({
32 |     // 2. 声明vue的实例对象控制页面的哪个区域
33 |     el: '#app',
34 |     // 3. 声明vue控制区域可以使用的数据
35 |     data: {
36 |       isShow: true
37 |     },
38 |     methods: {
39 |       toggle() {
40 |         this.isShow = !this.isShow
41 |       }
42 |     }
43 |   })
44 | </script>
45 | </html>
46 | <!--
47 | 1. 配合 Animate.css 实现过渡动画
48 | - 导入 Animate.css 库
49 | - 在执行过程中的属性 enter-active-class 上绑定需要的类名
50 | -->
51 | 


--------------------------------------------------------------------------------
/27-Vue-v-for-key/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>27-Vue-v-for-key</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <form>
11 |     <input type="text" v-model="name">
12 |     <input type="submit" @click.prevent="add" value="添加">
13 |   </form>
14 |   <ul>
15 |     <li v-for="(person, index) in persons" :key="person.id">
16 |       <input type="checkbox">
17 |       <span>{{index}} - {{person.name}}</span>
18 |     </li>
19 |   </ul>
20 | </div>
21 | </body>
22 | <script>
23 |   /* 1. 创建 vue 实例对象 */
24 |   let vm = new Vue({
25 |     // 2. 声明vue的实例对象控制页面的哪个区域
26 |     el: '#app',
27 |     // 3. 声明vue控制区域可以使用的数据
28 |     data: {
29 |       persons: [
30 |         {name: "zs", id: 1},
31 |         {name: "ls", id: 2},
32 |         {name: "ww", id: 3}
33 |       ],
34 |       name: ""
35 |     },
36 |     methods: {
37 |       add() {
38 |         let lastPerson = this.persons[this.persons.length - 1]
39 |         let newPerson = {name: this.name, id: lastPerson.id + 1}
40 |         // this.persons.push(newPerson)
41 |         this.persons.unshift(newPerson)
42 |         this.name = ""
43 |       }
44 |     }
45 |   })
46 | </script>
47 | </html>
48 | <!--
49 | v-for 注意点
50 | 1. v-for 为了提升性能，在更新已渲染过的元素列表时，会采用“就地复用”策略。也正是因为这个策略，在某些时刻会导致我们的数据混乱。
51 | 例如：在列表前面新增了内容
52 | 
53 | 2. 为了解决这个问题我们可以在渲染列表的时候给每一个元素加上一个独一无二的key
54 | v-for 在更新已经渲染的元素列表时，会先判断key是否相同，如果相同则复用，如果不同则重新创建
55 | 
56 | 3. key 属性注意点
57 | 不能使用index 作为key，因为当列表的内容新增或者删除时index都会发生变化，
58 | 这就导致了不能很好的复用没有发生改变的元素，大大降低了渲染的效率。
59 | -->
60 | 


--------------------------------------------------------------------------------
/28-Vue列表过渡/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>28-Vue列表过渡</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <style>
 8 |       .v-enter {
 9 |           opacity: 0;
10 |       }
11 | 
12 |       .v-enter-to {
13 |           opacity: 1;
14 |       }
15 | 
16 |       .v-enter-active {
17 |           transition: all 3s;
18 |       }
19 | 
20 |       .v-leave {
21 |           opacity: 1;
22 |       }
23 | 
24 |       .v-leave-to {
25 |           opacity: 0;
26 |       }
27 | 
28 |       .v-leave-active {
29 |           transition: all 3s;
30 |       }
31 |   </style>
32 | </head>
33 | <body>
34 | <div id="app">
35 |   <form>
36 |     <input type="text" v-model="name">
37 |     <input type="submit" @click.prevent="add" value="添加">
38 |   </form>
39 |   <transition-group appear tag="ul">
40 |     <li v-for="(person, index) in persons" :key="person.id" @click="del(index)">
41 |       <input type="checkbox">
42 |       <span>{{index}} - {{person.name}}</span>
43 |     </li>
44 |   </transition-group>
45 | </div>
46 | </body>
47 | <script>
48 |   /* 1. 创建 vue 实例对象 */
49 |   let vm = new Vue({
50 |     // 2. 声明vue的实例对象控制页面的哪个区域
51 |     el: '#app',
52 |     // 3. 声明vue控制区域可以使用的数据
53 |     data: {
54 |       persons: [
55 |         {name: "zs", id: 1},
56 |         {name: "ls", id: 2},
57 |         {name: "ww", id: 3}
58 |       ],
59 |       name: "",
60 |       id: 3
61 |     },
62 |     methods: {
63 |       add() {
64 |         this.id++
65 |         let lastPerson = this.persons[this.persons.length - 1]
66 |         let newPerson = {name: this.name, id: this.id}
67 |         // this.persons.push(newPerson)
68 |         this.persons.unshift(newPerson)
69 |         this.name = ""
70 |       },
71 |       del(index) {
72 |         this.persons.splice(index, 1)
73 |       }
74 |     }
75 |   })
76 | </script>
77 | </html>
78 | <!--
79 | 1. 如何同时给多个元素添加过渡动画
80 | - 通过 transition 可以给单个元素添加过渡动画，如果想给多个元素添加过渡，需要使用 transition-group
81 | - transition-group 和 transition 用法一致，只是一个给单元素，一个给多元素添加过渡动画
82 | 
83 | 2. transition-group 注意点：
84 | - 默认情况下 transition-group 会将动画的元素放到 span 标签中
85 | - 我们可以通过tag属性来指定将动画元素放到什么标签
86 | 
87 | 3. transition-group 动画混乱问题
88 | 一般情况下动画出现混乱都是因为v-for 的key 重复问题。需要保证 key 唯一
89 | -->
90 | 


--------------------------------------------------------------------------------
/29-Vue组件-自定义全局组件/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/29-Vue组件-自定义全局组件/images/bg.jpg


--------------------------------------------------------------------------------
/29-Vue组件-自定义全局组件/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/29-Vue组件-自定义全局组件/images/fm.jpg


--------------------------------------------------------------------------------
/29-Vue组件-自定义全局组件/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>29-Vue组件-自定义全局组件</title>
  6 |   <script src="js/vue.js"></script>
  7 | </head>
  8 | <body>
  9 | <div id="app">
 10 |   <!-- 3.3 使用注册好的组件 -->
 11 |   <component-extend></component-extend>
 12 | 
 13 |   <component-obj></component-obj>
 14 | 
 15 |   <component-script></component-script>
 16 | 
 17 |   <component-template></component-template>
 18 | </div>
 19 | </body>
 20 | <script id="info" type="text/html">
 21 |   <div>
 22 |     <img width="200px" src="images/fm.jpg"/>
 23 |     <p>this is a description.</p>
 24 |   </div>
 25 | </script>
 26 | 
 27 | <template id="main">
 28 |   <div>
 29 |     <img width="200px" src="images/bg.jpg"/>
 30 |     <p>this is a description.</p>
 31 |   </div>
 32 | </template>
 33 | <script>
 34 |   // 3.1 创建组件构造器
 35 |   let Profile = Vue.extend({
 36 |     // 组件模板只能有一个根元素
 37 |     template: `
 38 |       <div>
 39 |         <img width="200px" src="images/fm.jpg"/>
 40 |         <p>this is a description.</p>
 41 |       </div>`
 42 |   })
 43 |   /*
 44 |    * 3.2 注册已经创建好的组件
 45 |    * 第一个参数：指定注册的组件的名称
 46 |    * 第二个参数：传入已经创建好的组件构造器
 47 |    */
 48 |   Vue.component("component-extend", Profile)
 49 | 
 50 |   let obj = {
 51 |     // 组件模板只能有一个根元素
 52 |     template: `
 53 |       <div>
 54 |         <img width="200px" src="images/bg.jpg"/>
 55 |         <p>this is a description.</p>
 56 |       </div>`
 57 |   }
 58 |   // 这里会自动调用 extend 方法
 59 |   Vue.component("component-obj", obj)
 60 | 
 61 |   Vue.component("component-script", {
 62 |     template: '#info'
 63 |   })
 64 | 
 65 |   Vue.component("component-template", {
 66 |     template: '#main'
 67 |   })
 68 | 
 69 |   /* 1. 创建 vue 实例对象 */
 70 |   let vm = new Vue({
 71 |     // 2. 声明vue的实例对象控制页面的哪个区域
 72 |     el: '#app',
 73 |     // 3. 声明vue控制区域可以使用的数据
 74 |     data: {}
 75 |   })
 76 | </script>
 77 | </html>
 78 | <!--
 79 | Vue 两大核心：1.数据驱动界面改变 2.组件化
 80 | 
 81 | 1. 什么是组件？什么是组件化？
 82 | - 在前端开发中组件就是把一个很大的界面拆分为多个小的界面，每一个小的界面就是一个组件
 83 | - 将大界面拆分为小界面的过程就是组件化
 84 | 
 85 | 2. 组件化的好处
 86 | - 可以简化 Vue 实例的代码
 87 | - 可以提高复用性
 88 | 
 89 | 3. Vue中如何创建和使用组件？
 90 | - 3.1 创建组件构造器
 91 | - 3.2 注册已经创建好的组件
 92 | - 3.3 使用注册好的组件
 93 | 
 94 | 4. 创建组件简化
 95 | - 第一种
 96 | let Profile = Vue.extend({
 97 |   template: `
 98 |     <div>
 99 |       <img width="200px" src="images/fm.jpg"/>
100 |       <p>this is a description.</p>
101 |     </div>`
102 | })
103 | Vue.component("component-extend", Profile)
104 | 
105 | - 第二种，创建obj 或者将内容直接放入 Vue.component 第二个参数
106 | let obj = {
107 |   template: `
108 |     <div>
109 |       <img width="200px" src="images/bg.jpg"/>
110 |       <p>this is a description.</p>
111 |     </div>`
112 | }
113 | // 这里会自动调用 extend 方法
114 | Vue.component("component-obj", obj)
115 | 
116 | - 第三种 会有代码提示
117 | <script id="info" type="text/html">
118 |   <div>
119 |     <img width="200px" src="images/fm.jpg"/>
120 |     <p>this is a description.</p>
121 |   </div>
122 | </script>
123 | <script>
124 | Vue.component("component-script", {
125 |   template: '#info'
126 | })
127 | </script>
128 | 
129 | - 第四种
130 | <template id="main">
131 |   <div>
132 |     <img width="200px" src="images/bg.jpg"/>
133 |     <p>this is a description.</p>
134 |   </div>
135 | </template>
136 | <script>
137 | Vue.component("component-script", {
138 |   template: '#main'
139 | })
140 | </script>
141 | -->
142 | 


--------------------------------------------------------------------------------
/30-Vue组件-自定义局部组件/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/30-Vue组件-自定义局部组件/images/bg.jpg


--------------------------------------------------------------------------------
/30-Vue组件-自定义局部组件/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/30-Vue组件-自定义局部组件/images/fm.jpg


--------------------------------------------------------------------------------
/30-Vue组件-自定义局部组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>30-Vue组件-自定义局部组件</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app1">
10 |   <self-component></self-component>
11 |   <vm2-component></vm2-component>
12 | </div>
13 | <div id="app2">
14 |   <self-component></self-component>
15 |   <vm2-component></vm2-component>
16 | </div>
17 | </body>
18 | <template id="main">
19 |   <div>
20 |     <img width="200px" src="images/bg.jpg"/>
21 |     <p>这是全局组件.</p>
22 |   </div>
23 | </template>
24 | <template id="main2">
25 |   <div>
26 |     <img width="200px" src="images/fm.jpg"/>
27 |     <p>这是组件2的自定义局部组件.</p>
28 |   </div>
29 | </template>
30 | <script>
31 |   <!-- 自定义全局组件 -->
32 |   Vue.component("self-component", {
33 |     template: '#main'
34 |   })
35 | 
36 |   /* 1. 创建 vue 实例对象 */
37 |   let vm1 = new Vue({
38 |     // 2. 声明vue的实例对象控制页面的哪个区域
39 |     el: '#app1',
40 |     // 3. 声明vue控制区域可以使用的数据
41 |     data: {}
42 |   })
43 | 
44 |   let vm2 = new Vue({
45 |     // 2. 声明vue的实例对象控制页面的哪个区域
46 |     el: '#app2',
47 |     // 3. 声明vue控制区域可以使用的数据
48 |     data: {},
49 |     // 局部组件
50 |     components: {
51 |       'vm2-component': {
52 |         template: '#main2'
53 |       }
54 |     }
55 |   })
56 | </script>
57 | </html>
58 | <!--
59 | 1. 自定义全局组件特点
60 | 在任何一个Vue实例控制的区域中都可以使用
61 | 
62 | 2. 自定义局部组件特点
63 | 只能在自定义的那个Vue实例控制的区域中可以使用
64 | 
65 | 3. 如何自定义一个局部组件
66 | 在vue实例中新增component: {}
67 | 在{}中通过key-value的形式注册组件
68 | components: {
69 |   'vm2-component': {
70 |     template: '#main2'
71 |   }
72 | }
73 | -->
74 | 


--------------------------------------------------------------------------------
/31-Vue组件-data&methods/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/31-Vue组件-data&methods/images/bg.jpg


--------------------------------------------------------------------------------
/31-Vue组件-data&methods/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/31-Vue组件-data&methods/images/fm.jpg


--------------------------------------------------------------------------------
/31-Vue组件-data&methods/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>31-Vue组件-data&methods</title>
  6 |   <script src="js/vue.js"></script>
  7 | </head>
  8 | <body>
  9 | <div id="app">
 10 |   <!--
 11 |   在Vue实例控制的区域中使用的函数，系统会自动在Vue实例中查找有没有对应的方法
 12 |   -->
 13 |   <button @click="addBtn">Vue实例按钮</button>
 14 |   <p>{{app_data}}</p>
 15 | 
 16 |   <hr/>
 17 | 
 18 |   <self-component></self-component>
 19 | 
 20 |   <hr/>
 21 |   <component-add-data></component-add-data>
 22 |   <component-add-data></component-add-data>
 23 |   <component-add-data></component-add-data>
 24 | 
 25 | </div>
 26 | <template id="main">
 27 |   <div>
 28 |     <img width="200px" src="images/bg.jpg"/>
 29 |     <!--  在自定义组件中使用的函数，系统会在自定组件中查找有没有对应的方法  -->
 30 |     <button @click="selfAddBtn">自定义组件按钮</button>
 31 |     <p>{{self_data}} </p>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <template id="add-data">
 36 |   <div>
 37 |     <button @click="addNumber">累加</button>
 38 |     <p>{{number}} </p>
 39 |   </div>
 40 | </template>
 41 | </body>
 42 | <script>
 43 |   <!-- 自定义全局组件 -->
 44 |   Vue.component("self-component", {
 45 |     template: '#main',
 46 |     // 一个组件的 data 选项必须是一个函数
 47 |     data() {
 48 |       return {
 49 |         self_data: "自定义组件 data"
 50 |       }
 51 |     },
 52 |     methods: {
 53 |       selfAddBtn() {
 54 |         alert("自定义组件中的按钮点击")
 55 |       }
 56 |     }
 57 |   })
 58 | 
 59 |   Vue.component("component-add-data", {
 60 |     template: '#add-data',
 61 |     /*
 62 |      * 一个组件的 data 选项必须是一个函数
 63 |      * 否则多个组件会共用一份数据，导致数据混乱
 64 |      */
 65 |     data() {
 66 |       return {
 67 |         number: 0
 68 |       }
 69 |     },
 70 |     methods: {
 71 |       addNumber() {
 72 |         this.number++
 73 |       }
 74 |     }
 75 |   })
 76 | 
 77 |   /* 1. 创建 vue 实例对象 */
 78 |   let vm1 = new Vue({
 79 |     // 2. 声明vue的实例对象控制页面的哪个区域
 80 |     el: '#app',
 81 |     // 3. 声明vue控制区域可以使用的数据
 82 |     data: {
 83 |       app_data: "Vue 实例 data"
 84 |     },
 85 |     methods: {
 86 |       addBtn() {
 87 |         alert("Vue 实例的按钮点击")
 88 |       }
 89 |     }
 90 |   })
 91 | </script>
 92 | </html>
 93 | <!--
 94 | 1. 自定义组件中的data和methods
 95 | Vue实例控制的区域相当于一个大的组件，在大组件中我们可以使用data和methods
 96 | 而我们自定义的组件也属于组件，在自定义组件中也可以使用data和methods
 97 | 
 98 | 2. 自定义组件data注意点
 99 | 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
100 | 
101 | 3. 自定义组件的data为什么是一个函数
102 | 因为组件可以被复用，为了保证复用时每个组件的数据都是独立的，所以必须是一个函数
103 | -->
104 | 


--------------------------------------------------------------------------------
/32-Vue组件-组件切换/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/32-Vue组件-组件切换/images/bg.jpg


--------------------------------------------------------------------------------
/32-Vue组件-组件切换/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/32-Vue组件-组件切换/images/fm.jpg


--------------------------------------------------------------------------------
/32-Vue组件-组件切换/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>32-Vue组件-组件切换</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <button @click="toggle">元素切换</button>
11 |   <p v-if="isShow">首页</p>
12 |   <img v-else width="200px" src="images/bg.jpg"/>
13 | 
14 |   <hr/>
15 | 
16 |   <button @click="photoToggle">组件切换</button>
17 |   <photo v-if="photoShow"></photo>
18 |   <home v-else></home>
19 | </div>
20 | <template id="home">
21 |   <div>
22 |     <p>组件首页 </p>
23 |   </div>
24 | </template>
25 | <template id="photo">
26 |   <img width="200px" src="images/bg.jpg"/>
27 | </template>
28 | </body>
29 | <script>
30 |   <!-- 自定义全局组件 -->
31 |   Vue.component("home", {
32 |     template: '#home'
33 |   })
34 | 
35 |   Vue.component("photo", {
36 |     template: '#photo'
37 |   })
38 | 
39 |   /* 1. 创建 vue 实例对象 */
40 |   let vm1 = new Vue({
41 |     // 2. 声明vue的实例对象控制页面的哪个区域
42 |     el: '#app',
43 |     // 3. 声明vue控制区域可以使用的数据
44 |     data() {
45 |       return {
46 |         isShow: true,
47 |         photoShow: false
48 |       }
49 |     },
50 |     methods: {
51 |       toggle() {
52 |         this.isShow = !this.isShow
53 |       },
54 |       photoToggle() {
55 |         this.photoShow = !this.photoShow
56 |       }
57 |     }
58 |   })
59 | </script>
60 | </html>
61 | <!--
62 | 1. 组件切换
63 | 对于普通的元素我们可以通过v-if来实现切换，对于组件同样如此。
64 | 因为组件的本质就是一个自定义元素
65 | -->
66 | 


--------------------------------------------------------------------------------
/33-Vue组件-动态组件/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/33-Vue组件-动态组件/images/bg.jpg


--------------------------------------------------------------------------------
/33-Vue组件-动态组件/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/33-Vue组件-动态组件/images/fm.jpg


--------------------------------------------------------------------------------
/33-Vue组件-动态组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>33-Vue组件-动态组件</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <button @click="toggle">组件切换</button>
11 |   <keep-alive>
12 |     <component v-bind:is="name"></component>
13 |   </keep-alive>
14 | </div>
15 | <template id="home">
16 |   <div>
17 |     <p>组件首页 </p>
18 |     <input type="checkbox"/>
19 |   </div>
20 | </template>
21 | <template id="photo">
22 |   <img width="200px" src="images/bg.jpg"/>
23 | </template>
24 | </body>
25 | <script>
26 |   <!-- 自定义全局组件 -->
27 |   Vue.component("home", {
28 |     template: '#home'
29 |   })
30 | 
31 |   Vue.component("photo", {
32 |     template: '#photo'
33 |   })
34 | 
35 |   /* 1. 创建 vue 实例对象 */
36 |   let vm1 = new Vue({
37 |     // 2. 声明vue的实例对象控制页面的哪个区域
38 |     el: '#app',
39 |     // 3. 声明vue控制区域可以使用的数据
40 |     data() {
41 |       return {
42 |         isShow: true,
43 |         name: 'home'
44 |       }
45 |     },
46 |     methods: {
47 |       toggle() {
48 |         this.isShow = !this.isShow
49 |         this.name = this.name === 'home' ? 'photo' : 'home'
50 |       }
51 |     }
52 |   })
53 | </script>
54 | </html>
55 | <!--
56 | 1. 什么是动态组件
57 | 通过v-if/v-else-if/v-else确实能够切换组件，但是在Vue中切换组件还有一种更专业的方式
58 | <component v-bind:is="需要显示的组件名称"></component>
59 | component 我们称之为动态组件，也就是可以动态指定要显示的组件
60 | 
61 | 2. 为什么需要动态组件？组件隐藏之前状态如何保存？
62 | 因为 component 可以配合 keep-alive 来保存被隐藏组件隐藏之前的状态
63 | v-if 每次隐藏后显示都是重新创建
64 | -->
65 | 


--------------------------------------------------------------------------------
/34-Vue组件-组件动画/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/34-Vue组件-组件动画/images/bg.jpg


--------------------------------------------------------------------------------
/34-Vue组件-组件动画/images/fm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/34-Vue组件-组件动画/images/fm.jpg


--------------------------------------------------------------------------------
/34-Vue组件-组件动画/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>34-Vue组件-组件动画</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <style>
 8 |       .v-enter {
 9 |           opacity: 0;
10 |           margin-left: 500px;
11 |       }
12 |       .v-enter-to {
13 |           opacity: 1;
14 |       }
15 |       .v-enter-active {
16 |           transition: all 3s;
17 |       }
18 |       .v-leave {
19 |           opacity: 1;
20 |       }
21 |       .v-leave-to {
22 |           opacity: 0;
23 |       }
24 |       .v-leave-active {
25 |           transition: all 3s;
26 |           margin-left: 500px;
27 |       }
28 |   </style>
29 | </head>
30 | <body>
31 | <div id="app">
32 |   <button @click="toggle">组件切换</button>
33 |   <transition mode="out-in">
34 |     <component v-bind:is="name"></component>
35 |   </transition>
36 | </div>
37 | <template id="home">
38 |   <div>
39 |     <p>组件首页 </p>
40 |     <input type="checkbox"/>
41 |   </div>
42 | </template>
43 | <template id="photo">
44 |   <img width="200px" src="images/bg.jpg"/>
45 | </template>
46 | </body>
47 | <script>
48 |   <!-- 自定义全局组件 -->
49 |   Vue.component("home", {
50 |     template: '#home'
51 |   })
52 | 
53 |   Vue.component("photo", {
54 |     template: '#photo'
55 |   })
56 | 
57 |   /* 1. 创建 vue 实例对象 */
58 |   let vm1 = new Vue({
59 |     // 2. 声明vue的实例对象控制页面的哪个区域
60 |     el: '#app',
61 |     // 3. 声明vue控制区域可以使用的数据
62 |     data() {
63 |       return {
64 |         isShow: true,
65 |         name: 'home'
66 |       }
67 |     },
68 |     methods: {
69 |       toggle() {
70 |         this.isShow = !this.isShow
71 |         this.name = this.name === 'home' ? 'photo' : 'home'
72 |       }
73 |     }
74 |   })
75 | </script>
76 | </html>
77 | <!--
78 | 1. 如何给组件添加动画？
79 | 给组件添加动画和给元素添加过渡一样，如果是单个组件就是用transition 多个用 transition-group
80 | 
81 | 2. 过渡动画注意点
82 | 默认情况下，进入动画和离开动画是同时进行的，如果想一个完成后再进行另一个，需要制定过渡模式
83 | <transition mode="out-in">
84 | - in-out 新元素先进行过渡，完成之后当前元素过渡离开
85 | - out-in 当前元素先进行过渡，完成之后新元素过渡进入
86 | -->
87 | 


--------------------------------------------------------------------------------
/35-Vue组件-父子组件/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>35-Vue组件-父子组件</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <home></home>
11 |   <father></father>
12 | </div>
13 | <template id="home">
14 |   <div>
15 |     <p> 局部组件 </p>
16 |   </div>
17 | </template>
18 | 
19 | <template id="father">
20 |   <div>
21 |     <p> 父组件 </p>
22 |     <!--  子组件只能在定义它的父组件中使用  -->
23 |     <son></son>
24 |   </div>
25 | </template>
26 | 
27 | <template id="son">
28 |   <div>
29 |     <p> 子组件 </p>
30 |   </div>
31 | </template>
32 | </body>
33 | <script>
34 |   Vue.component("father", {
35 |     template: "#father",
36 |     components: {
37 |       'son': {
38 |         template: '#son'
39 |       }
40 |     }
41 |   })
42 | 
43 |   /* 1. 创建 vue 实例对象 */
44 |   let vm1 = new Vue({
45 |     // 2. 声明vue的实例对象控制页面的哪个区域
46 |     el: '#app',
47 |     // 3. 声明vue控制区域可以使用的数据
48 |     data() {
49 |       return {}
50 |     },
51 |     methods: {},
52 |     components: {
53 |       'home': {
54 |         template: '#home'
55 |       }
56 |     }
57 |   })
58 | </script>
59 | </html>
60 | <!--
61 | 1. 什么是父子组件？
62 | 在一个组件中又定义了其他组件就是父子组件。
63 | 其实局部组件就是最简单的父子组件，因为我们说过可以把Vue实例看成一个大组件
64 | 我们在Vue实例中定义了局部组件，就相当于在大组件里面定义了小组件。
65 | 
66 | 2. 如何定义其他的父子组件？
67 | 前面我们说过，自定义组件中可以使用data和methods，当然自定义组件中也可以使用components
68 | 所以，我们也可以在自定义组件中再定义其他组件
69 | -->
70 | 


--------------------------------------------------------------------------------
/36-Vue组件-父子组件数据传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>36-Vue组件-父子组件数据传递</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <p> 父组件 - {{ name }} </p>
16 |     <p> 父组件 - {{ age }} </p>
17 |     <!--  子组件只能在定义它的父组件中使用  -->
18 |     <son :father_name="name" :father_age="age"></son>
19 |   </div>
20 | </template>
21 | 
22 | <template id="son">
23 |   <div>
24 |     <p> 子组件 - {{father_name}}</p>
25 |     <p> 子组件 - {{father_age}}</p>
26 |   </div>
27 | </template>
28 | </body>
29 | <script>
30 |   Vue.component("father", {
31 |     template: "#father",
32 |     data() {
33 |       return {
34 |         name: 'zs',
35 |         age: 18
36 |       }
37 |     },
38 |     components: {
39 |       'son': {
40 |         template: '#son',
41 |         props: ['father_name', 'father_age']
42 |       }
43 |     }
44 |   })
45 | 
46 |   /* 1. 创建 vue 实例对象 */
47 |   let vm1 = new Vue({
48 |     // 2. 声明vue的实例对象控制页面的哪个区域
49 |     el: '#app',
50 |     // 3. 声明vue控制区域可以使用的数据
51 |     data() {
52 |       return {}
53 |     },
54 |     methods: {}
55 |   })
56 | </script>
57 | </html>
58 | <!--
59 | 1. 父子组件数据传递
60 | 在Vue中子组件是不能访问父组件的数据的，如果要访问父组件中的数据，必须通过父组件传递
61 | 
62 | 2. 父组件如何传递数据
63 | - 在父组件中通过 v-bind 传递数据，传递格式 v-bind:自定义接收名称 = '要传递的数据'
64 | 
65 | 3. 子组件如何接收数据
66 | - 子组件通过定义 props 属性接收数据，接收格式 props:['自定义接收名称']
67 | 
68 | 4. 自我补充：自定义接收名称时不要使用 -
69 |    '-' 两边的字符会无法识别
70 | Property or method "father" is not defined on the instance but referenced during render
71 | -->`
72 | 


--------------------------------------------------------------------------------
/37-Vue组件-父子组件方法传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>37-Vue组件-父子组件方法传递</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <button @click="say">父组件按钮</button>
16 |     <son @father_say="say"></son>
17 |   </div>
18 | </template>
19 | 
20 | <template id="son">
21 |   <div>
22 |     <button @click="say">子组件按钮</button>
23 |   </div>
24 | </template>
25 | </body>
26 | <script>
27 |   Vue.component("father", {
28 |     template: "#father",
29 |     methods: {
30 |       say() {
31 |         alert('父组件的方法')
32 |       }
33 |     },
34 |     components: {
35 |       'son': {
36 |         template: '#son',
37 |         methods: {
38 |           // 子组件自定义方法通过 this.$emit('father_say') 调用父组件方法
39 |           say() {
40 |             alert('子组件方法')
41 |             this.$emit('father_say')
42 |           }
43 |         }
44 |       }
45 |     }
46 |   })
47 | 
48 |   /* 1. 创建 vue 实例对象 */
49 |   let vm1 = new Vue({
50 |     // 2. 声明vue的实例对象控制页面的哪个区域
51 |     el: '#app',
52 |     // 3. 声明vue控制区域可以使用的数据
53 |     data() {
54 |       return {}
55 |     },
56 |     methods: {}
57 |   })
58 | </script>
59 | </html>
60 | <!--
61 | 1. 父子组件方法传递
62 | 在Vue中子组件是不能访问父组件的方法的，如果想调用父组件的方法，必须通过父组件传递
63 | 
64 | 2. 父组件如何传递方法
65 | - 在父组件中通过 v-on 传递方法，传递格式 v-on:自定义接收方法名 = '要传递的方法'
66 | 
67 | 3. 子组件如何接收方法
68 | - 在子组件中自定义一个方法，在自定义方法中通过 this.$emit('自定义接收方法名') 调用传递过来的方法
69 | -->
70 | 


--------------------------------------------------------------------------------
/38-Vue组件-子父组件数据传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>38-Vue组件-子父组件数据传递</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <button @click="say">父组件按钮</button>
16 |     <son @father_say="say"></son>
17 |   </div>
18 | </template>
19 | 
20 | <template id="son">
21 |   <div>
22 |     <button @click="say">子组件按钮</button>
23 |   </div>
24 | </template>
25 | </body>
26 | <script>
27 |   Vue.component("father", {
28 |     template: "#father",
29 |     methods: {
30 |       say(data) {
31 |         alert('父组件的方法 - ' + data)
32 |       }
33 |     },
34 |     components: {
35 |       'son': {
36 |         template: '#son',
37 |         data() {
38 |           return{}
39 |         },
40 |         methods: {
41 |           /*
42 |            * 子组件自定义方法通过 this.$emit('father_say') 调用父组件方法
43 |            * 第一个参数：自定义的调用父组件方法的接收方法名
44 |            * 后面的参数：传递给父组件方法的参数列表
45 |            */
46 |           say() {
47 |             alert('子组件方法 - 下面调用父组件方法')
48 |             this.$emit('father_say', '子组件数据')
49 |           }
50 |         }
51 |       }
52 |     }
53 |   })
54 | 
55 |   /* 1. 创建 vue 实例对象 */
56 |   let vm1 = new Vue({
57 |     // 2. 声明vue的实例对象控制页面的哪个区域
58 |     el: '#app',
59 |     // 3. 声明vue控制区域可以使用的数据
60 |     data() {
61 |       return {}
62 |     },
63 |     methods: {}
64 |   })
65 | </script>
66 | </html>
67 | <!--
68 | 1. 如何将子组件数据传递给父组件
69 | 前面说到，子组件可以调用父组件传递过来的方法，那么我们可以在调用父组件方法的时候给方法传递参数
70 | 子组件传递给父组件方法的参数，就是子组件传递给父组件的数据
71 | 
72 | 子组件自定义方法通过 this.$emit('father_say', '子组件数据') 调用父组件方法
73 | 第一个参数：自定义的调用父组件方法的接收方法名
74 | 后面的参数：传递给父组件方法的参数列表
75 | -->
76 | 


--------------------------------------------------------------------------------
/39-Vue组件-组件命名/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>39-Vue组件-组件命名</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father-component></father-component>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <button @click="say">父组件按钮</button>
16 |     <son @parent-say="say" :parent-name="name"></son>
17 |   </div>
18 | </template>
19 | 
20 | <template id="son">
21 |   <div>
22 |     <p>子组件 - {{parentName}}</p>
23 |     <button @click="say">子组件按钮</button>
24 |   </div>
25 | </template>
26 | </body>
27 | <script>
28 |   Vue.component("fatherComponent", {
29 |     template: "#father",
30 |     data() {
31 |       return {
32 |         name: 'zhangsan'
33 |       }
34 |     },
35 |     methods: {
36 |       say() {
37 |         alert('父组件的方法')
38 |       }
39 |     },
40 |     components: {
41 |       'son': {
42 |         template: '#son',
43 |         props: ['parentName']
44 |         ,
45 |         methods: {
46 |           say() {
47 |             alert('子组件方法 - 下面调用父组件方法')
48 |             this.$emit('parent-say')
49 |           }
50 |         }
51 |       }
52 |     }
53 |   })
54 | 
55 |   /* 1. 创建 vue 实例对象 */
56 |   let vm1 = new Vue({
57 |     // 2. 声明vue的实例对象控制页面的哪个区域
58 |     el: '#app',
59 |     // 3. 声明vue控制区域可以使用的数据
60 |     data() {
61 |       return {}
62 |     },
63 |     methods: {}
64 |   })
65 | </script>
66 | </html>
67 | <!--
68 | 1. 组件命名的注意点 (在Vue标签中使用带短横线，在js代码中是驼峰命名)
69 | - 注册组件的时候使用的 '驼峰命名'，那么在使用时需要转换成 '短横线分隔命名'
70 |   例如：注册时 -> fatherComponent  使用时 -> father-component
71 | 
72 | - 在传递参数的时候如果想使用 '驼峰命名'，那么就必须写 '短横线分隔命名'
73 |   例如：传递时 -> :parent-name = 'name'  接收时 -> props: ['parentName']
74 | 
75 | - 在传递方法的时候不能使用 '驼峰命名'，只能用 '短横线分隔命名'
76 |   @parent-say = 'say'  -> this.$emit('parent-say')
77 | -->
78 | 


--------------------------------------------------------------------------------
/40-Vue组件-数据方法多级传递/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>40-Vue组件-数据方法多级传递</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <grandfather></grandfather>
11 | </div>
12 | 
13 | <template id="grandfather">
14 |   <div>
15 |     <p>grandfather - {{name}}</p>
16 |     <button @click="say">祖组件按钮</button>
17 |     <hr>
18 |     <father :gfname="name" @gfsay="say"></father>
19 |   </div>
20 | </template>
21 | 
22 | <template id="father">
23 |   <div>
24 |     <p>father - {{gfname}}</p>
25 |     <button @click="fatherFn">父组件按钮</button>
26 |     <hr>
27 |     <son :fname="gfname" @fsay="fatherFn"></son>
28 |   </div>
29 | </template>
30 | 
31 | <template id="son">
32 |   <div>
33 |     <p>son - {{fname}}</p>
34 |     <button @click="sonFn">子组件按钮</button>
35 |   </div>
36 | </template>
37 | </body>
38 | <script>
39 |   // 爷爷组件
40 |   Vue.component("grandfather", {
41 |     template: "#grandfather",
42 |     data() {
43 |       return {
44 |         name: 'zhangsan'
45 |       }
46 |     },
47 |     methods: {
48 |       say() {
49 |         alert("grandfather - say")
50 |       }
51 |     },
52 |     // 爸爸组件
53 |     components: {
54 |       'father': {
55 |         template: '#father',
56 |         props: ['gfname'],
57 |         methods: {
58 |           fatherFn() {
59 |             this.$emit('gfsay')
60 |           }
61 |         },
62 |         // 儿子组件
63 |         components: {
64 |           'son': {
65 |             template: '#son',
66 |             props: ['fname'],
67 |             methods: {
68 |               sonFn() {
69 |                 this.$emit('fsay')
70 |               }
71 |             }
72 |           }
73 |         }
74 |       }
75 |     }
76 |   })
77 | 
78 |   /* 1. 创建 vue 实例对象 */
79 |   let vm1 = new Vue({
80 |     // 2. 声明vue的实例对象控制页面的哪个区域
81 |     el: '#app',
82 |     // 3. 声明vue控制区域可以使用的数据
83 |     data() {
84 |       return {}
85 |     },
86 |     methods: {}
87 |   })
88 | </script>
89 | </html>
90 | <!--
91 | 1. 数据和方法的多级传递
92 | 在Vue多级组件中，数据和方法的传递时，必须一级一级的向下传递
93 | 
94 | -->
95 | 


--------------------------------------------------------------------------------
/41-Vue组件-匿名插槽/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>41-Vue组件-匿名插槽</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <!-- 需求：在使用子组件的时候，给子组件中动态添加一些内容 -->
16 |     <son>
17 |       <!--
18 |        默认情况下是不能在使用子组件的时候，给子组件动态添加内容的
19 |        如果想给子组件动态添加内容，那么就必须使用插槽
20 |        -->
21 |       <h1>这是向插槽中添加的内容1</h1>
22 |       <h1>这是向插槽中添加的内容2</h1>
23 |       <h1>这是向插槽中添加的内容3</h1>
24 |     </son>
25 |   </div>
26 | </template>
27 | 
28 | <template id="son">
29 |   <div>
30 |     <h1>this is 头部</h1>
31 |     <slot>默认插槽数据</slot>
32 |     <slot>默认插槽数据</slot>
33 | 
34 |     <h1>this is 底部</h1>
35 |   </div>
36 | </template>
37 | </body>
38 | <script>
39 |   Vue.component("father", {
40 |     template: "#father",
41 |     data() {
42 |       return {}
43 |     },
44 |     components: {
45 |       'son': {
46 |         template: '#son'
47 |       }
48 |     }
49 |   })
50 | 
51 |   /* 1. 创建 vue 实例对象 */
52 |   let vm1 = new Vue({
53 |     // 2. 声明vue的实例对象控制页面的哪个区域
54 |     el: '#app',
55 |     // 3. 声明vue控制区域可以使用的数据
56 |     data() {
57 |       return {}
58 |     },
59 |     methods: {}
60 |   })
61 | </script>
62 | </html>
63 | <!--
64 | 1. 什么是插槽？
65 | Vue中使用 slot 标签代表一个插槽，插槽中可以被替换为任何模板代码，包括html
66 | 
67 | 2. 为什么要使用插槽？
68 | 默认情况下是不能在使用子组件的时候给子组件动态添加内容的，如果想给子组件动态添加内容，那么就必须使用插槽。
69 | <son> XXX <son/> 像这样直接在使用组件标签时向里面添加内容是不被允许的。
70 | 
71 | <template id="son">
72 | <div>
73 | <slot><slot/>
74 | <div/>
75 | <template>
76 | 在组件中定义插槽后，再向组件标签中添加内容时，添加的内容会将插槽标签替换掉。
77 | 
78 | 3. 匿名插槽
79 | 插槽是可以指定名称的，如果没有指定名称，那么称之为匿名插槽
80 | 匿名插槽的特点：有多少个匿名插槽，填充的数据就会被拷贝几份，一般只写一个匿名插槽
81 | 
82 | 注意点：
83 | 插槽可以指定默认数据，如果使用者没有填充值，就会使用默认数据
84 | -->
85 | 


--------------------------------------------------------------------------------
/42-Vue组件-具名插槽/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>42-Vue组件-具名插槽</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <!-- 需求：在使用子组件的时候，给子组件中动态添加一些内容 -->
16 |     <son>
17 |       <!--
18 |        默认情况下是不能在使用子组件的时候，给子组件动态添加内容的
19 |        如果想给子组件动态添加内容，那么就必须使用插槽
20 |        -->
21 |       <h1 slot="one">这是替换插槽1的内容1</h1>
22 |       <h1 slot="one">这是替换插槽1的内容2</h1>
23 |       <h1 slot="two">这是替换插槽2的内容1</h1>
24 |       <h1 slot="two">这是替换插槽2的内容2</h1>
25 |     </son>
26 |   </div>
27 | </template>
28 | 
29 | <template id="son">
30 |   <div>
31 |     <h1>this is 头部</h1>
32 | 
33 |     <slot name="one">默认插槽数据</slot>
34 |     <slot name="two">默认插槽数据</slot>
35 | 
36 |     <h1>this is 底部</h1>
37 |   </div>
38 | </template>
39 | </body>
40 | <script>
41 |   Vue.component("father", {
42 |     template: "#father",
43 |     data() {
44 |       return {}
45 |     },
46 |     components: {
47 |       'son': {
48 |         template: '#son'
49 |       }
50 |     }
51 |   })
52 | 
53 |   /* 1. 创建 vue 实例对象 */
54 |   let vm1 = new Vue({
55 |     // 2. 声明vue的实例对象控制页面的哪个区域
56 |     el: '#app',
57 |     // 3. 声明vue控制区域可以使用的数据
58 |     data() {
59 |       return {}
60 |     },
61 |     methods: {}
62 |   })
63 | </script>
64 | </html>
65 | <!--
66 | 1. 什么是具名插槽
67 | 默认情况下有多少个匿名插槽，我们填充的数据就会被拷贝多少份，这导致了所有插槽内填充的内容都是一样的
68 | 那么如果我们想给不同的插槽填充不同的内容，就需要使用具名插槽。
69 | 
70 | 2. 具名插槽使用
71 | 通过插槽的name属性给插槽指定名称
72 | 在使用时可以通过slot='name' 方式，指定当前内容用于替换哪一个插槽
73 | 
74 | 注意点：
75 | - 如果没有指定要替换哪个插槽中的内容，则不会被替换
76 | - slot 属性在 Vue2.6 之后被废弃，Vue2.6 之后使用 v-slot 指令替代 slot 属性
77 | -->
78 | 


--------------------------------------------------------------------------------
/43-Vue组件-v-slot指令/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>43-Vue组件-v-slot指令</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <!-- 需求：在使用子组件的时候，给子组件中动态添加一些内容 -->
16 |     <son>
17 |       <template v-slot:one>
18 |         <h1>这是替换插槽1的内容1</h1>
19 |         <h1>这是替换插槽1的内容2</h1>
20 |       </template>
21 |       <template #two>
22 |         <h1>这是替换插槽2的内容1</h1>
23 |         <h1>这是替换插槽2的内容2</h1>
24 |       </template>
25 |     </son>
26 |   </div>
27 | </template>
28 | 
29 | <template id="son">
30 |   <div>
31 |     <h1>this is 头部</h1>
32 | 
33 |     <slot name="one">默认插槽数据</slot>
34 |     <slot name="two">默认插槽数据</slot>
35 | 
36 |     <h1>this is 底部</h1>
37 |   </div>
38 | </template>
39 | </body>
40 | <script>
41 |   Vue.component("father", {
42 |     template: "#father",
43 |     data() {
44 |       return {}
45 |     },
46 |     components: {
47 |       'son': {
48 |         template: '#son'
49 |       }
50 |     }
51 |   })
52 | 
53 |   /* 1. 创建 vue 实例对象 */
54 |   let vm1 = new Vue({
55 |     // 2. 声明vue的实例对象控制页面的哪个区域
56 |     el: '#app',
57 |     // 3. 声明vue控制区域可以使用的数据
58 |     data() {
59 |       return {}
60 |     },
61 |     methods: {}
62 |   })
63 | </script>
64 | </html>
65 | <!--
66 | 1. 什么是 v-slot 指令？
67 | v-slot 指令是 vue2.6 中用于替代 slot 属性的一个指令
68 | 在 Vue 2.6 之前我们通过 slot 属性告诉 Vue 当前内容填充到哪一个具名插槽
69 | 在 Vue 2.6 之后我们通过 v-slot 指令告诉 Vue 当前内容填充到哪一个具名插槽
70 | 
71 | 2. 注意点
72 | v-slot 指令只能用在 template 标签上，可以使用 # 号代替 v-slot:
73 | <template v-slot:one>
74 | <template #two>
75 | -->
76 | 


--------------------------------------------------------------------------------
/44-Vue组件-作用域插槽/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>44-Vue组件-作用域插槽</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <father></father>
11 | </div>
12 | 
13 | <template id="father">
14 |   <div>
15 |     <son>
16 |       <!-- slot-scope="abc" 接收子组件插槽暴露的数据 -->
17 |       <template v-slot:default="abc">
18 |         <div>匿名插槽插槽暴露的数据 - {{abc.names}}</div>
19 |         <li v-for="name in abc.names">{{name}}</li>
20 |       </template>
21 | 
22 |       <template #test="abc">
23 |         <div>具名插槽插槽暴露的数据 - {{abc.names}}</div>
24 |         <li v-for="name in abc.names">{{name}}</li>
25 |       </template>
26 |     </son>
27 |   </div>
28 | </template>
29 | 
30 | <template id="son">
31 |   <div>
32 |     <h1>this is 头部 -- {{names}}</h1>
33 | 
34 |     <!-- :names="names" 将子组件中的names数据暴露给父组件 -->
35 |     <slot :names="names">匿名插槽数据 - {{names}}</slot>
36 | 
37 |     <slot name="test" :names="names">默认插槽数据 - {{names}}</slot>
38 | 
39 |     <h1>this is 底部</h1>
40 |   </div>
41 | </template>
42 | </body>
43 | <script>
44 |   Vue.component("father", {
45 |     template: "#father",
46 |     data() {
47 |       return {}
48 |     },
49 |     components: {
50 |       'son': {
51 |         template: '#son',
52 |         data() {
53 |           return {
54 |             names: ['zs', 'ls', 'ww', 'zl']
55 |           }
56 |         }
57 |       }
58 |     }
59 |   })
60 | 
61 |   /* 1. 创建 vue 实例对象 */
62 |   let vm1 = new Vue({
63 |     // 2. 声明vue的实例对象控制页面的哪个区域
64 |     el: '#app',
65 |     // 3. 声明vue控制区域可以使用的数据
66 |     data() {
67 |       return {}
68 |     },
69 |     methods: {}
70 |   })
71 | </script>
72 | </html>
73 | <!--
74 | 1. 什么是作用域插槽？
75 | 作用域插槽就是带数据的插槽，就是让父组件在填充子组件插槽内容时也能使用子组件的数据
76 | 
77 | 2. 如何使用作用域插槽
78 | - 在 slot 中通过 v-bind:数据名称='数据名称' 的方式暴露数据
79 | - 在父组件中通过 <template slot-scope='作用域名称'> 接收数据
80 | - 在父组件的 <template></template> 中通过 作用域名称.数据名称 方式使用数据
81 | 
82 | 3. Vue 2.6 v-slot 指令
83 | 对于作用域插槽，v-slot 指令替换了 slot-scope
84 | 也就是说，我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中。
85 | 还可以通过 v-slot 指令告诉 Vue 如何接收作用域插槽暴露的数据
86 | 
87 | 使用方法
88 | v-slot:插槽名称='作用域名称'
89 | 
90 | 3. 作用域插槽的应用场景
91 | 子组件提供数据，父组件决定如何渲染
92 | -->
93 | 


--------------------------------------------------------------------------------
/45-Vue组件-数据传递练习/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>45-Vue组件-数据传递练习</title>
  6 |   <script src="js/vue.js"></script>
  7 | </head>
  8 | <body>
  9 | <div id="app">
 10 |   <father></father>
 11 | </div>
 12 | 
 13 | <template id="father">
 14 |   <div>
 15 |     <son1 @parent-change="change"></son1>
 16 |     <hr>
 17 |     <son2 :parent-num="num"></son2>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <template id="son1">
 22 |   <div>
 23 |     <!-- 需求：在第一个子组件中添加两个按钮和一个输入框，通过按钮控制输入框数据增减 -->
 24 |     <button @click="add"> +1</button>
 25 |     <input type="text" :value="count">
 26 |     <button @click="sub"> -1</button>
 27 |   </div>
 28 | </template>
 29 | <template id="son2">
 30 |   <div>
 31 |     <!-- 需求：在第二个子组件展示第一个子组件中的数据 -->
 32 |     <input type="text" :value="parentNum" disabled>
 33 |   </div>
 34 | </template>
 35 | </body>
 36 | <script>
 37 |   Vue.component("father", {
 38 |     template: "#father",
 39 |     data() {
 40 |       return {
 41 |         num: 0
 42 |       }
 43 |     },
 44 |     methods: {
 45 |       change(newCount) {
 46 |         this.num = newCount
 47 |       }
 48 |     },
 49 |     components: {
 50 |       'son1': {
 51 |         template: '#son1',
 52 |         data() {
 53 |           return {
 54 |             count: 0
 55 |           }
 56 |         },
 57 |         methods: {
 58 |           add() {
 59 |             this.count++
 60 |             this.$emit('parent-change', this.count)
 61 |           },
 62 |           sub() {
 63 |             this.count--
 64 |             this.$emit('parent-change', this.count)
 65 |           }
 66 |         }
 67 |       },
 68 |       'son2': {
 69 |         template: '#son2',
 70 |         props: ['parentNum']
 71 |       }
 72 |     }
 73 |   })
 74 | 
 75 |   /* 1. 创建 vue 实例对象 */
 76 |   let vm1 = new Vue({
 77 |     // 2. 声明vue的实例对象控制页面的哪个区域
 78 |     el: '#app',
 79 |     // 3. 声明vue控制区域可以使用的数据
 80 |     data() {
 81 |       return {}
 82 |     },
 83 |     methods: {}
 84 |   })
 85 | </script>
 86 | </html>
 87 | <!--
 88 | 1.
 89 | - 子组件要使用父组件的数据，必须通过父组件传递
 90 | - 子组件要使用祖组件的数据，必须一层一层的传递
 91 | - 兄弟组件之间要互相使用数据，必须借助父组件传递
 92 | 
 93 | 2. 如何实现子组件数据和父组件数据同步
 94 | - 父组件给子组件传递一个方法
 95 | - 子组件修改数据，调用父组件传递的方法，将修改的数据作为参数传递给父组件
 96 | - 在父组件方法中利用参数保存最新的数据
 97 | 
 98 | 3. 父组件再传递第一个子组件的数据给第二个子组件
 99 | 
100 | 4. 这种借助父组件传递数据的方式，非常复杂，不推荐
101 | 为了解决多层组件或兄弟组件之间数据传递问题，可以使用Vuex解决
102 | -->
103 | 


--------------------------------------------------------------------------------
/46-Vuex-共享数据基本使用/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>46-Vue组件-Vuex</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <script src="js/vuex.js"></script>
 8 | </head>
 9 | <body>
10 | <div id="app">
11 |   <grandfather></grandfather>
12 | </div>
13 | 
14 | <template id="grandfather">
15 |   <div>
16 |     <p>祖组件 - {{ this.$store.state.msg }}</p>
17 |     <father></father>
18 |   </div>
19 | </template>
20 | <template id="father">
21 |   <div>
22 |     <p>父组件 - {{ this.$store.state.msg }}</p>
23 |     <son></son>
24 |   </div>
25 | </template>
26 | 
27 | <template id="son">
28 |   <div>
29 |     <p>子组件 - {{ this.$store.state.msg }}</p>
30 |   </div>
31 | </template>
32 | </body>
33 | <script>
34 |   // Vuex 对象
35 |   const store = new Vuex.Store({
36 |     // state 相当于组件中的 data 用于保存共享数据
37 |     state: {
38 |       msg: 'this is vuex msg.'
39 |     }
40 |   })
41 | 
42 |   Vue.component("grandfather", {
43 |     template: "#grandfather",
44 |     store: store,
45 |     components: {
46 |       'father': {
47 |         template: '#father',
48 |         components: {
49 |           'son': {
50 |             template: '#son',
51 |           }
52 |         }
53 |       }
54 |     }
55 |   })
56 | 
57 |   /* 1. 创建 vue 实例对象 */
58 |   let vm1 = new Vue({
59 |     // 2. 声明vue的实例对象控制页面的哪个区域
60 |     el: '#app',
61 |     // 3. 声明vue控制区域可以使用的数据
62 |     data() {
63 |       return {}
64 |     },
65 |     methods: {}
66 |   })
67 | </script>
68 | </html>
69 | <!--
70 | 1. 什么是Vuex
71 | Vuex 是 Vue 配套的公共数据管理工具，我们可以将共享的数据保存到 Vuex 中
72 | 方便整个程序中的任何组件都可以获取和修改 Vuex 中保存的公共数据
73 | 
74 | 2. 在祖组件中添加 store 保存 Vuex 对象，则祖组件、父组件和子组件都可以使用共享数据了
75 | 
76 | 3. 使用方式： this.$store.state.msg
77 | -->
78 | 


--------------------------------------------------------------------------------
/46-Vuex-共享数据基本使用/js/vuex.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * vuex v2.0.0
  3 |  * (c) 2016 Evan You
  4 |  * @license MIT
  5 |  */
  6 | (function (global, factory) {
  7 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8 |   typeof define === 'function' && define.amd ? define(factory) :
  9 |   (global.Vuex = factory());
 10 | }(this, (function () { 'use strict';
 11 | 
 12 | var devtoolHook =
 13 |   typeof window !== 'undefined' &&
 14 |   window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 15 | 
 16 | function devtoolPlugin (store) {
 17 |   if (!devtoolHook) { return }
 18 | 
 19 |   store._devtoolHook = devtoolHook
 20 | 
 21 |   devtoolHook.emit('vuex:init', store)
 22 | 
 23 |   devtoolHook.on('vuex:travel-to-state', function (targetState) {
 24 |     store.replaceState(targetState)
 25 |   })
 26 | 
 27 |   store.subscribe(function (mutation, state) {
 28 |     devtoolHook.emit('vuex:mutation', mutation, state)
 29 |   })
 30 | }
 31 | 
 32 | function applyMixin (Vue) {
 33 |   var version = Number(Vue.version.split('.')[0])
 34 | 
 35 |   if (version >= 2) {
 36 |     var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
 37 |     Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
 38 |   } else {
 39 |     // override init and inject vuex init procedure
 40 |     // for 1.x backwards compatibility.
 41 |     var _init = Vue.prototype._init
 42 |     Vue.prototype._init = function (options) {
 43 |       if ( options === void 0 ) options = {};
 44 | 
 45 |       options.init = options.init
 46 |         ? [vuexInit].concat(options.init)
 47 |         : vuexInit
 48 |       _init.call(this, options)
 49 |     }
 50 |   }
 51 | 
 52 |   /**
 53 |    * Vuex init hook, injected into each instances init hooks list.
 54 |    */
 55 | 
 56 |   function vuexInit () {
 57 |     var options = this.$options
 58 |     // store injection
 59 |     if (options.store) {
 60 |       this.$store = options.store
 61 |     } else if (options.parent && options.parent.$store) {
 62 |       this.$store = options.parent.$store
 63 |     }
 64 |   }
 65 | }
 66 | 
 67 | function mapState (states) {
 68 |   var res = {}
 69 |   normalizeMap(states).forEach(function (ref) {
 70 |     var key = ref.key;
 71 |     var val = ref.val;
 72 | 
 73 |     res[key] = function mappedState () {
 74 |       return typeof val === 'function'
 75 |         ? val.call(this, this.$store.state, this.$store.getters)
 76 |         : this.$store.state[val]
 77 |     }
 78 |   })
 79 |   return res
 80 | }
 81 | 
 82 | function mapMutations (mutations) {
 83 |   var res = {}
 84 |   normalizeMap(mutations).forEach(function (ref) {
 85 |     var key = ref.key;
 86 |     var val = ref.val;
 87 | 
 88 |     res[key] = function mappedMutation () {
 89 |       var args = [], len = arguments.length;
 90 |       while ( len-- ) args[ len ] = arguments[ len ];
 91 | 
 92 |       return this.$store.commit.apply(this.$store, [val].concat(args))
 93 |     }
 94 |   })
 95 |   return res
 96 | }
 97 | 
 98 | function mapGetters (getters) {
 99 |   var res = {}
100 |   normalizeMap(getters).forEach(function (ref) {
101 |     var key = ref.key;
102 |     var val = ref.val;
103 | 
104 |     res[key] = function mappedGetter () {
105 |       if (!(val in this.$store.getters)) {
106 |         console.error(("[vuex] unknown getter: " + val))
107 |       }
108 |       return this.$store.getters[val]
109 |     }
110 |   })
111 |   return res
112 | }
113 | 
114 | function mapActions (actions) {
115 |   var res = {}
116 |   normalizeMap(actions).forEach(function (ref) {
117 |     var key = ref.key;
118 |     var val = ref.val;
119 | 
120 |     res[key] = function mappedAction () {
121 |       var args = [], len = arguments.length;
122 |       while ( len-- ) args[ len ] = arguments[ len ];
123 | 
124 |       return this.$store.dispatch.apply(this.$store, [val].concat(args))
125 |     }
126 |   })
127 |   return res
128 | }
129 | 
130 | function normalizeMap (map) {
131 |   return Array.isArray(map)
132 |     ? map.map(function (key) { return ({ key: key, val: key }); })
133 |     : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
134 | }
135 | 
136 | function isObject (obj) {
137 |   return obj !== null && typeof obj === 'object'
138 | }
139 | 
140 | function isPromise (val) {
141 |   return val && typeof val.then === 'function'
142 | }
143 | 
144 | function assert (condition, msg) {
145 |   if (!condition) { throw new Error(("[vuex] " + msg)) }
146 | }
147 | 
148 | var Vue // bind on install
149 | 
150 | var Store = function Store (options) {
151 |   var this$1 = this;
152 |   if ( options === void 0 ) options = {};
153 | 
154 |   assert(Vue, "must call Vue.use(Vuex) before creating a store instance.")
155 |   assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.")
156 | 
157 |   var state = options.state; if ( state === void 0 ) state = {};
158 |   var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
159 |   var strict = options.strict; if ( strict === void 0 ) strict = false;
160 | 
161 |   // store internal state
162 |   this._options = options
163 |   this._committing = false
164 |   this._actions = Object.create(null)
165 |   this._mutations = Object.create(null)
166 |   this._wrappedGetters = Object.create(null)
167 |   this._runtimeModules = Object.create(null)
168 |   this._subscribers = []
169 |   this._watcherVM = new Vue()
170 | 
171 |     // bind commit and dispatch to self
172 |   var store = this
173 |   var ref = this;
174 |   var dispatch = ref.dispatch;
175 |   var commit = ref.commit;
176 |   this.dispatch = function boundDispatch (type, payload) {
177 |     return dispatch.call(store, type, payload)
178 |     }
179 |     this.commit = function boundCommit (type, payload, options) {
180 |     return commit.call(store, type, payload, options)
181 |   }
182 | 
183 |   // strict mode
184 |   this.strict = strict
185 | 
186 |   // init root module.
187 |   // this also recursively registers all sub-modules
188 |   // and collects all module getters inside this._wrappedGetters
189 |   installModule(this, state, [], options)
190 | 
191 |   // initialize the store vm, which is responsible for the reactivity
192 |   // (also registers _wrappedGetters as computed properties)
193 |   resetStoreVM(this, state)
194 | 
195 |   // apply plugins
196 |   plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); })
197 | };
198 | 
199 | var prototypeAccessors = { state: {} };
200 | 
201 | prototypeAccessors.state.get = function () {
202 |   return this._vm.state
203 | };
204 | 
205 | prototypeAccessors.state.set = function (v) {
206 |   assert(false, "Use store.replaceState() to explicit replace store state.")
207 | };
208 | 
209 | Store.prototype.commit = function commit (type, payload, options) {
210 |     var this$1 = this;
211 | 
212 |   // check object-style commit
213 |   if (isObject(type) && type.type) {
214 |     options = payload
215 |     payload = type
216 |     type = type.type
217 |   }
218 |   var mutation = { type: type, payload: payload }
219 |   var entry = this._mutations[type]
220 |   if (!entry) {
221 |     console.error(("[vuex] unknown mutation type: " + type))
222 |     return
223 |   }
224 |   this._withCommit(function () {
225 |     entry.forEach(function commitIterator (handler) {
226 |       handler(payload)
227 |     })
228 |   })
229 |   if (!options || !options.silent) {
230 |     this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); })
231 |   }
232 | };
233 | 
234 | Store.prototype.dispatch = function dispatch (type, payload) {
235 |   // check object-style dispatch
236 |   if (isObject(type) && type.type) {
237 |     payload = type
238 |     type = type.type
239 |   }
240 |   var entry = this._actions[type]
241 |   if (!entry) {
242 |     console.error(("[vuex] unknown action type: " + type))
243 |     return
244 |   }
245 |   return entry.length > 1
246 |     ? Promise.all(entry.map(function (handler) { return handler(payload); }))
247 |     : entry[0](payload)
248 | };
249 | 
250 | Store.prototype.subscribe = function subscribe (fn) {
251 |   var subs = this._subscribers
252 |   if (subs.indexOf(fn) < 0) {
253 |     subs.push(fn)
254 |   }
255 |   return function () {
256 |     var i = subs.indexOf(fn)
257 |     if (i > -1) {
258 |       subs.splice(i, 1)
259 |     }
260 |   }
261 | };
262 | 
263 | Store.prototype.watch = function watch (getter, cb, options) {
264 |     var this$1 = this;
265 | 
266 |   assert(typeof getter === 'function', "store.watch only accepts a function.")
267 |   return this._watcherVM.$watch(function () { return getter(this$1.state); }, cb, options)
268 | };
269 | 
270 | Store.prototype.replaceState = function replaceState (state) {
271 |     var this$1 = this;
272 | 
273 |   this._withCommit(function () {
274 |     this$1._vm.state = state
275 |   })
276 | };
277 | 
278 | Store.prototype.registerModule = function registerModule (path, module) {
279 |   if (typeof path === 'string') { path = [path] }
280 |   assert(Array.isArray(path), "module path must be a string or an Array.")
281 |   this._runtimeModules[path.join('.')] = module
282 |   installModule(this, this.state, path, module)
283 |   // reset store to update getters...
284 |   resetStoreVM(this, this.state)
285 | };
286 | 
287 | Store.prototype.unregisterModule = function unregisterModule (path) {
288 |     var this$1 = this;
289 | 
290 |   if (typeof path === 'string') { path = [path] }
291 |   assert(Array.isArray(path), "module path must be a string or an Array.")
292 |     delete this._runtimeModules[path.join('.')]
293 |   this._withCommit(function () {
294 |     var parentState = getNestedState(this$1.state, path.slice(0, -1))
295 |     Vue.delete(parentState, path[path.length - 1])
296 |   })
297 |   resetStore(this)
298 | };
299 | 
300 | Store.prototype.hotUpdate = function hotUpdate (newOptions) {
301 |   updateModule(this._options, newOptions)
302 |   resetStore(this)
303 | };
304 | 
305 | Store.prototype._withCommit = function _withCommit (fn) {
306 |   var committing = this._committing
307 |   this._committing = true
308 |   fn()
309 |   this._committing = committing
310 | };
311 | 
312 | Object.defineProperties( Store.prototype, prototypeAccessors );
313 | 
314 | function updateModule (targetModule, newModule) {
315 |   if (newModule.actions) {
316 |     targetModule.actions = newModule.actions
317 |   }
318 |   if (newModule.mutations) {
319 |     targetModule.mutations = newModule.mutations
320 |   }
321 |   if (newModule.getters) {
322 |     targetModule.getters = newModule.getters
323 |   }
324 |   if (newModule.modules) {
325 |     for (var key in newModule.modules) {
326 |       if (!(targetModule.modules && targetModule.modules[key])) {
327 |         console.warn(
328 |           "[vuex] trying to add a new module '" + key + "' on hot reloading, " +
329 |           'manual reload is needed'
330 |         )
331 |         return
332 |       }
333 |       updateModule(targetModule.modules[key], newModule.modules[key])
334 |     }
335 |   }
336 | }
337 | 
338 | function resetStore (store) {
339 |   store._actions = Object.create(null)
340 |   store._mutations = Object.create(null)
341 |   store._wrappedGetters = Object.create(null)
342 |   var state = store.state
343 |   // init root module
344 |   installModule(store, state, [], store._options, true)
345 |   // init all runtime modules
346 |   Object.keys(store._runtimeModules).forEach(function (key) {
347 |     installModule(store, state, key.split('.'), store._runtimeModules[key], true)
348 |   })
349 |   // reset vm
350 |   resetStoreVM(store, state)
351 | }
352 | 
353 | function resetStoreVM (store, state) {
354 |   var oldVm = store._vm
355 | 
356 |   // bind store public getters
357 |   store.getters = {}
358 |   var wrappedGetters = store._wrappedGetters
359 |   var computed = {}
360 |   Object.keys(wrappedGetters).forEach(function (key) {
361 |     var fn = wrappedGetters[key]
362 |     // use computed to leverage its lazy-caching mechanism
363 |     computed[key] = function () { return fn(store); }
364 |     Object.defineProperty(store.getters, key, {
365 |       get: function () { return store._vm[key]; }
366 |     })
367 |   })
368 | 
369 |   // use a Vue instance to store the state tree
370 |   // suppress warnings just in case the user has added
371 |   // some funky global mixins
372 |   var silent = Vue.config.silent
373 |   Vue.config.silent = true
374 |   store._vm = new Vue({
375 |     data: { state: state },
376 |     computed: computed
377 |   })
378 |   Vue.config.silent = silent
379 | 
380 |   // enable strict mode for new vm
381 |   if (store.strict) {
382 |     enableStrictMode(store)
383 |   }
384 | 
385 |   if (oldVm) {
386 |     // dispatch changes in all subscribed watchers
387 |     // to force getter re-evaluation.
388 |     store._withCommit(function () {
389 |       oldVm.state = null
390 |     })
391 |     Vue.nextTick(function () { return oldVm.$destroy(); })
392 |   }
393 | }
394 | 
395 | function installModule (store, rootState, path, module, hot) {
396 |   var isRoot = !path.length
397 |   var state = module.state;
398 |   var actions = module.actions;
399 |   var mutations = module.mutations;
400 |   var getters = module.getters;
401 |   var modules = module.modules;
402 | 
403 |   // set state
404 |   if (!isRoot && !hot) {
405 |     var parentState = getNestedState(rootState, path.slice(0, -1))
406 |     var moduleName = path[path.length - 1]
407 |     store._withCommit(function () {
408 |       Vue.set(parentState, moduleName, state || {})
409 |     })
410 |   }
411 | 
412 |   if (mutations) {
413 |     Object.keys(mutations).forEach(function (key) {
414 |       registerMutation(store, key, mutations[key], path)
415 |     })
416 |   }
417 | 
418 |   if (actions) {
419 |     Object.keys(actions).forEach(function (key) {
420 |       registerAction(store, key, actions[key], path)
421 |     })
422 |   }
423 | 
424 |   if (getters) {
425 |     wrapGetters(store, getters, path)
426 |   }
427 | 
428 |   if (modules) {
429 |     Object.keys(modules).forEach(function (key) {
430 |       installModule(store, rootState, path.concat(key), modules[key], hot)
431 |     })
432 |   }
433 | }
434 | 
435 | function registerMutation (store, type, handler, path) {
436 |   if ( path === void 0 ) path = [];
437 | 
438 |   var entry = store._mutations[type] || (store._mutations[type] = [])
439 |   entry.push(function wrappedMutationHandler (payload) {
440 |     handler(getNestedState(store.state, path), payload)
441 |   })
442 | }
443 | 
444 | function registerAction (store, type, handler, path) {
445 |   if ( path === void 0 ) path = [];
446 | 
447 |   var entry = store._actions[type] || (store._actions[type] = [])
448 |   var dispatch = store.dispatch;
449 |   var commit = store.commit;
450 |   entry.push(function wrappedActionHandler (payload, cb) {
451 |     var res = handler({
452 |       dispatch: dispatch,
453 |       commit: commit,
454 |       getters: store.getters,
455 |       state: getNestedState(store.state, path),
456 |       rootState: store.state
457 |     }, payload, cb)
458 |     if (!isPromise(res)) {
459 |       res = Promise.resolve(res)
460 |     }
461 |     if (store._devtoolHook) {
462 |       return res.catch(function (err) {
463 |         store._devtoolHook.emit('vuex:error', err)
464 |         throw err
465 |       })
466 |     } else {
467 |       return res
468 |     }
469 |   })
470 | }
471 | 
472 | function wrapGetters (store, moduleGetters, modulePath) {
473 |   Object.keys(moduleGetters).forEach(function (getterKey) {
474 |     var rawGetter = moduleGetters[getterKey]
475 |     if (store._wrappedGetters[getterKey]) {
476 |       console.error(("[vuex] duplicate getter key: " + getterKey))
477 |       return
478 |     }
479 |     store._wrappedGetters[getterKey] = function wrappedGetter (store) {
480 |       return rawGetter(
481 |         getNestedState(store.state, modulePath), // local state
482 |         store.getters, // getters
483 |         store.state // root state
484 |       )
485 |     }
486 |   })
487 | }
488 | 
489 | function enableStrictMode (store) {
490 |   store._vm.$watch('state', function () {
491 |     assert(store._committing, "Do not mutate vuex store state outside mutation handlers.")
492 |   }, { deep: true, sync: true })
493 | }
494 | 
495 | function getNestedState (state, path) {
496 |   return path.length
497 |     ? path.reduce(function (state, key) { return state[key]; }, state)
498 |     : state
499 | }
500 | 
501 | function install (_Vue) {
502 |   if (Vue) {
503 |     console.error(
504 |       '[vuex] already installed. Vue.use(Vuex) should be called only once.'
505 |     )
506 |     return
507 |   }
508 |   Vue = _Vue
509 |   applyMixin(Vue)
510 | }
511 | 
512 | // auto install in dist mode
513 | if (typeof window !== 'undefined' && window.Vue) {
514 |   install(window.Vue)
515 | }
516 | 
517 | var index = {
518 |   Store: Store,
519 |   install: install,
520 |   mapState: mapState,
521 |   mapMutations: mapMutations,
522 |   mapGetters: mapGetters,
523 |   mapActions: mapActions
524 | }
525 | 
526 | return index;
527 | 
528 | })));


--------------------------------------------------------------------------------
/47-Vuex-修改共享数据/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>47-Vuex-修改共享数据</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <script src="js/vuex.js"></script>
  8 | </head>
  9 | <body>
 10 | <div id="app">
 11 |   <father></father>
 12 | </div>
 13 | 
 14 | <template id="father">
 15 |   <div>
 16 |     <son1 @parent-change="change"></son1>
 17 |     <hr>
 18 |     <son2 :parent-num="num"></son2>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <template id="son1">
 23 |   <div>
 24 |     <!-- 需求：在第一个子组件中添加两个按钮和一个输入框，通过按钮控制输入框数据增减 -->
 25 |     <button @click="add"> +1</button>
 26 |     <input type="text" :value="this.$store.state.count" disabled>
 27 |     <button @click="sub"> -1</button>
 28 |   </div>
 29 | </template>
 30 | <template id="son2">
 31 |   <div>
 32 |     <!-- 需求：在第二个子组件展示第一个子组件中的数据 -->
 33 |     <button @click="add"> +1</button>
 34 |     <input type="text" :value="this.$store.state.count" disabled>
 35 |     <button @click="sub"> -1</button>
 36 |   </div>
 37 | </template>
 38 | </body>
 39 | <script>
 40 |   // Vuex 对象
 41 |   const store = new Vuex.Store({
 42 |     // state 用于保存共享数据
 43 |     state: {
 44 |       count: 0
 45 |     },
 46 |     // mutations 用于声明修改共享数据的方法
 47 |     mutations: {
 48 |       increment(state) {
 49 |         state.count++
 50 |       },
 51 |       decrement(state) {
 52 |         state.count--
 53 |       }
 54 |     }
 55 |   })
 56 | 
 57 |   Vue.component("father", {
 58 |     template: "#father",
 59 |     store: store,
 60 |     components: {
 61 |       'son1': {
 62 |         template: '#son1',
 63 |         methods: {
 64 |           add() {
 65 |             // 在 Vuex 中不建议直接修改共享数据
 66 |             // this.$store.state.count++
 67 |             this.$store.commit("increment")
 68 |           },
 69 |           sub() {
 70 |             // this.$store.state.count--
 71 |             this.$store.commit("decrement")
 72 |           }
 73 |         }
 74 |       },
 75 |       'son2': {
 76 |         template: '#son2',
 77 |         methods: {
 78 |           add() {
 79 |             // 在 Vuex 中不建议直接修改共享数据
 80 |             // this.$store.state.count++
 81 |             this.$store.commit("increment")
 82 |           },
 83 |           sub() {
 84 |             // this.$store.state.count--
 85 |             this.$store.commit("decrement")
 86 |           }
 87 |         }
 88 |       }
 89 |     }
 90 |   })
 91 | 
 92 |   /* 1. 创建 vue 实例对象 */
 93 |   let vm1 = new Vue({
 94 |     // 2. 声明vue的实例对象控制页面的哪个区域
 95 |     el: '#app',
 96 |     // 3. 声明vue控制区域可以使用的数据
 97 |     data() {
 98 |       return {}
 99 |     },
100 |     methods: {}
101 |   })
102 | </script>
103 | </html>
104 | <!--
105 | 注意点：
106 | 1. 在 Vuex 中不建议直接修改共享数据，多个组件都修改共享数据，当出现错误时，不利于排错
107 | 
108 | 2. 如何修改？ 使用 mutations
109 | mutations 中定义的方法，系统会自动传递一个 state 参数，可以通过这个参数来获取共享数据从而进行修改
110 | 
111 | 3. 如何调用 mutations 中的方法
112 | this.$store.commit("decrement")
113 | 
114 | const store = new Vuex.Store({
115 |     // state 用于保存共享数据
116 |     state: {
117 |       count: 0
118 |     },
119 |     // mutations 用于声明修改共享数据的方法
120 |     mutations: {
121 |       increment(state) {
122 |         state.count++
123 |       },
124 |       decrement(state) {
125 |         state.count--
126 |       }
127 |     }
128 |   })
129 | -->
130 | 


--------------------------------------------------------------------------------
/47-Vuex-修改共享数据/js/vuex.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * vuex v2.0.0
  3 |  * (c) 2016 Evan You
  4 |  * @license MIT
  5 |  */
  6 | (function (global, factory) {
  7 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8 |   typeof define === 'function' && define.amd ? define(factory) :
  9 |   (global.Vuex = factory());
 10 | }(this, (function () { 'use strict';
 11 | 
 12 | var devtoolHook =
 13 |   typeof window !== 'undefined' &&
 14 |   window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 15 | 
 16 | function devtoolPlugin (store) {
 17 |   if (!devtoolHook) { return }
 18 | 
 19 |   store._devtoolHook = devtoolHook
 20 | 
 21 |   devtoolHook.emit('vuex:init', store)
 22 | 
 23 |   devtoolHook.on('vuex:travel-to-state', function (targetState) {
 24 |     store.replaceState(targetState)
 25 |   })
 26 | 
 27 |   store.subscribe(function (mutation, state) {
 28 |     devtoolHook.emit('vuex:mutation', mutation, state)
 29 |   })
 30 | }
 31 | 
 32 | function applyMixin (Vue) {
 33 |   var version = Number(Vue.version.split('.')[0])
 34 | 
 35 |   if (version >= 2) {
 36 |     var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
 37 |     Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
 38 |   } else {
 39 |     // override init and inject vuex init procedure
 40 |     // for 1.x backwards compatibility.
 41 |     var _init = Vue.prototype._init
 42 |     Vue.prototype._init = function (options) {
 43 |       if ( options === void 0 ) options = {};
 44 | 
 45 |       options.init = options.init
 46 |         ? [vuexInit].concat(options.init)
 47 |         : vuexInit
 48 |       _init.call(this, options)
 49 |     }
 50 |   }
 51 | 
 52 |   /**
 53 |    * Vuex init hook, injected into each instances init hooks list.
 54 |    */
 55 | 
 56 |   function vuexInit () {
 57 |     var options = this.$options
 58 |     // store injection
 59 |     if (options.store) {
 60 |       this.$store = options.store
 61 |     } else if (options.parent && options.parent.$store) {
 62 |       this.$store = options.parent.$store
 63 |     }
 64 |   }
 65 | }
 66 | 
 67 | function mapState (states) {
 68 |   var res = {}
 69 |   normalizeMap(states).forEach(function (ref) {
 70 |     var key = ref.key;
 71 |     var val = ref.val;
 72 | 
 73 |     res[key] = function mappedState () {
 74 |       return typeof val === 'function'
 75 |         ? val.call(this, this.$store.state, this.$store.getters)
 76 |         : this.$store.state[val]
 77 |     }
 78 |   })
 79 |   return res
 80 | }
 81 | 
 82 | function mapMutations (mutations) {
 83 |   var res = {}
 84 |   normalizeMap(mutations).forEach(function (ref) {
 85 |     var key = ref.key;
 86 |     var val = ref.val;
 87 | 
 88 |     res[key] = function mappedMutation () {
 89 |       var args = [], len = arguments.length;
 90 |       while ( len-- ) args[ len ] = arguments[ len ];
 91 | 
 92 |       return this.$store.commit.apply(this.$store, [val].concat(args))
 93 |     }
 94 |   })
 95 |   return res
 96 | }
 97 | 
 98 | function mapGetters (getters) {
 99 |   var res = {}
100 |   normalizeMap(getters).forEach(function (ref) {
101 |     var key = ref.key;
102 |     var val = ref.val;
103 | 
104 |     res[key] = function mappedGetter () {
105 |       if (!(val in this.$store.getters)) {
106 |         console.error(("[vuex] unknown getter: " + val))
107 |       }
108 |       return this.$store.getters[val]
109 |     }
110 |   })
111 |   return res
112 | }
113 | 
114 | function mapActions (actions) {
115 |   var res = {}
116 |   normalizeMap(actions).forEach(function (ref) {
117 |     var key = ref.key;
118 |     var val = ref.val;
119 | 
120 |     res[key] = function mappedAction () {
121 |       var args = [], len = arguments.length;
122 |       while ( len-- ) args[ len ] = arguments[ len ];
123 | 
124 |       return this.$store.dispatch.apply(this.$store, [val].concat(args))
125 |     }
126 |   })
127 |   return res
128 | }
129 | 
130 | function normalizeMap (map) {
131 |   return Array.isArray(map)
132 |     ? map.map(function (key) { return ({ key: key, val: key }); })
133 |     : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
134 | }
135 | 
136 | function isObject (obj) {
137 |   return obj !== null && typeof obj === 'object'
138 | }
139 | 
140 | function isPromise (val) {
141 |   return val && typeof val.then === 'function'
142 | }
143 | 
144 | function assert (condition, msg) {
145 |   if (!condition) { throw new Error(("[vuex] " + msg)) }
146 | }
147 | 
148 | var Vue // bind on install
149 | 
150 | var Store = function Store (options) {
151 |   var this$1 = this;
152 |   if ( options === void 0 ) options = {};
153 | 
154 |   assert(Vue, "must call Vue.use(Vuex) before creating a store instance.")
155 |   assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.")
156 | 
157 |   var state = options.state; if ( state === void 0 ) state = {};
158 |   var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
159 |   var strict = options.strict; if ( strict === void 0 ) strict = false;
160 | 
161 |   // store internal state
162 |   this._options = options
163 |   this._committing = false
164 |   this._actions = Object.create(null)
165 |   this._mutations = Object.create(null)
166 |   this._wrappedGetters = Object.create(null)
167 |   this._runtimeModules = Object.create(null)
168 |   this._subscribers = []
169 |   this._watcherVM = new Vue()
170 | 
171 |     // bind commit and dispatch to self
172 |   var store = this
173 |   var ref = this;
174 |   var dispatch = ref.dispatch;
175 |   var commit = ref.commit;
176 |   this.dispatch = function boundDispatch (type, payload) {
177 |     return dispatch.call(store, type, payload)
178 |     }
179 |     this.commit = function boundCommit (type, payload, options) {
180 |     return commit.call(store, type, payload, options)
181 |   }
182 | 
183 |   // strict mode
184 |   this.strict = strict
185 | 
186 |   // init root module.
187 |   // this also recursively registers all sub-modules
188 |   // and collects all module getters inside this._wrappedGetters
189 |   installModule(this, state, [], options)
190 | 
191 |   // initialize the store vm, which is responsible for the reactivity
192 |   // (also registers _wrappedGetters as computed properties)
193 |   resetStoreVM(this, state)
194 | 
195 |   // apply plugins
196 |   plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); })
197 | };
198 | 
199 | var prototypeAccessors = { state: {} };
200 | 
201 | prototypeAccessors.state.get = function () {
202 |   return this._vm.state
203 | };
204 | 
205 | prototypeAccessors.state.set = function (v) {
206 |   assert(false, "Use store.replaceState() to explicit replace store state.")
207 | };
208 | 
209 | Store.prototype.commit = function commit (type, payload, options) {
210 |     var this$1 = this;
211 | 
212 |   // check object-style commit
213 |   if (isObject(type) && type.type) {
214 |     options = payload
215 |     payload = type
216 |     type = type.type
217 |   }
218 |   var mutation = { type: type, payload: payload }
219 |   var entry = this._mutations[type]
220 |   if (!entry) {
221 |     console.error(("[vuex] unknown mutation type: " + type))
222 |     return
223 |   }
224 |   this._withCommit(function () {
225 |     entry.forEach(function commitIterator (handler) {
226 |       handler(payload)
227 |     })
228 |   })
229 |   if (!options || !options.silent) {
230 |     this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); })
231 |   }
232 | };
233 | 
234 | Store.prototype.dispatch = function dispatch (type, payload) {
235 |   // check object-style dispatch
236 |   if (isObject(type) && type.type) {
237 |     payload = type
238 |     type = type.type
239 |   }
240 |   var entry = this._actions[type]
241 |   if (!entry) {
242 |     console.error(("[vuex] unknown action type: " + type))
243 |     return
244 |   }
245 |   return entry.length > 1
246 |     ? Promise.all(entry.map(function (handler) { return handler(payload); }))
247 |     : entry[0](payload)
248 | };
249 | 
250 | Store.prototype.subscribe = function subscribe (fn) {
251 |   var subs = this._subscribers
252 |   if (subs.indexOf(fn) < 0) {
253 |     subs.push(fn)
254 |   }
255 |   return function () {
256 |     var i = subs.indexOf(fn)
257 |     if (i > -1) {
258 |       subs.splice(i, 1)
259 |     }
260 |   }
261 | };
262 | 
263 | Store.prototype.watch = function watch (getter, cb, options) {
264 |     var this$1 = this;
265 | 
266 |   assert(typeof getter === 'function', "store.watch only accepts a function.")
267 |   return this._watcherVM.$watch(function () { return getter(this$1.state); }, cb, options)
268 | };
269 | 
270 | Store.prototype.replaceState = function replaceState (state) {
271 |     var this$1 = this;
272 | 
273 |   this._withCommit(function () {
274 |     this$1._vm.state = state
275 |   })
276 | };
277 | 
278 | Store.prototype.registerModule = function registerModule (path, module) {
279 |   if (typeof path === 'string') { path = [path] }
280 |   assert(Array.isArray(path), "module path must be a string or an Array.")
281 |   this._runtimeModules[path.join('.')] = module
282 |   installModule(this, this.state, path, module)
283 |   // reset store to update getters...
284 |   resetStoreVM(this, this.state)
285 | };
286 | 
287 | Store.prototype.unregisterModule = function unregisterModule (path) {
288 |     var this$1 = this;
289 | 
290 |   if (typeof path === 'string') { path = [path] }
291 |   assert(Array.isArray(path), "module path must be a string or an Array.")
292 |     delete this._runtimeModules[path.join('.')]
293 |   this._withCommit(function () {
294 |     var parentState = getNestedState(this$1.state, path.slice(0, -1))
295 |     Vue.delete(parentState, path[path.length - 1])
296 |   })
297 |   resetStore(this)
298 | };
299 | 
300 | Store.prototype.hotUpdate = function hotUpdate (newOptions) {
301 |   updateModule(this._options, newOptions)
302 |   resetStore(this)
303 | };
304 | 
305 | Store.prototype._withCommit = function _withCommit (fn) {
306 |   var committing = this._committing
307 |   this._committing = true
308 |   fn()
309 |   this._committing = committing
310 | };
311 | 
312 | Object.defineProperties( Store.prototype, prototypeAccessors );
313 | 
314 | function updateModule (targetModule, newModule) {
315 |   if (newModule.actions) {
316 |     targetModule.actions = newModule.actions
317 |   }
318 |   if (newModule.mutations) {
319 |     targetModule.mutations = newModule.mutations
320 |   }
321 |   if (newModule.getters) {
322 |     targetModule.getters = newModule.getters
323 |   }
324 |   if (newModule.modules) {
325 |     for (var key in newModule.modules) {
326 |       if (!(targetModule.modules && targetModule.modules[key])) {
327 |         console.warn(
328 |           "[vuex] trying to add a new module '" + key + "' on hot reloading, " +
329 |           'manual reload is needed'
330 |         )
331 |         return
332 |       }
333 |       updateModule(targetModule.modules[key], newModule.modules[key])
334 |     }
335 |   }
336 | }
337 | 
338 | function resetStore (store) {
339 |   store._actions = Object.create(null)
340 |   store._mutations = Object.create(null)
341 |   store._wrappedGetters = Object.create(null)
342 |   var state = store.state
343 |   // init root module
344 |   installModule(store, state, [], store._options, true)
345 |   // init all runtime modules
346 |   Object.keys(store._runtimeModules).forEach(function (key) {
347 |     installModule(store, state, key.split('.'), store._runtimeModules[key], true)
348 |   })
349 |   // reset vm
350 |   resetStoreVM(store, state)
351 | }
352 | 
353 | function resetStoreVM (store, state) {
354 |   var oldVm = store._vm
355 | 
356 |   // bind store public getters
357 |   store.getters = {}
358 |   var wrappedGetters = store._wrappedGetters
359 |   var computed = {}
360 |   Object.keys(wrappedGetters).forEach(function (key) {
361 |     var fn = wrappedGetters[key]
362 |     // use computed to leverage its lazy-caching mechanism
363 |     computed[key] = function () { return fn(store); }
364 |     Object.defineProperty(store.getters, key, {
365 |       get: function () { return store._vm[key]; }
366 |     })
367 |   })
368 | 
369 |   // use a Vue instance to store the state tree
370 |   // suppress warnings just in case the user has added
371 |   // some funky global mixins
372 |   var silent = Vue.config.silent
373 |   Vue.config.silent = true
374 |   store._vm = new Vue({
375 |     data: { state: state },
376 |     computed: computed
377 |   })
378 |   Vue.config.silent = silent
379 | 
380 |   // enable strict mode for new vm
381 |   if (store.strict) {
382 |     enableStrictMode(store)
383 |   }
384 | 
385 |   if (oldVm) {
386 |     // dispatch changes in all subscribed watchers
387 |     // to force getter re-evaluation.
388 |     store._withCommit(function () {
389 |       oldVm.state = null
390 |     })
391 |     Vue.nextTick(function () { return oldVm.$destroy(); })
392 |   }
393 | }
394 | 
395 | function installModule (store, rootState, path, module, hot) {
396 |   var isRoot = !path.length
397 |   var state = module.state;
398 |   var actions = module.actions;
399 |   var mutations = module.mutations;
400 |   var getters = module.getters;
401 |   var modules = module.modules;
402 | 
403 |   // set state
404 |   if (!isRoot && !hot) {
405 |     var parentState = getNestedState(rootState, path.slice(0, -1))
406 |     var moduleName = path[path.length - 1]
407 |     store._withCommit(function () {
408 |       Vue.set(parentState, moduleName, state || {})
409 |     })
410 |   }
411 | 
412 |   if (mutations) {
413 |     Object.keys(mutations).forEach(function (key) {
414 |       registerMutation(store, key, mutations[key], path)
415 |     })
416 |   }
417 | 
418 |   if (actions) {
419 |     Object.keys(actions).forEach(function (key) {
420 |       registerAction(store, key, actions[key], path)
421 |     })
422 |   }
423 | 
424 |   if (getters) {
425 |     wrapGetters(store, getters, path)
426 |   }
427 | 
428 |   if (modules) {
429 |     Object.keys(modules).forEach(function (key) {
430 |       installModule(store, rootState, path.concat(key), modules[key], hot)
431 |     })
432 |   }
433 | }
434 | 
435 | function registerMutation (store, type, handler, path) {
436 |   if ( path === void 0 ) path = [];
437 | 
438 |   var entry = store._mutations[type] || (store._mutations[type] = [])
439 |   entry.push(function wrappedMutationHandler (payload) {
440 |     handler(getNestedState(store.state, path), payload)
441 |   })
442 | }
443 | 
444 | function registerAction (store, type, handler, path) {
445 |   if ( path === void 0 ) path = [];
446 | 
447 |   var entry = store._actions[type] || (store._actions[type] = [])
448 |   var dispatch = store.dispatch;
449 |   var commit = store.commit;
450 |   entry.push(function wrappedActionHandler (payload, cb) {
451 |     var res = handler({
452 |       dispatch: dispatch,
453 |       commit: commit,
454 |       getters: store.getters,
455 |       state: getNestedState(store.state, path),
456 |       rootState: store.state
457 |     }, payload, cb)
458 |     if (!isPromise(res)) {
459 |       res = Promise.resolve(res)
460 |     }
461 |     if (store._devtoolHook) {
462 |       return res.catch(function (err) {
463 |         store._devtoolHook.emit('vuex:error', err)
464 |         throw err
465 |       })
466 |     } else {
467 |       return res
468 |     }
469 |   })
470 | }
471 | 
472 | function wrapGetters (store, moduleGetters, modulePath) {
473 |   Object.keys(moduleGetters).forEach(function (getterKey) {
474 |     var rawGetter = moduleGetters[getterKey]
475 |     if (store._wrappedGetters[getterKey]) {
476 |       console.error(("[vuex] duplicate getter key: " + getterKey))
477 |       return
478 |     }
479 |     store._wrappedGetters[getterKey] = function wrappedGetter (store) {
480 |       return rawGetter(
481 |         getNestedState(store.state, modulePath), // local state
482 |         store.getters, // getters
483 |         store.state // root state
484 |       )
485 |     }
486 |   })
487 | }
488 | 
489 | function enableStrictMode (store) {
490 |   store._vm.$watch('state', function () {
491 |     assert(store._committing, "Do not mutate vuex store state outside mutation handlers.")
492 |   }, { deep: true, sync: true })
493 | }
494 | 
495 | function getNestedState (state, path) {
496 |   return path.length
497 |     ? path.reduce(function (state, key) { return state[key]; }, state)
498 |     : state
499 | }
500 | 
501 | function install (_Vue) {
502 |   if (Vue) {
503 |     console.error(
504 |       '[vuex] already installed. Vue.use(Vuex) should be called only once.'
505 |     )
506 |     return
507 |   }
508 |   Vue = _Vue
509 |   applyMixin(Vue)
510 | }
511 | 
512 | // auto install in dist mode
513 | if (typeof window !== 'undefined' && window.Vue) {
514 |   install(window.Vue)
515 | }
516 | 
517 | var index = {
518 |   Store: Store,
519 |   install: install,
520 |   mapState: mapState,
521 |   mapMutations: mapMutations,
522 |   mapGetters: mapGetters,
523 |   mapActions: mapActions
524 | }
525 | 
526 | return index;
527 | 
528 | })));


--------------------------------------------------------------------------------
/48-Vuex-getters/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>48-Vuex-getters</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <script src="js/vuex.js"></script>
 8 | </head>
 9 | <body>
10 | <div id="app">
11 |   <father></father>
12 | </div>
13 | 
14 | <template id="father">
15 |   <div>
16 |     计算属性：转大写
17 |     <p>{{format}}</p>
18 |     <p>{{format}}</p>
19 |     <p>{{format}}</p>
20 |     <hr>
21 |     getters：转大写
22 |     <p>{{this.$store.getters.format}}</p>
23 |     <p>{{this.$store.getters.format}}</p>
24 |     <p>{{this.$store.getters.format}}</p>
25 |   </div>
26 | </template>
27 | </body>
28 | <script>
29 |   // Vuex 对象
30 |   const store = new Vuex.Store({
31 |     // state 用于保存共享数据
32 |     state: {
33 |       msg: 'this is father\'s msg'
34 |     },
35 |     // mutations 用于声明修改共享数据的方法
36 |     mutations: {},
37 |     getters: {
38 |       format(state) {
39 |         console.log("getters 方法执行")
40 |         return state.msg.toUpperCase()
41 |       }
42 |     }
43 |   })
44 | 
45 |   Vue.component("father", {
46 |     template: "#father",
47 |     store: store,
48 |     data() {
49 |       return {
50 |         msg: 'this is father\'s msg'
51 |       }
52 |     },
53 |     computed: {
54 |       format() {
55 |         console.log("计算属性方法执行")
56 |         return this.msg.toUpperCase()
57 |       }
58 |     }
59 |   })
60 | 
61 |   /* 1. 创建 vue 实例对象 */
62 |   let vm1 = new Vue({
63 |     // 2. 声明vue的实例对象控制页面的哪个区域
64 |     el: '#app',
65 |     // 3. 声明vue控制区域可以使用的数据
66 |     data() {
67 |       return {}
68 |     },
69 |     methods: {}
70 |   })
71 | </script>
72 | </html>
73 | <!--
74 | 1. Vuex 中的 getters 是什么？
75 | getters 属性和组件中的计算属性一样，会将数据缓存起来，只有数据发生变化才会重新计算
76 | 
77 | 2. getter 中的属性跟 mutations 中的方法一样，会接收一个 state 参数，state 保存了共享数据
78 | 
79 | -->
80 | 


--------------------------------------------------------------------------------
/48-Vuex-getters/js/vuex.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * vuex v2.0.0
  3 |  * (c) 2016 Evan You
  4 |  * @license MIT
  5 |  */
  6 | (function (global, factory) {
  7 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8 |   typeof define === 'function' && define.amd ? define(factory) :
  9 |   (global.Vuex = factory());
 10 | }(this, (function () { 'use strict';
 11 | 
 12 | var devtoolHook =
 13 |   typeof window !== 'undefined' &&
 14 |   window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 15 | 
 16 | function devtoolPlugin (store) {
 17 |   if (!devtoolHook) { return }
 18 | 
 19 |   store._devtoolHook = devtoolHook
 20 | 
 21 |   devtoolHook.emit('vuex:init', store)
 22 | 
 23 |   devtoolHook.on('vuex:travel-to-state', function (targetState) {
 24 |     store.replaceState(targetState)
 25 |   })
 26 | 
 27 |   store.subscribe(function (mutation, state) {
 28 |     devtoolHook.emit('vuex:mutation', mutation, state)
 29 |   })
 30 | }
 31 | 
 32 | function applyMixin (Vue) {
 33 |   var version = Number(Vue.version.split('.')[0])
 34 | 
 35 |   if (version >= 2) {
 36 |     var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
 37 |     Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
 38 |   } else {
 39 |     // override init and inject vuex init procedure
 40 |     // for 1.x backwards compatibility.
 41 |     var _init = Vue.prototype._init
 42 |     Vue.prototype._init = function (options) {
 43 |       if ( options === void 0 ) options = {};
 44 | 
 45 |       options.init = options.init
 46 |         ? [vuexInit].concat(options.init)
 47 |         : vuexInit
 48 |       _init.call(this, options)
 49 |     }
 50 |   }
 51 | 
 52 |   /**
 53 |    * Vuex init hook, injected into each instances init hooks list.
 54 |    */
 55 | 
 56 |   function vuexInit () {
 57 |     var options = this.$options
 58 |     // store injection
 59 |     if (options.store) {
 60 |       this.$store = options.store
 61 |     } else if (options.parent && options.parent.$store) {
 62 |       this.$store = options.parent.$store
 63 |     }
 64 |   }
 65 | }
 66 | 
 67 | function mapState (states) {
 68 |   var res = {}
 69 |   normalizeMap(states).forEach(function (ref) {
 70 |     var key = ref.key;
 71 |     var val = ref.val;
 72 | 
 73 |     res[key] = function mappedState () {
 74 |       return typeof val === 'function'
 75 |         ? val.call(this, this.$store.state, this.$store.getters)
 76 |         : this.$store.state[val]
 77 |     }
 78 |   })
 79 |   return res
 80 | }
 81 | 
 82 | function mapMutations (mutations) {
 83 |   var res = {}
 84 |   normalizeMap(mutations).forEach(function (ref) {
 85 |     var key = ref.key;
 86 |     var val = ref.val;
 87 | 
 88 |     res[key] = function mappedMutation () {
 89 |       var args = [], len = arguments.length;
 90 |       while ( len-- ) args[ len ] = arguments[ len ];
 91 | 
 92 |       return this.$store.commit.apply(this.$store, [val].concat(args))
 93 |     }
 94 |   })
 95 |   return res
 96 | }
 97 | 
 98 | function mapGetters (getters) {
 99 |   var res = {}
100 |   normalizeMap(getters).forEach(function (ref) {
101 |     var key = ref.key;
102 |     var val = ref.val;
103 | 
104 |     res[key] = function mappedGetter () {
105 |       if (!(val in this.$store.getters)) {
106 |         console.error(("[vuex] unknown getter: " + val))
107 |       }
108 |       return this.$store.getters[val]
109 |     }
110 |   })
111 |   return res
112 | }
113 | 
114 | function mapActions (actions) {
115 |   var res = {}
116 |   normalizeMap(actions).forEach(function (ref) {
117 |     var key = ref.key;
118 |     var val = ref.val;
119 | 
120 |     res[key] = function mappedAction () {
121 |       var args = [], len = arguments.length;
122 |       while ( len-- ) args[ len ] = arguments[ len ];
123 | 
124 |       return this.$store.dispatch.apply(this.$store, [val].concat(args))
125 |     }
126 |   })
127 |   return res
128 | }
129 | 
130 | function normalizeMap (map) {
131 |   return Array.isArray(map)
132 |     ? map.map(function (key) { return ({ key: key, val: key }); })
133 |     : Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
134 | }
135 | 
136 | function isObject (obj) {
137 |   return obj !== null && typeof obj === 'object'
138 | }
139 | 
140 | function isPromise (val) {
141 |   return val && typeof val.then === 'function'
142 | }
143 | 
144 | function assert (condition, msg) {
145 |   if (!condition) { throw new Error(("[vuex] " + msg)) }
146 | }
147 | 
148 | var Vue // bind on install
149 | 
150 | var Store = function Store (options) {
151 |   var this$1 = this;
152 |   if ( options === void 0 ) options = {};
153 | 
154 |   assert(Vue, "must call Vue.use(Vuex) before creating a store instance.")
155 |   assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.")
156 | 
157 |   var state = options.state; if ( state === void 0 ) state = {};
158 |   var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
159 |   var strict = options.strict; if ( strict === void 0 ) strict = false;
160 | 
161 |   // store internal state
162 |   this._options = options
163 |   this._committing = false
164 |   this._actions = Object.create(null)
165 |   this._mutations = Object.create(null)
166 |   this._wrappedGetters = Object.create(null)
167 |   this._runtimeModules = Object.create(null)
168 |   this._subscribers = []
169 |   this._watcherVM = new Vue()
170 | 
171 |     // bind commit and dispatch to self
172 |   var store = this
173 |   var ref = this;
174 |   var dispatch = ref.dispatch;
175 |   var commit = ref.commit;
176 |   this.dispatch = function boundDispatch (type, payload) {
177 |     return dispatch.call(store, type, payload)
178 |     }
179 |     this.commit = function boundCommit (type, payload, options) {
180 |     return commit.call(store, type, payload, options)
181 |   }
182 | 
183 |   // strict mode
184 |   this.strict = strict
185 | 
186 |   // init root module.
187 |   // this also recursively registers all sub-modules
188 |   // and collects all module getters inside this._wrappedGetters
189 |   installModule(this, state, [], options)
190 | 
191 |   // initialize the store vm, which is responsible for the reactivity
192 |   // (also registers _wrappedGetters as computed properties)
193 |   resetStoreVM(this, state)
194 | 
195 |   // apply plugins
196 |   plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); })
197 | };
198 | 
199 | var prototypeAccessors = { state: {} };
200 | 
201 | prototypeAccessors.state.get = function () {
202 |   return this._vm.state
203 | };
204 | 
205 | prototypeAccessors.state.set = function (v) {
206 |   assert(false, "Use store.replaceState() to explicit replace store state.")
207 | };
208 | 
209 | Store.prototype.commit = function commit (type, payload, options) {
210 |     var this$1 = this;
211 | 
212 |   // check object-style commit
213 |   if (isObject(type) && type.type) {
214 |     options = payload
215 |     payload = type
216 |     type = type.type
217 |   }
218 |   var mutation = { type: type, payload: payload }
219 |   var entry = this._mutations[type]
220 |   if (!entry) {
221 |     console.error(("[vuex] unknown mutation type: " + type))
222 |     return
223 |   }
224 |   this._withCommit(function () {
225 |     entry.forEach(function commitIterator (handler) {
226 |       handler(payload)
227 |     })
228 |   })
229 |   if (!options || !options.silent) {
230 |     this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); })
231 |   }
232 | };
233 | 
234 | Store.prototype.dispatch = function dispatch (type, payload) {
235 |   // check object-style dispatch
236 |   if (isObject(type) && type.type) {
237 |     payload = type
238 |     type = type.type
239 |   }
240 |   var entry = this._actions[type]
241 |   if (!entry) {
242 |     console.error(("[vuex] unknown action type: " + type))
243 |     return
244 |   }
245 |   return entry.length > 1
246 |     ? Promise.all(entry.map(function (handler) { return handler(payload); }))
247 |     : entry[0](payload)
248 | };
249 | 
250 | Store.prototype.subscribe = function subscribe (fn) {
251 |   var subs = this._subscribers
252 |   if (subs.indexOf(fn) < 0) {
253 |     subs.push(fn)
254 |   }
255 |   return function () {
256 |     var i = subs.indexOf(fn)
257 |     if (i > -1) {
258 |       subs.splice(i, 1)
259 |     }
260 |   }
261 | };
262 | 
263 | Store.prototype.watch = function watch (getter, cb, options) {
264 |     var this$1 = this;
265 | 
266 |   assert(typeof getter === 'function', "store.watch only accepts a function.")
267 |   return this._watcherVM.$watch(function () { return getter(this$1.state); }, cb, options)
268 | };
269 | 
270 | Store.prototype.replaceState = function replaceState (state) {
271 |     var this$1 = this;
272 | 
273 |   this._withCommit(function () {
274 |     this$1._vm.state = state
275 |   })
276 | };
277 | 
278 | Store.prototype.registerModule = function registerModule (path, module) {
279 |   if (typeof path === 'string') { path = [path] }
280 |   assert(Array.isArray(path), "module path must be a string or an Array.")
281 |   this._runtimeModules[path.join('.')] = module
282 |   installModule(this, this.state, path, module)
283 |   // reset store to update getters...
284 |   resetStoreVM(this, this.state)
285 | };
286 | 
287 | Store.prototype.unregisterModule = function unregisterModule (path) {
288 |     var this$1 = this;
289 | 
290 |   if (typeof path === 'string') { path = [path] }
291 |   assert(Array.isArray(path), "module path must be a string or an Array.")
292 |     delete this._runtimeModules[path.join('.')]
293 |   this._withCommit(function () {
294 |     var parentState = getNestedState(this$1.state, path.slice(0, -1))
295 |     Vue.delete(parentState, path[path.length - 1])
296 |   })
297 |   resetStore(this)
298 | };
299 | 
300 | Store.prototype.hotUpdate = function hotUpdate (newOptions) {
301 |   updateModule(this._options, newOptions)
302 |   resetStore(this)
303 | };
304 | 
305 | Store.prototype._withCommit = function _withCommit (fn) {
306 |   var committing = this._committing
307 |   this._committing = true
308 |   fn()
309 |   this._committing = committing
310 | };
311 | 
312 | Object.defineProperties( Store.prototype, prototypeAccessors );
313 | 
314 | function updateModule (targetModule, newModule) {
315 |   if (newModule.actions) {
316 |     targetModule.actions = newModule.actions
317 |   }
318 |   if (newModule.mutations) {
319 |     targetModule.mutations = newModule.mutations
320 |   }
321 |   if (newModule.getters) {
322 |     targetModule.getters = newModule.getters
323 |   }
324 |   if (newModule.modules) {
325 |     for (var key in newModule.modules) {
326 |       if (!(targetModule.modules && targetModule.modules[key])) {
327 |         console.warn(
328 |           "[vuex] trying to add a new module '" + key + "' on hot reloading, " +
329 |           'manual reload is needed'
330 |         )
331 |         return
332 |       }
333 |       updateModule(targetModule.modules[key], newModule.modules[key])
334 |     }
335 |   }
336 | }
337 | 
338 | function resetStore (store) {
339 |   store._actions = Object.create(null)
340 |   store._mutations = Object.create(null)
341 |   store._wrappedGetters = Object.create(null)
342 |   var state = store.state
343 |   // init root module
344 |   installModule(store, state, [], store._options, true)
345 |   // init all runtime modules
346 |   Object.keys(store._runtimeModules).forEach(function (key) {
347 |     installModule(store, state, key.split('.'), store._runtimeModules[key], true)
348 |   })
349 |   // reset vm
350 |   resetStoreVM(store, state)
351 | }
352 | 
353 | function resetStoreVM (store, state) {
354 |   var oldVm = store._vm
355 | 
356 |   // bind store public getters
357 |   store.getters = {}
358 |   var wrappedGetters = store._wrappedGetters
359 |   var computed = {}
360 |   Object.keys(wrappedGetters).forEach(function (key) {
361 |     var fn = wrappedGetters[key]
362 |     // use computed to leverage its lazy-caching mechanism
363 |     computed[key] = function () { return fn(store); }
364 |     Object.defineProperty(store.getters, key, {
365 |       get: function () { return store._vm[key]; }
366 |     })
367 |   })
368 | 
369 |   // use a Vue instance to store the state tree
370 |   // suppress warnings just in case the user has added
371 |   // some funky global mixins
372 |   var silent = Vue.config.silent
373 |   Vue.config.silent = true
374 |   store._vm = new Vue({
375 |     data: { state: state },
376 |     computed: computed
377 |   })
378 |   Vue.config.silent = silent
379 | 
380 |   // enable strict mode for new vm
381 |   if (store.strict) {
382 |     enableStrictMode(store)
383 |   }
384 | 
385 |   if (oldVm) {
386 |     // dispatch changes in all subscribed watchers
387 |     // to force getter re-evaluation.
388 |     store._withCommit(function () {
389 |       oldVm.state = null
390 |     })
391 |     Vue.nextTick(function () { return oldVm.$destroy(); })
392 |   }
393 | }
394 | 
395 | function installModule (store, rootState, path, module, hot) {
396 |   var isRoot = !path.length
397 |   var state = module.state;
398 |   var actions = module.actions;
399 |   var mutations = module.mutations;
400 |   var getters = module.getters;
401 |   var modules = module.modules;
402 | 
403 |   // set state
404 |   if (!isRoot && !hot) {
405 |     var parentState = getNestedState(rootState, path.slice(0, -1))
406 |     var moduleName = path[path.length - 1]
407 |     store._withCommit(function () {
408 |       Vue.set(parentState, moduleName, state || {})
409 |     })
410 |   }
411 | 
412 |   if (mutations) {
413 |     Object.keys(mutations).forEach(function (key) {
414 |       registerMutation(store, key, mutations[key], path)
415 |     })
416 |   }
417 | 
418 |   if (actions) {
419 |     Object.keys(actions).forEach(function (key) {
420 |       registerAction(store, key, actions[key], path)
421 |     })
422 |   }
423 | 
424 |   if (getters) {
425 |     wrapGetters(store, getters, path)
426 |   }
427 | 
428 |   if (modules) {
429 |     Object.keys(modules).forEach(function (key) {
430 |       installModule(store, rootState, path.concat(key), modules[key], hot)
431 |     })
432 |   }
433 | }
434 | 
435 | function registerMutation (store, type, handler, path) {
436 |   if ( path === void 0 ) path = [];
437 | 
438 |   var entry = store._mutations[type] || (store._mutations[type] = [])
439 |   entry.push(function wrappedMutationHandler (payload) {
440 |     handler(getNestedState(store.state, path), payload)
441 |   })
442 | }
443 | 
444 | function registerAction (store, type, handler, path) {
445 |   if ( path === void 0 ) path = [];
446 | 
447 |   var entry = store._actions[type] || (store._actions[type] = [])
448 |   var dispatch = store.dispatch;
449 |   var commit = store.commit;
450 |   entry.push(function wrappedActionHandler (payload, cb) {
451 |     var res = handler({
452 |       dispatch: dispatch,
453 |       commit: commit,
454 |       getters: store.getters,
455 |       state: getNestedState(store.state, path),
456 |       rootState: store.state
457 |     }, payload, cb)
458 |     if (!isPromise(res)) {
459 |       res = Promise.resolve(res)
460 |     }
461 |     if (store._devtoolHook) {
462 |       return res.catch(function (err) {
463 |         store._devtoolHook.emit('vuex:error', err)
464 |         throw err
465 |       })
466 |     } else {
467 |       return res
468 |     }
469 |   })
470 | }
471 | 
472 | function wrapGetters (store, moduleGetters, modulePath) {
473 |   Object.keys(moduleGetters).forEach(function (getterKey) {
474 |     var rawGetter = moduleGetters[getterKey]
475 |     if (store._wrappedGetters[getterKey]) {
476 |       console.error(("[vuex] duplicate getter key: " + getterKey))
477 |       return
478 |     }
479 |     store._wrappedGetters[getterKey] = function wrappedGetter (store) {
480 |       return rawGetter(
481 |         getNestedState(store.state, modulePath), // local state
482 |         store.getters, // getters
483 |         store.state // root state
484 |       )
485 |     }
486 |   })
487 | }
488 | 
489 | function enableStrictMode (store) {
490 |   store._vm.$watch('state', function () {
491 |     assert(store._committing, "Do not mutate vuex store state outside mutation handlers.")
492 |   }, { deep: true, sync: true })
493 | }
494 | 
495 | function getNestedState (state, path) {
496 |   return path.length
497 |     ? path.reduce(function (state, key) { return state[key]; }, state)
498 |     : state
499 | }
500 | 
501 | function install (_Vue) {
502 |   if (Vue) {
503 |     console.error(
504 |       '[vuex] already installed. Vue.use(Vuex) should be called only once.'
505 |     )
506 |     return
507 |   }
508 |   Vue = _Vue
509 |   applyMixin(Vue)
510 | }
511 | 
512 | // auto install in dist mode
513 | if (typeof window !== 'undefined' && window.Vue) {
514 |   install(window.Vue)
515 | }
516 | 
517 | var index = {
518 |   Store: Store,
519 |   install: install,
520 |   mapState: mapState,
521 |   mapMutations: mapMutations,
522 |   mapGetters: mapGetters,
523 |   mapActions: mapActions
524 | }
525 | 
526 | return index;
527 | 
528 | })));


--------------------------------------------------------------------------------
/49-VueRouter-基本介绍/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>49-VueRouter-基本介绍</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <script src="js/vue-router.js"></script>
 8 |   <style>
 9 |       .z-active {
10 |           background: red;
11 |       }
12 |   </style>
13 | </head>
14 | <body>
15 | <div id="app">
16 |   <router-link to="/one" tag="button">切换到第一个界面</router-link>
17 |   <router-link to="/two" tag="button">切换到第二个界面</router-link>
18 | 
19 |   <!-- 路由出口 -->
20 |   <router-view></router-view>
21 | </div>
22 | <template id="one">
23 |   <div class="onepage">
24 |     <p>第一个界面</p>
25 |   </div>
26 | </template>
27 | <template id="two">
28 |   <div class="twopage">
29 |     <p>第二个界面</p>
30 |   </div>
31 | </template>
32 | </body>
33 | <script>
34 |   // 定义组件
35 |   const one = {
36 |     template: '#one'
37 |   }
38 |   const two = {
39 |     template: '#two'
40 |   }
41 | 
42 |   // 定义路由规则
43 |   const routes = [
44 |     // 通过重定向设置默认导航路由
45 |     {path: '/', redirect:'/one'},
46 |     {path: '/one', component: one},
47 |     {path: '/two', component: two}
48 |   ]
49 |   // 根据路由规则创建路由对象
50 |   const router = new VueRouter({
51 |     routes,
52 |     linkActiveClass: 'z-active'
53 |   })
54 | 
55 | 
56 |   /* 1. 创建 vue 实例对象 */
57 |   let vm = new Vue({
58 |     // 2. 声明vue的实例对象控制页面的哪个区域
59 |     el: '#app',
60 |     // 3. 声明vue控制区域可以使用的数据
61 |     data: {},
62 |     components: {
63 |       one, two
64 |     },
65 |     // 将路由router对象绑定到Vue实例
66 |     router
67 |   })
68 | </script>
69 | </html>
70 | <!--
71 | 1， 什么是 Vue Router？
72 | Vue Router 和 v-if/v-show 一样，都是用来切换组件的显示的
73 | v-if/v-show 是标记来切换（true、false）
74 | Vue Router 用哈希来切换（#xxx）
75 | 与 v-if/v-show 相比强大的是 Vue Router 不仅仅能够切换组件的显示，还能够在切换的时候传递参数
76 | 
77 | 2. Vue Router 使用
78 | - 导入 Vue Router
79 | - 定义路由规则
80 | - 根据路由规则创建路由对象
81 | - 将路径对象挂载到 Vue 实例中
82 | - 修改 URL 哈希值
83 | - 通过 <router-view> 渲染匹配的组件
84 | 
85 | 3. 注意点:
86 | - Vue Router 提供了一个专门用于设置 hash 的标签 router-link
87 | <router-link to='/one'></router-link>
88 | 
89 | - 默认情况下，Vue 使用 a标签来渲染 router-link标签
90 | 可以通过router-link标签 tag 属性来指定用什么标签渲染
91 | 
92 | 4. 导航激活状态
93 | 创建路由对象时设置 linkActiveClass 默认值为 router-link-active
94 | -->
95 | 


--------------------------------------------------------------------------------
/50-VueRouter-传递参数/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>50-VueRouter-传递参数</title>
 6 |   <script src="js/vue.js"></script>
 7 |   <script src="js/vue-router.js"></script>
 8 |   <style>
 9 |       .z-active {
10 |           background: red;
11 |       }
12 |   </style>
13 | </head>
14 | <body>
15 | <div id="app">
16 |   <router-link to="/one?name=zs&age=12" tag="button">切换到第一个界面</router-link>
17 |   <router-link to="/two/ls/13" tag="button">切换到第二个界面</router-link>
18 | 
19 |   <!-- 路由出口 -->
20 |   <router-view></router-view>
21 | </div>
22 | <template id="one">
23 |   <div class="onepage">
24 |     <p>第一个界面</p>
25 |   </div>
26 | </template>
27 | <template id="two">
28 |   <div class="twopage">
29 |     <p>第二个界面</p>
30 |   </div>
31 | </template>
32 | </body>
33 | <script>
34 |   // 定义组件
35 |   const one = {
36 |     template: '#one',
37 |     created() {
38 |       console.log(this.$route);
39 |       console.log(this.$route.query.name);
40 |       console.log(this.$route.query.age);
41 |     }
42 |   }
43 |   const two = {
44 |     template: '#two',
45 |     created() {
46 |       console.log(this.$route)
47 |       console.log(this.$route.params.name)
48 |       console.log(this.$route.params.age)
49 |     }
50 |   }
51 | 
52 |   // 定义路由规则
53 |   const routes = [
54 |     // 通过重定向设置默认导航路由
55 |     // {path: '/', redirect:'/one'},
56 |     {path: '/one', component: one},
57 |     {path: '/two/:name/:age', component: two}
58 |   ]
59 |   // 根据路由规则创建路由对象
60 |   const router = new VueRouter({
61 |     routes,
62 |     linkActiveClass: 'z-active'
63 |   })
64 | 
65 | 
66 |   /* 1. 创建 vue 实例对象 */
67 |   let vm = new Vue({
68 |     // 2. 声明vue的实例对象控制页面的哪个区域
69 |     el: '#app',
70 |     // 3. 声明vue控制区域可以使用的数据
71 |     data: {},
72 |     components: {
73 |       one, two
74 |     },
75 |     // 将路由router对象绑定到Vue实例
76 |     router
77 |   })
78 | </script>
79 | </html>
80 | <!--
81 | 1. Vue Router 传递参数
82 | 只要将 Vue Router 挂载到了 Vue 实例对象上，我们就可以通过 vue.$route拿到路由对象
83 | 只要能拿到路由对象，就可以通过路由对象拿到传递的参数
84 | 
85 | 2. 如何传递？
86 | 方式一：通过 URL 参数(?key=value&key=value)，通过 this.$route.query 获取
87 | 方式二：通过占位符传递(路由规则中/:key/:key，路径中/value/value)，通过 this.$route.params 获取
88 | 
89 | -->
90 | 


--------------------------------------------------------------------------------
/51-VueRouter-嵌套路由/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>51-VueRouter-嵌套路由</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <script src="js/vue-router.js"></script>
  8 |   <style>
  9 |       .z-active {
 10 |           background: red;
 11 |       }
 12 |   </style>
 13 | </head>
 14 | <body>
 15 | <div id="app">
 16 |   <router-link to="/one" tag="button">切换到第一个界面</router-link>
 17 |   <router-link to="/two" tag="button">切换到第二个界面</router-link>
 18 | 
 19 |   <!-- 路由出口 -->
 20 |   <router-view></router-view>
 21 | </div>
 22 | <template id="one">
 23 |   <div class="onepage">
 24 |     <p>第一个界面</p>
 25 |     <router-link to="/one/sub1" tag="button">切换到第一个子界面</router-link>
 26 |     <router-link to="/one/sub2" tag="button">切换到第二个子界面</router-link>
 27 | 
 28 |     <router-view></router-view>
 29 |   </div>
 30 | </template>
 31 | <template id="onesub1">
 32 |   <div class="onesub1">
 33 |     <p>第一个子界面</p>
 34 |   </div>
 35 | </template>
 36 | <template id="onesub2">
 37 |   <div class="onesub2">
 38 |     <p>第二个子界面</p>
 39 |   </div>
 40 | </template>
 41 | <template id="two">
 42 |   <div class="twopage">
 43 |     <p>第二个界面</p>
 44 |   </div>
 45 | </template>
 46 | </body>
 47 | <script>
 48 |   // 定义组件
 49 |   const onesub1 = {
 50 |     template: '#onesub1'
 51 |   }
 52 |   const onesub2 = {
 53 |     template: '#onesub2'
 54 |   }
 55 |   const one = {
 56 |     template: '#one',
 57 |     components: {
 58 |       onesub1, onesub2
 59 |     }
 60 |   }
 61 |   const two = {
 62 |     template: '#two'
 63 |   }
 64 | 
 65 |   // 定义路由规则
 66 |   const routes = [
 67 |     {
 68 |       path: '/one', component: one,
 69 |       children: [
 70 |         {path: 'sub1', component: onesub1},
 71 |         {path: 'sub2', component: onesub2}
 72 |       ]
 73 |     },
 74 |     {path: '/two', component: two}
 75 |   ]
 76 |   // 根据路由规则创建路由对象
 77 |   const router = new VueRouter({
 78 |     routes,
 79 |     linkActiveClass: 'z-active'
 80 |   })
 81 | 
 82 |   /* 1. 创建 vue 实例对象 */
 83 |   let vm = new Vue({
 84 |     // 2. 声明vue的实例对象控制页面的哪个区域
 85 |     el: '#app',
 86 |     // 3. 声明vue控制区域可以使用的数据
 87 |     data: {},
 88 |     components: {
 89 |       one, two
 90 |     },
 91 |     // 将路由router对象绑定到Vue实例
 92 |     router
 93 |   })
 94 | </script>
 95 | </html>
 96 | <!--
 97 | 1. 什么是嵌套路由？
 98 | 嵌套路由也称之为子路由，就是在被切换的组件中又切换其他子组件
 99 | 例如：在one界面中又有两个按钮，通过这两个按钮进一步切换one中的内容
100 | 
101 | // 定义路由规则
102 | const routes = [
103 |   {
104 |     path: '/one', component: one,
105 |     // 嵌套路由
106 |     children: [
107 |       {path: 'sub1', component: onesub1},
108 |       {path: 'sub2', component: onesub2}
109 |     ]
110 |   },
111 |   {path: '/two', component: two}
112 | ]
113 | // 根据路由规则创建路由对象
114 | const router = new VueRouter({
115 |   routes,
116 |   linkActiveClass: 'z-active'
117 | })
118 | -->
119 | 


--------------------------------------------------------------------------------
/52-VueRouter-命名视图/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>52-VueRouter-命名视图</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <script src="js/vue-router.js"></script>
  8 |   <style>
  9 |       .z-active {
 10 |           background: red;
 11 |       }
 12 |   </style>
 13 | </head>
 14 | <body>
 15 | <div id="app">
 16 |   <!-- 路由出口 -->
 17 |   <router-view name="name1"></router-view>
 18 |   <router-view name="name2"></router-view>
 19 | </div>
 20 | <template id="one">
 21 |   <div class="onepage">
 22 |     <p>第一个界面</p>
 23 |   </div>
 24 | </template>
 25 | <template id="two">
 26 |   <div class="twopage">
 27 |     <p>第二个界面</p>
 28 |   </div>
 29 | </template>
 30 | </body>
 31 | <script>
 32 |   // 定义组件
 33 |   const onesub1 = {
 34 |     template: '#onesub1'
 35 |   }
 36 |   const onesub2 = {
 37 |     template: '#onesub2'
 38 |   }
 39 |   const one = {
 40 |     template: '#one',
 41 |     components: {
 42 |       onesub1, onesub2
 43 |     }
 44 |   }
 45 |   const two = {
 46 |     template: '#two'
 47 |   }
 48 | 
 49 |   // 定义路由规则
 50 |   const routes = [
 51 |     {
 52 |       path: '/',
 53 |       components: {
 54 |         name1: one,
 55 |         name2: two
 56 |       },
 57 |     },
 58 |   ]
 59 |   // 根据路由规则创建路由对象
 60 |   const router = new VueRouter({
 61 |     routes,
 62 |     linkActiveClass: 'z-active'
 63 |   })
 64 | 
 65 |   /* 1. 创建 vue 实例对象 */
 66 |   let vm = new Vue({
 67 |     // 2. 声明vue的实例对象控制页面的哪个区域
 68 |     el: '#app',
 69 |     // 3. 声明vue控制区域可以使用的数据
 70 |     data: {},
 71 |     components: {
 72 |       one, two
 73 |     },
 74 |     // 将路由router对象绑定到Vue实例
 75 |     router
 76 |   })
 77 | </script>
 78 | </html>
 79 | <!--
 80 | 1. 什么是命名视图？
 81 | 命名视图和具名插槽很像，都是让不同的出口显示不同的内容，命名视图就是当路由地址被匹配的时候同时指定多个出口
 82 | 并且每个出口显示的内容不同
 83 | 
 84 | 2. 和匿名插槽一样，如果指定了多个 router-view, 那么当我们匹配路由地址时，每个 router-view 都会显示指定组件的内容
 85 | 如果想每个  router-view  显示不同的内容，就需要使用命名视图
 86 | // 定义路由规则
 87 | const routes = [
 88 |   {
 89 |     path: '/',
 90 |     components: {
 91 |       name1: one,
 92 |       name2: two
 93 |     },
 94 |   },
 95 | ]
 96 | 
 97 | <router-view name="name1"></router-view>
 98 | <router-view name="name2"></router-view>
 99 | -->
100 | 


--------------------------------------------------------------------------------
/53-VueRouter-watch属性/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>53-VueRouter-watch属性</title>
  6 |   <script src="js/vue.js"></script>
  7 |   <script src="js/vue-router.js"></script>
  8 |   <style>
  9 |       .z-active {
 10 |           background: red;
 11 |       }
 12 |   </style>
 13 | </head>
 14 | <body>
 15 | <div id="app">
 16 |   <p>使用监听键盘抬起方法实现加法</p>
 17 |   <input type="text" v-model="num1" @keyup="change1">
 18 |   <span> + </span>
 19 |   <input type="text" v-model="num2" @keyup="change2">
 20 |   <span> = </span>
 21 |   <input type="text" v-model="result" disabled>
 22 | 
 23 |   <hr>
 24 |   <p>使用watch属性实现加法</p>
 25 |   <input type="text" v-model="num3">
 26 |   <span> + </span>
 27 |   <input type="text" v-model="num4">
 28 |   <span> = </span>
 29 |   <input type="text" v-model="result2" disabled>
 30 | 
 31 |   <hr>
 32 |   <p>使用watch属性实现监听路由变化</p>
 33 |   <router-link to="/one" tag="button">切换到第一个界面</router-link>
 34 |   <router-link to="/two" tag="button">切换到第二个界面</router-link>
 35 | 
 36 |   <!-- 路由出口 -->
 37 |   <router-view></router-view>
 38 | </div>
 39 | <template id="one">
 40 |   <div class="onepage">
 41 |     <p>第一个界面</p>
 42 |   </div>
 43 | </template>
 44 | <template id="two">
 45 |   <div class="twopage">
 46 |     <p>第二个界面</p>
 47 |   </div>
 48 | </template>
 49 | </body>
 50 | <script>
 51 |   // 定义组件
 52 |   const one = {
 53 |     template: '#one'
 54 |   }
 55 |   const two = {
 56 |     template: '#two'
 57 |   }
 58 | 
 59 |   // 定义路由规则
 60 |   const routes = [
 61 |     // 通过重定向设置默认导航路由
 62 |     // {path: '/', redirect:'/one'},
 63 |     {path: '/one', component: one},
 64 |     {path: '/two', component: two}
 65 |   ]
 66 |   // 根据路由规则创建路由对象
 67 |   const router = new VueRouter({
 68 |     routes,
 69 |     linkActiveClass: 'z-active'
 70 |   })
 71 | 
 72 |   /* 1. 创建 vue 实例对象 */
 73 |   let vm = new Vue({
 74 |     // 2. 声明vue的实例对象控制页面的哪个区域
 75 |     el: '#app',
 76 |     // 3. 声明vue控制区域可以使用的数据
 77 |     data: {
 78 |       num1: 0,
 79 |       num2: 0,
 80 |       result: 0,
 81 |       num3: 0,
 82 |       num4: 0,
 83 |       result2: 0,
 84 |     },
 85 |     watch: {
 86 |       num3(newValue, oldValue) {
 87 |         this.result2 = parseInt(this.num3) + parseInt(this.num4)
 88 |       },
 89 |       num4(newValue, oldValue) {
 90 |         this.result2 = parseInt(this.num3) + parseInt(this.num4)
 91 |       },
 92 | 
 93 |       "$route.path"(newValue, oldValue) {
 94 |         console.log(newValue, oldValue)
 95 |       }
 96 |     },
 97 |     methods: {
 98 |       change1() {
 99 |         this.result = parseInt(this.num1) + parseInt(this.num2)
100 |       },
101 |       change2() {
102 |         this.result = parseInt(this.num1) + parseInt(this.num2)
103 |       }
104 |     },
105 |     components: {
106 |       one, two
107 |     },
108 |     // 将路由router对象绑定到Vue实例
109 |     router
110 |   })
111 | </script>
112 | </html>
113 | <!--
114 | 1. 什么是watch属性
115 |  watch 属性是专门用于监听数据变化的，只要数据发生了变化，就会自动调用对应数据的回调方法
116 | 
117 | 2. watch 监听路由变化
118 | watch 属性不仅仅能够监听数据的变化，还能够监听路由地址的变化
119 | 在开发中我们可以通过watch来判断当前界面是从哪个界面跳转过来的
120 | 
121 | 3. 路由地址获取： $route.path
122 | -->
123 | 


--------------------------------------------------------------------------------
/54-Vue生命周期方法/images/lifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zsy0216/vue-learnning/82c2902639c1a0bfc623fab6247c195593eb8cae/54-Vue生命周期方法/images/lifecycle.png


--------------------------------------------------------------------------------
/54-Vue生命周期方法/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>54-Vue-生命周期方法</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <button @click="change">切换</button>
11 |   <one v-if="isShow"></one>
12 |   <p>{{msg}}</p>
13 |   <!-- v-if 实现切换是通过删除和重新创建来完成的 -->
14 |   <img src="images/lifecycle.png" alt="生命周期图示" width="50%">
15 | </div>
16 | <template id="one">
17 |   <p>测试组件</p>
18 | </template>
19 | </body>
20 | <script>
21 |   const one = {
22 |     template: '#one',
23 |     beforeDestroy() {
24 |       console.log("beforeDestroy")
25 |     },
26 |     destroyed() {
27 |       console.log("destroyed")
28 |     }
29 |   }
30 |   /* 1. 创建 vue 实例对象 */
31 |   let vm = new Vue({
32 |     // 2. 声明vue的实例对象控制页面的哪个区域
33 |     el: '#app',
34 |     // 3. 声明vue控制区域可以使用的数据
35 |     data: {
36 |       msg: "this is test msg.",
37 |       isShow: true
38 |     },
39 |     methods: {
40 |       change() {
41 |         this.isShow = !this.isShow
42 |       }
43 |     },
44 |     components: {
45 |       one
46 |     },
47 |     beforeCreate() {
48 |       console.log("beforeCreate")
49 |     },
50 |     created() {
51 |       /* 这里是最早能访问到 Vue 实例中的 data 和 methods 的生命周期方法 */
52 |       console.log("created")
53 |     },
54 |     beforeMount() {
55 |       console.log("beforeMount")
56 |     },
57 |     mounted() {
58 |       console.log("mounted")
59 |     },
60 |     beforeUpdate() {
61 |       /* 这里是最后能访问到 Vue 实例中的 data 和 methods 的生命周期方法 */
62 |       console.log("beforeUpdate")
63 |     },
64 |     updated() {
65 |       console.log("updated")
66 |     }
67 |   })
68 | </script>
69 | </html>
70 | <!--
71 | 1. 什么是生命周期方法?
72 | 和 webpack 的生命周期方法一样，都是在从生到死的特定阶段调用的方法
73 | ps: 生命周期钩子 = 生命周期函数 = 生命周期方法
74 | 
75 | 2. Vue 生命周期方法分类
76 | - 创建期间的生命周期方法：
77 |   beforeCreate(): 刚创建Vue实例，此时还没有初始化data和methods
78 |   created(): 此时已经初始化data和methods
79 |   beforeMount(): 此时已经完成了模板的编译，还没有挂载生成的元素到界面
80 |   mounted(): 此时已经完成了模板的渲染，已经可以拿到页面上渲染之后的内容了
81 | 
82 | - 运行期间的生命周期方法
83 |   beforeUpdate(): 此时表示实例中的数据被修改了，但此时界面上还没有同步更新
84 |   updated(): 此时数据被修改且界面内容也已经完成了更新
85 | 
86 | - 销毁期间的生命周期方法
87 |   beforeDestroy(): 此时表示组件即将被销毁，这里仍能访问实例中的data和methods
88 |   destroyed(): 此时表示组件已经完全销毁，组件所有内容均不可访问
89 | 
90 | -->
91 | 


--------------------------------------------------------------------------------
/55-Vue特殊特性/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>55-Vue特殊特性</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 |   <button @click="fn1">通过原生方法获取DOM</button>
11 |   <button @click="fn2">通过ref获取DOM</button>
12 |   <p ref="myP">这是p元素标签渲染的内容</p>
13 |   <one ref="myOne" id="myone"></one>
14 | </div>
15 | <template id="one">
16 |   <div>
17 |     <p>这里是组件渲染的内容</p>
18 |   </div>
19 | </template>
20 | </body>
21 | <script>
22 |   Vue.component('one', {template: '#one'})
23 | 
24 |   /* 1. 创建 vue 实例对象 */
25 |   let vue = new Vue({
26 |     // 2. 声明vue的实例对象控制页面的哪个区域
27 |     el: '#app',
28 |     // 3. 声明vue控制区域可以使用的数据
29 |     data: {},
30 |     methods: {
31 |       fn1() {
32 |         /*
33 |         * 通过原生方法获取 DOM 元素
34 |         * 这里获取的都是原生的 DOM 元素对象
35 |         * 不推荐
36 |         * */
37 |         console.log(document.querySelector("p"));
38 |         console.log(document.querySelector("#myone"));
39 |       },
40 |       fn2() {
41 |         /*
42 |         * 通过ref方式获取DOM
43 |         * 使用ref可以获取组件对象
44 |         * */
45 |         console.log(this.$refs);
46 |         console.log(this.$refs.myP);
47 |         console.log(this.$refs.myOne);
48 |       }
49 |     }
50 |   })
51 | </script>
52 | </html>
53 | <!--
54 | 1. Vue 特殊特性
55 | Vue 特点：数据驱动界面更新，无需操作DOM来更新界面，也就是说Vue不推荐我们直接操作DOM
56 | 但是在开发中有时候我们确实需要拿到DOM后来操作DOM；
57 | 
58 | 那么如果不推荐使用原生的语法操作 DOM，我们应该如何获取 DOM？
59 | 在 Vue 中如果想要拿到 DOM 元素我们可以通过 ref 来获取
60 | 
61 | 2. ref 使用
62 | - 在需要获取的元素上添加 ref 属性，例如 <p ref="myp">段落</p>
63 | - 在使用的地方通过 this.$ref.xxx 获取，例如 this.$ref.myp
64 | 
65 | 3. ref 特点
66 | ref 添加到DOM元素上，拿到的就是 DOM 元素
67 | ref 添加到组件上，拿到的就是组件
68 | -->
69 | 


--------------------------------------------------------------------------------
/56-Vue-组件渲染方式/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>56-Vue-组件渲染方式</title>
 6 |   <script src="js/vue.js"></script>
 7 | </head>
 8 | <body>
 9 | <div id="app">
10 | <!--  <one></one>-->
11 | </div>
12 | <template id="one">
13 |   <div>
14 |     <p> 组件 one</p>
15 |   </div>
16 | </template>
17 | </body>
18 | <script>
19 |   Vue.component("one", {
20 |     template: '#one'
21 |   })
22 | 
23 |   /* 1. 创建 vue 实例对象 */
24 |   let vm = new Vue({
25 |     // 2. 声明vue的实例对象控制页面的哪个区域
26 |     el: '#app',
27 |     // 3. 声明vue控制区域可以使用的数据
28 |     data: {},
29 |     /*render(createElement) {
30 |       return createElement("one")
31 |     }*/
32 |     // render: createElement => createElement("one")
33 |     render: h => h("one")
34 |   })
35 | </script>
36 | </html>
37 | <!--
38 | 1. Vue 渲染组件的两种方式
39 | - 先定义注册组件，然后在 Vue 实例中当作标签来使用
40 | - 先定义注册组件，然后通过 Vue 实例的 render 方法来渲染
41 | 
42 | 2. 两种渲染方法的区别
43 | - 当作标签来渲染，不会覆盖 Vue 实例控制区域
44 | - 通过 render 渲染，会覆盖 Vue 实例控制区域
45 | 
46 | 3. render 使用箭头函数简写过程
47 | 形式一：
48 | render(createElement) {
49 |   return createElement("one")
50 | }
51 | 
52 | 形式二：
53 | render: createElement => createElement("one")
54 | 
55 | 形式三：
56 | render: h => h("one")
57 | 
58 | -->
59 | 


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