Vue框架

目录1. Vue 的基本认识1.1. 官网1.2. 介绍描述1.3. Vue 的特点1.4. 与其它前端 JS 框架的关联1.5. Vue 扩展插件2 Vue 的基本使用2.1开发者工具调试Vue.js devtools_3.1.2_02.2框架使用方式2.3 框架使用2.4 Vue数据单向传递2.4.1 MVVM模型2.4.2 Vue中的MVVM的划分2.4.3 Vue中数据的单向传递2.5 V

楚璃轩

5441人浏览 · 2021-06-30 20:29:36

楚璃轩 · 2021-06-30 20:29:36 发布

1. Vue 的基本认识
- 1.1. 官网
- 1.2. 介绍描述
- 1.3. Vue 的特点
- 1.4. 与其它前端 JS 框架的关联
- 1.5. Vue 扩展插件
2 Vue 的基本使用
- 2.1开发者工具调试Vue.js devtools_3.1.2_0
- 2.2 框架使用方式
- 2.3 框架使用
- 2.4 Vue数据单向传递
- 2.5 Vue数据双向绑定
3 常见指令
- 3.1 什么是指令
- 3.2 vue数据绑定的特点
4 计算属性
- 4.1 定义计算属性
- 4.2 计算属性和函数的区别
5 过滤器
- 5.1 自定义全局过滤器
- 5.2 定义局部过滤器
- - 应用场景：格式化时间
6 过渡动画
- 6.1 如何给Vue控制的元素添加过渡动画
- 6.2 过渡动画结合钩子函数
- 6.3 Velocity实现动画
- 6.4 Animate自定义实现动画
- 6.5 列表动画
7 组件
- 7.1 自定义全局组件
- 7.2 自定义局部组件
- - 全局组件和局部组件的区别：
  - 自定义一个局部组件
- 7.3 组件中的data和methods
- 7.4 组件切换
- 7.5 动态组件
- 7.6 组件动画
- 7.7 父子组件
- 7.8 组件命名注意点
- 7.9 多级传递
- 7.10 插槽
- 7.11 组件渲染方式
8 Vuex
- 8.1 使用步骤
- 8.2 getters 计算属性
- 8.3 Router切换组件
- watch属性
9 Vue生命周期方法
- 9.1 什么是生命周期方法？
- 9.2 Vue生命周期方法分类
10 特殊特性
- 10.1 vue特殊特性
- 10.2 ref使用
11 Vue-CLI
- 11.1基本使用
- 11.2 安装和使用Vue-cli
- - 手动配置
- 11.3 项目结构

1. Vue 的基本认识

1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.2. 介绍描述

渐进式 JavaScript 框架
作者: 尤雨溪(一位华裔前 Google 工程师)
作用: 动态构建用户界面

1.3. Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.4. 与其它前端 JS 框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

1.5. Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

2 Vue 的基本使用

2.1开发者工具调试Vue.js devtools_3.1.2_0

1）Vue.js devtools_3.1.2_0.crx改成rar格式

2）解压

3）谷歌浏览器

4）再次打开浏览器

5）F12

2.2 框架使用方式

传统下载导入使用
vue-cli安装导入使用

2.3 框架使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">{{name}}</div>
		
		<script type="text/javascript">
//			创建一个Vue实例
			let vue=new Vue({
//				Vue实例对象,将来需要控制界面上的哪个区域
				el:"#app",
//				告诉vue的实例对象,被控制区域的数据是什么
				data:{
					name:"我是vue"
				},
			})
		</script>
	</body>
</html>

2.4 Vue数据单向传递

2.4.1 MVVM模型

M：model 数据模型（保存数据，处理数据业务逻辑）

V：view 视图（展示数据，与用户交互）

VM：View Model 数据模型和视图的桥梁

MVVM设计模式最大的特点就是支持数据的双向传递

数据可以从M --> VM --> V

也可以从 V --> VM --> M

2.4.2 Vue中的MVVM的划分

被控制的区域:	view
Vue实例对象:	view model
实例对象中的data:	model

2.4.3 Vue中数据的单向传递

“数据”交给“Vue实例对象”，Vue实例对象将数据交给“页面”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!--MVVM模型中的view-->
		<div id="app">{{name}}</div>
		
		<script type="text/javascript">
//			MVVM模型中的view model
			let vue=new Vue({
				el:"#app",
//				MVVM模型中model
				data:{
					name:"我是vue"
				},
			})
		</script>
	</body>
</html>

2.5 Vue数据双向绑定

默认情况下是单向传递的

由于Vue基于MVVM设计模式，所以可以提供双向传递的能力

在< input> < textarea> < select>元素上可以用v-model指令创建双向绑定数据（只有上面三个标签可以使用v-model）

注意：v-model会忽略所有表单元素的 value checked selected特性的初始值，而总是将Vue实例的数据作为数据来源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="text" v-model="msg"/>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					msg:"我是vue"
				}
			})
		</script>
	</body>
</html>

3 常见指令

3.1 什么是指令

指令就是vue内部提供的一些自定义属性

这些属性中封装好了vue内部实现的一些功能

3.2 vue数据绑定的特点

只要数据发生变化，界面就会跟着变化

v-once指令

让界面不要跟着数据变化，只渲染一次

v-cloak指令

数据渲染之后自动显示元素

vue数据绑定过程

先将未绑定的数据的界面展示给用户
然后再根据模型中的数据和控制的区域生成绑定数据之后的html代码
最后在将绑定数据之后的html渲染到界面上

正是在最终的html被生成渲染之前会显示模板内容

所以如果用户网络比较慢或者网络性能比较差，那么用户会看到模板内容

解决：

利用[v-cloak] {display:none}默认先隐藏为渲染的界面，等到生成html渲染后在重新显示

v-text指令

相当于innerText

会覆盖原有内容，且不会解析html

v-html指令

相当于innerHTML

会覆盖原有内容，会解析html

注意：（插值方式：{{}}不会解析HTML，和v-text一样）

v-if指令

条件渲染，取值为true就渲染元素

为false时，不会创建这个元素

取值可以从模型中获取数据

取值可以直接赋值一个表达式

可以配合if-else使用

单分支：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="age>18">成年人</p>
			<p v-else >未成年</p>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					age:20
				}
			})
		</script>
	</body>
</html>

多分支：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="type===a">90+</p>
			<p v-else-if="type===b">80+</p>
			<p v-else-if="type===c">70+</p>
			<p v-else="type===d">70以下</p>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					type:30
				}
			})
		</script>
	</body>
</html>

注意：v-else不能单独出现；v-if和v-else结合之后其中间的不能插入其他内容

v-show指令

和v-if类似，取值为真时显示

取值可以是条件表达式

取值为假时，还是会创建该元素，只是display: ”none”;

操作的是该元素display属性

注意：频繁操作切换元素的时候用v-show,否则用v-if

v-for指令

相当于JS中的for in循环，可以根据数据多次渲染元素

可以遍历数组、字符、数字、对象

（value,index）

v-for注意点

1 就地复用原则

渲染元素的时候会先看缓存中有无需要渲染的元素：

没有——创建放到缓存

有——直接复用

2 Vue中数据发生改变，就会重新渲染

因此在元素之前插入的时候，就会发生异常

解决方法——v-bind绑定一个唯一的key

注意：key不要用index去作为值

数组：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">

			<ul>
				<li v-for="(value,index) in list">{{index}}---{{value}}</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			let vue=new Vue({
				el:"#app",
				data:{
					list:["1","2","3","4"]
				}
			})
		</script>
	</body>
</html>

字符串：

<ul>
	<li v-for="(value,index) in 'abcdef'">{{index}}---{{value}}</li>
</ul>

数字：

<ul>
	<li v-for="(value,index) in 7">{{index}}---{{value}}</li>
</ul>

对象

<div id="app">
	<ul>
        <li v-for="(value,key) in obj">{{key}}---{{value}}</li>
    </ul>
</div>
		
<script type="text/javascript">
	let vue=new Vue({
		el:"#app",
		data:{
			obj:{
				name:"张三",
				age:80
			}
		}
	})
</script>

v-bind指令

专门用于给元素的属性绑定数据（即强制绑定）

格式：

v-bind:属性名称=”绑定的数据”

:属性名称=”绑定的数据”

赋值的数据可以是任意一个合法的JS表达式

<div id="app">
	<input type="text" v-bind:value="name" />
</div>

<script type="text/javascript">
	let vue = new Vue({
		el: "#app",
		data: {
			name: "张三",
		}
	})
</script>

绑定类名class

格式（通过v-bind）

:class=”[‘需要绑定的类名1’, ’需要绑定的类名2’…]”

:class={‘需要绑定的类名1’:true/false,’ 需要绑定的类名2’:true/false},true和false可以是vue实例对象中data中的数据变量

注意点：

_1 不能直接:class=”类名”

_2 第一种方式,[]外面也需要引号，[]内每个类名也需要引号，[]内支持三目运算符==:class=”[isTrue?‘类名1’:’’]”==

_3 第二种方式中，key是类名，value是布尔值

4_整个{}可以是Model中的数据

:class=’obj’
data:{
	obj: {
		‘red’:true
		‘bold’:true
	}
}

绑定样式style

和绑定类名一样，v-bind回去Model中查找

样式放到对象里

<div id="app">
	<p :style="[obj1]">1234567</p>
</div>

<script type="text/javascript">
	let vue = new Vue({
		el: "#app",
		data: {
			obj1:{
				"color":'red',
				"font-size":'100px'
			}
		}
	})
</script>

注意：

取值用引号包裹

样式的名称带-时候，需要引号包裹

v-on

专门用于给元素绑定监听事件

格式：

v-on:事件名称=”回调函数名”

@事件名称=”回调函数名”

事件触发后，会去Model的methods中找回调函数

注意点：事件不需要写on

赋值是一个回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<button v-on:click="c">按钮</button>
		</div>

		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
				},
				methods:{
					c(){
						alert("来了")
					}
				}
			})
		</script>
	</body>
</html>

v-on事件修饰符

.once	只触发一次回调
.prevent	调用event.preventDefault()
.self	只当事件是从侦听器绑定的元素本身触发时才触发回调
.stop	调用event.stopPropagation()
.capture	添加事件监听器时使用capture模式

v-on注意点

1 绑定回调函数名称的时候，后面可以加() ,也可以不加

  @click = ‘myFn’  
  @click = ‘myFn()’

2 可以传递参数

@click = “myFn(‘yjx’,33)” //普通数据  

@click = “myFn($event)” //原生事件对象

3 回调函数中使用Model中的data中的数据需要加this.

  let vue = new Vue({  
  	data:{
  		msg:’yjx’
  	},  
  	methods:{    
  		myFn:function(){      
  			console.log(this.msg);  
      }  
    }  
  });

v-on按键修饰符

1 什么是按键修饰符？

可以通过按键修饰符监听特定按键触发的事件

2 按键修饰符分类

2.1系统预定义修饰符

2.2 自定义修饰符

@keyup：键盘按下事件

常用：

.enter 
.tab  
.delete (捕获“删除”和“退格”键)  
.esc  
.space  
.up  
.down  
.left  
.right

自定义按键修饰符别名（通过keyCodes）：

Vue.config.keyCodes.f1 = 112

说明：Vue.config.keyCodes.自定义名称= 原来按键对应的keyCodes值

本来是：

加入上述红色字体那一句之后就可以：

自定义指令

自定义全局指令directive

在Vue中除了可以使用内置的指令外，还可以自定义指令

自定义全局指令语法

directive方法接受两个参数:
第一个参数:指令的名称
第二个参数:对象

Vue.directive(‘自定义指令名称’,{  
 	声明周期名称:function(el){    
 		指令业务逻辑代码 
    }  
  })

注意：自定义指令定义时候的名称不需要写”v-”使用时再写

指令可以在不同的声明周期阶段执行

属性	含义
inserted	绑定指令的元素被添加到父元素上的时候执行
bind	指令被绑定到元素上的时候执行，inserted是元素渲染到dom上之后的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<p v-color>我是段落哦</p>
		</div>

		<script type="text/javascript">
			
			
			Vue.directive("color",{
				bind:function(e){
					e.style.color="red";
				}
			})
			let vue = new Vue({
				el: "#app",
				data: {
					
				},
				methods:{
				
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<input type="text" v-focus />
		</div>

		<script type="text/javascript">	
			
			Vue.directive("focus",{
				inserted:function(e){
					e.focus();
				}
			})
			let vue = new Vue({
				el: "#app",
				data: {
					
				},
				methods:{
				
				}
			})
		</script>
	</body>
</html>

自定义指令传参directive

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<p v-color="'blue'">我是段落哦</p>
		</div>

		<script type="text/javascript">

			Vue.directive("color",{
				bind:function(el,obj){
					el.style.color=obj.value;
				}
			});
			let vue = new Vue({
				el: "#app",
				data: {
				}
			})
		</script>
	</body>
</html>

参数可以是Model的data中的数据，就不需要引号括起来了，因为是变量了。

自定义局部指令directives

自定义全局指令的特点：任何一个Vue实例控制的区域中都可以使用

自定义局部指令的特点：只能在自定义的那个Vue实例中使用

如何定义一个局部指令：给创建Vue实例传递的对象添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
		<div id="app">
			<p v-color="'blue'">我是段落哦</p>
		</div>

		<script type="text/javascript">

			Vue.directive("color",{
				bind:function(el,obj){
					el.style.color=obj.value;
				}
			});
			let vue = new Vue({
				el: "#app",
				data: {
					
				},
				methods:{
					
				},
				directives:{
					"color":{
						bind:function(el,obj){
							el.style.color=obj.value;
						}
					}
				}
			})
		</script>
	</body>
</html>

4 计算属性

1 插值语法特点

可以在{{}}中编写合法的JS表达式

2 在插值语法中编写JS表达式的缺点

没有代码提示

语句过于复杂不利于维护

3 如何解决

对于复杂逻辑，应当使用计算属性

4.1 定义计算属性

computed:{ }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<p >{{message}}</p>
	</div>

	<script type="text/javascript">
		Vue.directive("color", {
			bind: function(el, obj) {
				el.style.color = obj.value;
			}
		});
		let vue = new Vue({
			el: "#app",
			data: {
				message: 'Hello'
			},
			computed: {
				// 计算属性的 getter
				reversedMessage: function() {
					// `this` 指向 vm 实例
					return this.message.split('').reverse().join('')
				}
			}
		})
	</script>
	</body>

</html>

注意点：定义的时候是通过一个函数返回数据，使用的时候不能加括号。因为其实属性，不是方法

4.2 计算属性和函数的区别

函数	计算属性
每次调用都会执行	只要返回的结果没发生变化，就只会执行一次
数据经常发生变化的时候使用该函数	由于会将返回的结果进行缓存，如果返回的数据不经常发生变化，使用计算属性的性能比使用函数高

5 过滤器

5.1 自定义全局过滤器

1 什么是过滤器？

和函数和计算属性一样是用来处理数据的

但一般用于格式化插入的文本数据

2 如何自定义全局过滤器？

Vue.filter(“过滤器名称”, ”过滤器处理函数”);

默认情况下处理数据的函数接收一个参数（要处理的数据）

3 如何使用全局过滤器？

:value = “msg | 过滤器名称”

Vue会把数据交给指定的过滤器处理之后再返回

4 注意点

只能在插值语法和v-bind中使用

过滤器可以连续使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<p>{{message | ff}}</p>
	</div>

	<script type="text/javascript">
		Vue.filter("ff", function(value) {
			value=value.replace(/学院/g,"大学");
			return value;
		});
		let vue = new Vue({
			el: "#app",
			data: {
				message: "保定学院,石家庄学院,邯郸学院"
			},
		})
	</script>
	</body>

</html>

5.2 定义局部过滤器

1 自定义全局过滤器的特点：任何一个Vue控制的区域都可以使用

2 自定义局部过滤器的特点：只能在自定义的那个Vue实例中使用

3 如何自定义一个局部指令

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<p>{{message | ff}}</p>
	</div>

	<script type="text/javascript">
		let vue = new Vue({
			el: "#app",
			data: {
				message: "保定学院,石家庄学院,邯郸学院"
			},
			filters: {
				"ff": function(value) {
					value = value.replace(/学院/g, "大学");
					return value;
				}
			}
		})
	</script>
	</body>

</html>

应用场景：格式化时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<p>{{time|dateFormat("yyyy-MM-dd")}}</p>
	</div>

	<script type="text/javascript">
		Vue.filter("dateFormat",function(value,fmStr){
//			console.log(value)
			let datea = new Date(value);
			let year = datea.getFullYear();
			let month = datea.getMonth()+1+"";
			let day = datea.getDate()+"";
			let hour = datea.getHours()+"";
			let minute = datea.getMinutes()+"";
			let second = datea.getSeconds()+"";
			if(fmStr&&fmStr==="yyyy-MM-dd"){
				return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")}`;
			}
			return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")} ${hour .padStart(2,"0")}:${minute .padStart(2,"0")}:${second .padStart(2,"0")}`;

		});

		let vue = new Vue({
			el: "#app",
			data: {
				time: Date.now()
			}
		})
	</script>
	</body>

</html>

过滤器调用的时候可以传递参数

6 过渡动画

6.1 如何给Vue控制的元素添加过渡动画

将需要执行动画的元素放到transition组件中
当transition组件中的元素显示时会自动查找，v-enter v-enter-active v-enter-to类

当transition组件中的元素隐藏时会自动查找，v-leave v-leave-active v-leave-to类
只需要在v-enter v-leave-to中指定动画开始的状态，在v-enter-active和v-leave-active中指定动画执行的状态，即可完成过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: red;
			}
			.v-enter{
				opacity: 0;
			}
			.v-enter-to{
				opacity: 1;
			}
			.v-entre-active{
				transition: all 3s;
			}
			.v-leave{
				opacity: 1;
			}
			.v-leave-to{
				opacity: 2;
			}
			.v-leave-active{
				transition: all 3s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="toggle">按钮</button>
			<div class="box" v-show="isShow"></div>
		</div>
		
		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
					isShow:false
				},
				methods:{
					toggle(){
						this.isShow=!this.isShow
					}
				}
			})
		</script>
	</body>
</html>

注意点：

1 给哪个元素添加，就将该元素放到transition组件中

2 一个transition组件只能放一个元素；多少个元素需要添加动画就需要创建多少个transition包起来

3 想让元素一进到网页就有过渡效果，需要给其的transition组件添加属性appear

4 指定不同元素不同过渡效果的时候，可以给元素的transition组件添加不同的name

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: red;
				margin-bottom: 20px;
			}
			.one-enter{
				opacity: 0;
			}
			.one-enter-to{
				opacity: 1;
			}
			.one-entre-active{
				transition: all 5s;
			}
			.two-entre{
				opacity: 0;
			}
			.two-enter-to{
				opacity: 1;
				
			}
			.two-entre-active{
				transition: all 5s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="toggle">按钮</button>
			<transition appear name="one">
				<div class="box" v-show="isShow"></div>
			</transition>
			<transition appear name="two">
				<div class="box" v-show="isShow"></div>
			</transition>
		</div>
		
		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
					isShow:false
				},
				methods:{
					toggle(){
						this.isShow=!this.isShow
					}
				}
			})
		</script>
	</body>
</html>

6.2 过渡动画结合钩子函数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
 
 
</transition>

如果不想让transition组件去找类名(v-enter那些)只需要给其添加v-bind:css=”false”就可以了（一般使用了钩子函数就得加）
如果是通过JS钩子函数实现过渡动画，则必须在动画执行过程的回调函数上写 el.offsetWidth / el.offsetHeight
动画执行完毕之后一定要调用done 不然后续的afterEnter钩子函数不会被执行
如果想让元素一进来就有动画，最好在enter中延迟一下再调用done方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<button @click="toggle">按钮</button>
			<!--如果不想让transition组件去找类名(v-enter那些)
			只需要给其添加v-bind:css=”false”就可以了（一般使用了钩子函数就得加）-->
			<transition v-bind:css="false" appea
						v-on:before-enter="beforeEnter" 
						v-on:enter="enter" 
						v-on:after-enter="afterEnter">
						
				<div class="box" v-show="isShow"></div>
			</transition>

		</div>

		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
					isShow: true
				},
				methods: {
					toggle() {
						this.isShow = !this.isShow
					},
					beforeEnter(el){
						el.style.opacity="0";
					},
					enter(el,done){
//						如果是通过JS钩子函数实现过渡动画，
//						则必须在动画执行过程的回调函数上写 el.offsetWidth / el.offsetHeight
						el.offsetHeight;
						el.style.transition="all 3s"
						//动画执行完毕之后一定要调用done 不然后续的afterEnter钩子函数不会被执行
//						done();  
//						如果想让元素一进来就有动画，最好在enter中延迟一下再调用done方法
						setTimeout(function(){
							done();
						},0);
					},
					afterEnter(el){
						el.style.opacity="1";
						el.style.marginLeft="300px";
					}
				}
			})
		</script>
	</body>

</html>

6.3 Velocity实现动画

Velocity是一个动画第三方库

导相关包
使用Velocity

在enter钩子函数中写入

Velocity(el,{/*css样式*/},时间);
done();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/velocity.min.js"></script>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="toggle">按钮</button>
			<!--如果不想让transition组件去找类名(v-enter那些)
			只需要给其添加v-bind:css=”false”就可以了（一般使用了钩子函数就得加）-->
			<transition v-bind:css="false" appear
						v-on:before-enter="beforeEnter" 
						v-on:enter="enter" 
						v-on:after-enter="afterEnter">
						
				<div class="box" v-show="isShow"></div>
			</transition>

		</div>

		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {
					isShow:false
				},
				methods: {
					toggle() {
						this.isShow = !this.isShow
					},
					beforeEnter(el){
					},
					enter(el,done){
						Velocity(el,{opacity:1,marginLeft:"300px"},3000);	
						done();	
					},
					afterEnter(el){
					}
				}
			})
		</script>
	</body>
</html>

6.4 Animate自定义实现动画

导包

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

网址：https://animate.style/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="app">
			<button @click="show = !show">
				Toggle render
			  </button>
			  <transition name="custom-classes-transition"
				enter-active-class="animated tada"
				leave-active-class="animated bounceOutRight"
			  >
				<p v-if="show">hello</p>
			  </transition>
		</div>

		<script type="text/javascript">
		
			let vue = new Vue({
				el: "#app",
				data: {
					show:true
				}		
			})
		</script>
	</body>
</html>

绑定个动画执行中类名==:enter-active-class=”animated 动画效果名”==

6.5 列表动画

<transition-group>

</transition-group>

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			li {
				border: 1px dashed #999;
				margin: 5px;
				line-height: 35px;
				padding-left: 5px;
				font-size: 12px;
				width: 100%;
			}
			
			li:hover {
				background-color: hotpink;
				transition: all 0.8s ease;
			}
			
			.v-enter,
			.v-leave-to {
				opacity: 0;
				transform: translateY(80px);
			}
			
			.v-enter-active,
			.v-leave-active {
				transition: all 0.6s ease;
			}
			/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
			
			.v-move {
				transition: all 0.6s ease;
			}
			
			.v-leave-active {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<div>
				<label>
        Id:
        <input type="text" v-model="id">
      </label>

				<label>
        Name:
        <input type="text" v-model="name">
      </label>
				<!-- 添加数据  -->
				<input type="button" value="添加" @click="add">
			</div>

			<!-- <ul> -->
			<!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
			<!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
			<!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
			<!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
			<transition-group appear tag="ul">
				<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
					{{item.id}} --- {{item.name}}
				</li>
			</transition-group>
			<!-- </ul> -->

		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					list: [{
							id: 1,
							name: '赵高'
						},
						{
							id: 2,
							name: '秦桧'
						},
						{
							id: 3,
							name: '严嵩'
						},
						{
							id: 4,
							name: '魏忠贤'
						}
					]
				},
				methods: {
					add() {
						this.list.push({
							id: this.id,
							name: this.name
						})
						this.id = this.name = ''
					},
					del(i) {
						this.list.splice(i, 1)
					}
				}
			});
		</script>
	</body>

</html>

注意点：

默认情况下transition-group会把所有执行动画的元素放到一个span中，因此代码的结构是ul>span>li
如何解决：指定tag属性为ul

新添加的元素注意保证key不一样，才能执行规定好的动画
专门在Mode中创建一个属性id作为key的值，每次修改数据顺带修改该id

7 组件

7.1 自定义全局组件

Vue两大核心：

1 数据驱动界面改变

2 组件化

网页中，每个大的界面拆分成多个小界面，每个小界面对应一个组件其拆分过程就是组件化

组件化优点：

简化Vue实例的代码

提高复用性

创建全局组件（三步）

1 创建组件构造器

let Profile = Vue.extend({
			template: `
					<div>
				  		<img src=”images/fm.jpg”>
						<p>我是描述信息</p>
					</div>
					`
		});

2 注册已经创建好的组件

Vue.component(id,[definition]);

id:指定注册组件的名称

definition:已经创建好的组件构造器

Vue.component(“news”,Profile);

3 使用注册好的组件

<div id="app">
	<news></news>
</div>

注意：

创建组件指定组件模板的时候，模板只能有一个根元素(一般是div)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<news></news>
		
	</div>

	<script type="text/javascript">
		//		创建组件构造器
		let Profile = Vue.extend({
			template: `
					<div>
				  		<img src="img/fm.png"/>
						<p>我是描述信息</p>
					</div>
					`
		});
		
//		注册已经创建好的组件
		Vue.component("news",Profile);

		let vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			},
			computed: {

			}
		})
	</script>
	</body>

</html>

全局组件简写

格式：
Vue.component(id,{/*....*/});

id:组件别名

{/*....*/}:模板构造函数

Vue.component("news", {
	template: `
			<div>
				  <img src="img/fm.png"/>
				  <p>我是描述信息</p>
			</div>			`
});

缺点是：字符串模板没有提示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<news></news>
		
	</div>

	<script type="text/javascript">

		Vue.component("news", {
			template: `
					<div>
				  		<img src="img/fm.png"/>
						<p>我是描述信息</p>
					</div>
					`
		});
		
		let vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			},
			computed: {

			}
		})
	</script>
	</body>

</html>

更专业的写法（Vue提供了template标签）

推荐使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		<news></news>
	</div>
	
	<template id="info">
		<div >
			<img src="img/fm.png"/>
			<p>我是描述信息</p>
		</div>
	</template>

	<script type="text/javascript">

		Vue.component("news", {
			template: "#info"
		});
		
		let vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			},
			computed: {

			}
		})
	</script>
	</body>

</html>

7.2 自定义局部组件

全局组件和局部组件的区别：

前者在任何一个Vue实例控制的区域中都可以使用

后者只能在自定义的那个Vue实例控制的区域中使用

自定义一个局部组件

vue实例中新增components:{}

在{}中通过key/value形式注册组件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<div id="app">
		
	</div>

	<script type="text/javascript">
		
		let vue = new Vue({
			el: "#app",
			data: {

			},
			components:{
				
			}
		})
	</script>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<news></news>
	</div>
	
	<template id="info">
		<div >
			<img src="img/fm.png"/>
			<p>我是描述信息</p>
		</div>
	</template>

	<script type="text/javascript">
		
		let vue = new Vue({
			el: "#app",
			data: {

			},
			components:{
				"news":{
					template: "#info"
				}
			}
		})
	</script>
	</body>

</html>

7.3 组件中的data和methods

在自定义组件中不能像vue实例中一样直接使用data

而是必须通过返回函数的方式来使用data

注意点：

自定义组件中可以使用data，但是data必须赋值一个函数，然后通过函数返回值定义数据
组件中的data如果不是通过函数返回的，那么多个组件就会共用一份数据，就会导致数据混乱
如果组件中的data是通过函数返回的，则每创建一个新的组件，都会调用一次该方法，将这个方法返回的数据和当前创建的组件绑定在一起，这样就有效的避免了数据混乱。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<button @click="appFn">我是按钮</button>
		<p>{{appMsg}}</p>
		<news></news>
	</div>
	
	<template id="info">
		<div >
			<img src="img/fm.png"/>
			<p>{{abcMsg}}</p>
			<button @click="abcFn">我是按钮</button>
		</div>
	</template>

	<script type="text/javascript">
		
		Vue.component("news", {
			template: "#info",
			data:function(){
				return{
					abcMsg:"我是abcMsg"
				}
			},
			methods:{
				abcFn(){
					alert("abcFn")
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {
				appMsg:"我是appMsg"
			},
			methods:{
				appFn(){
					alert("appFn")
				}
			}
		})
	</script>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<news></news>
		<news></news>
		<news></news>
	</div>
	
	<template id="info">
		<div >
			<button @click="add">累加</button>
			<p>{{numbers}}</p>
		</div>
	</template>

	<script type="text/javascript">
		
		Vue.component("news", {
			template: "#info",
			data:function(){
				return{
					numbers:0
				}
			},
			methods:{
				add(){
					this.numbers++;
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {
				
			},
			methods:{
				
			}
		})
	</script>
	</body>

</html>

7.4 组件切换

可以通过v-if来切换因为组件的本质就是一个自定义元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<button @click="toggle">切换</button>
		<home v-if="isShow"></home>
		<photo v-else></photo>
	</div>
	
	<template id="home">
		<div >
			<p >我是首页</p>
		</div>
	</template>
	
	<template id="photo">
		<div >
			<img src="img/fm.png" />
		</div>
	</template>

	<script type="text/javascript">
		
		Vue.component("home", {
			template: "#home",
		});
		
		Vue.component("photo", {
			template: "#photo",
		});
		
		let vue = new Vue({
			el: "#app",
			data: {
				isShow:true
			},
			methods:{
				toggle(){
					this.isShow=!this.isShow
				}
			}
		})
	</script>
	</body>

</html>

7.5 动态组件

更专业的切换组件的办法：动态组件

语法：

<component v-bind:is="需要显示组件名称"></component>

component被称为动态组件，也就是可以指定显示谁

名称是固定的就需要加引号

名称是Model中的数据就可以不加引号

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<button @click="toggle">切换</button>
		<component v-bind:is="name"></component>
	</div>
	
	<template id="home">
		<div >
			<p >我是首页</p>
		</div>
	</template>
	
	<template id="photo">
		<div >
			<img src="img/fm.png" />
		</div>
	</template>

	<script type="text/javascript">
		
		Vue.component("home", {
			template: "#home",
		});
		
		Vue.component("photo", {
			template: "#photo",
		});
		
		let vue = new Vue({
			el: "#app",
			data: {
				isShow:true,
				name:"home"
			},
			methods:{
				toggle(){
					this.isShow=!this.isShow;
					this.name=this.name==="home"?"photo":"home";
				}
			}
		})
	</script>
	</body>

</html>

为什么有v-if切换了还需要component？

因为component可以配合keep-alive来保存被隐藏组件之前的状态

如何使用？——包起来

<div id="app">
	<button @click="toggle">切换</button>
	<keep-alive>
		<component v-bind:is="name"></component>
	</keep-alive>
		
</div>

7.6 组件动画

和过去给元素添加组件是一样的

单个——transition

多个——transition-group

注意点:默认进入动画和离开动画是同时执行的，如果想一个做完再做另一个需要制定动画模式

过渡模式：

in-out

out-in

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.v-enter{
				opacity: 0;
				margin-left: 500px;
			}
			.v-enter-to{
				opacity: 1;
			}
			.v-entre-active{
				transition: all 3s;
			}
			.v-leave{
				opacity: 1;
			}
			.v-leave-to{
				opacity: 2;
			}
			.v-leave-active{
				transition: all 3s;
				margin-left: 500px;
			}
		</style>
	</head>
	
<body>
	<div id="app">
		<button @click="toggle">切换</button>
		<transition mode="out-in"> 
			<component v-bind:is="name"></component>
		</transition>
		
	</div>
	
	<template id="home">
		<div >
			<p >我是首页</p>
		</div>
	</template>
	
	<template id="photo">
		<div >
			<img src="img/fm.png" />
		</div>
	</template>

	<script type="text/javascript">
		
		Vue.component("home", {
			template: "#home",
		});
		
		Vue.component("photo", {
			template: "#photo",
		});
		
		let vue = new Vue({
			el: "#app",
			data: {
				isShow:true,
				name:"home"
			},
			methods:{
				toggle(){
					this.isShow=!this.isShow;
					this.name=this.name==="home"?"photo":"home";
				}
			}
		})
	</script>
	</body>

</html>

7.7 父子组件

什么是父子组件？

在一个组件中又定义了其他组件，就是父子组件

其实局部组件就是最简单的父子组件，因为可以吧Vue实例看做是一个大组件

在Vue实例中定义了局部组件，就相当于在大组件里面定义了小组件，所以局部组件就是最简单的父子组件

如何定义其他的父子组件

自定义组件（父）中使用components定义子组件

全局情况：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<p>我是father</p>
			<son></son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<p>我是son</p>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			components:{
				"son":{
					template:"#son"
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

局部情况

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<father></father>
		</div>

		<template id="father">
			<div>
				<p>我是father</p>
				<son></son>
			</div>
		</template>

		<template id="son">
			<div>
				<p>我是son</p>
			</div>
		</template>

		<script type="text/javascript">
			let vue = new Vue({
				el: "#app",
				data: {},
				components: {
					"father": {
						template: "#father",
						components: {
							"son": {
								template: "#son"
							}
						}
					}
				}
			})
		</script>
	</body>

</html>

父子组件数据传递

Vue中默认情况下子组件是不能访问父组件的数据的

因此为了让子组件可以访问父组件的数据，必须通过父组件传递

如何传递？

1 在父组件中通过v-bind传递数据

格式：v-bind:自定义接收名称= “要传递的数据”

2 在子组件中通过props接收数据

格式：props:[“自定义接收名称”]

传递名称和接收名称保持一致

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<!--组件是可以使用自己的数据的-->
			<p>{{name}}</p>
			<p>{{age}}</p>
			<son :parentname="name" :parentage="age"></son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<p>我是son</p>
			<p>{{parentname}}</p>
			<p>{{parentage}}</p>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			data:function(){
				return{
					name:"aaa",
					age:18
				}
			},
			components:{
				"son":{
					template:"#son",
					props:["parentname","parentage"]
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

父子组件方法传递

Vue中默认情况下子组件是不能访问父组件的方法的

因此为了让子组件可以访问父组件的数据，必须通过父组件传递

如何传递？

1 父组件中通过v-on传递方法

格式： v-on:自定义接收名称=”要传递的方法”

2 在子组件中自定义一个方法

3 在自定义方法中通过this.$eimt(‘自定义接收名称’) 触发传递过来的方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<button @click="say">按钮</button>
			<son @parentsay="say"></son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<button @click="sonFn">按钮</button>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			methods:{
				say(){
					alert("aaa")
				}
			},
			data:function(){
				return{
					name:"aaa",
					age:18
				}
			},
			components:{
				"son":{
					template:"#son",
//					props:["parentsay"]
					methods:{
						sonFn(){
							this.$emit("parentsay")
						}
					}
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

注意点：

和传递数据不用，如果传递的是方法，那么在子组件中不需要接受
如果传递的是方法，那么需要在子组件中自定义一个方法
如果传递的是方法，那么在子组件中直接使用自定义的方法即可
如果传递的是方法，那么需要在子组件中自定义方法中通过

父子组件传递数据之子传父

利用子组件调用父组件方法的时候传递参数

子组件自定义方法中

this.$emit(‘自定义接收名称’, [参数1],[参数2]…)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<button @click="say">按钮</button>
			<son @parentsay="say"></son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<button @click="sonFn">按钮</button>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			methods:{
				say(data){
					alert(data)
				}
			},
			components:{
				"son":{
					template:"#son",
//					props:["parentsay"]
					methods:{
						sonFn(){
							this.$emit("parentsay","zhangsan")
						}
					}
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

7.8 组件命名注意点

注册组件的时候用了”驼峰命名”,使用的时候就需要转成短横线
传递参数的时候用了”驼峰命名”,使用的时候就需要转成短横线
传递方法的时候不能用”驼峰命名”，只能用短横线

7.9 多级传递

儿子使用爷爷的数据和方法，都必须一层一层往下传递

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<grandfather></grandfather>
	</div>
	
	<template id="grandfather">
		<div >
			<p>{{name}}</p>
			<button @click="say">爷爷</button>
			<father :gfname="name" @gfsay="say"></father>
		</div>
	</template>
	
	<template id="father">
		<div >
			<p>{{gfname}}</p>
			<button @click="fatherFn">爸爸</button>
			<son :fname="gfname" @fsay="fatherFn"></son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<p>{{fname}}</p>
			<button @click="sonFn">儿子</button>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("grandfather",{
			template:"#grandfather",
			data:function() {
				return{
					name:"zhangsan"
				}
			},
			methods:{
				say(){
					alert("aaaa")
				}
			},
			components:{
				"father":{
					template:"#father",
					props:["gfname"],
					methods:{
						fatherFn(){
							this.$emit("gfsay")
						}
					},
					components:{
						"son":{
							template:"#son",
							props:["fname"],
							methods:{
								sonFn(){
									this.$emit("fsay")
								}
							}
						}
					}
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

7.10 插槽

7.10.1 匿名插槽

为了可以做到可以给子组件动态添加内容，必须使用插槽slot

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<son>
				<div id="">我是追加的内容1</div>
				<div id="">我是追加的内容2</div>
			</son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<div >我是头部</div>
			<slot>我是默认数据</slot>
			<div >我是低部</div>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			components:{
				"son":{
					template:"#son",
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

注意点：

插槽可以使用默认数据，当使用者没有用插槽的时候，就会让默认数据显示;如果使用者填坑了，那默认数据就无效
插槽是可以指定名称的，默认没有指定名称的时候是匿名插槽

匿名插槽特点：

有多个匿名插槽的时候，填充内容就会被复制多份

开发中推荐只写一个匿名插槽

7.10.2 具名插槽

为了不让填充的数据被拷贝多份，就需要具名插槽

使用：

通过给插槽的name属性给定名称

在使用的时候通过slot=”name”方式，指定当前的内容用于替换哪一个插槽

注意点：

如果没有指定要替换哪个插槽中的内容，则具名插槽不会被替换

slot属性在Vue2.6中已经废弃，Vue2.6之后使用v-slot代替slot属性。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<son>
				<div slot="one">我是追加的内容1</div>
				<div slot="one">我是追加的内容2</div>
				<div slot="two">我是追加的内容3</div>
				<div slot="two">我是追加的内容4</div>
			</son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<div >我是头部</div>
			<slot name="one">我是默认数据1</slot>
			<slot name="two">我是默认数据2</slot>
			<div >我是低部</div>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			components:{
				"son":{
					template:"#son",
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

7.10.3 v-slot指令

它是为具名插槽和作用域插槽引入的一个新的统一的语法，取代了slot和slot-scope

1 v-slot只能用在template标签上

2 可以用==#==代替v-slot

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<son>
				<template v-slot:one>
					<div >我是默认数据1<div>
					<div >我是默认数据2</div>
				</template>
			</son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<div >我是头部</div>
			<slot name="one">我是默认数据1</slot>
			<div >我是低部</div>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			components:{
				"son":{
					template:"#son",
				}
			}
		});
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

7.10.4 作用域插槽

需求：

原来是：子组件的slot插槽的默认内容可以使用子组件data中的数据

现在要：父组件填坑的内容也能使用子组件data中的数据（默认是不可以的）

解决方案：定义子组件的插槽的时候，通过v-bind将数据暴露出去

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div >
			<son>
				<!--slot-scope="abc"接受子组件插槽暴露的数据-->
				<template slot-scope="abc">
					<div id="">我是填充的内容{{abc.names}}</div>
				</template>
			</son>
		</div>
	</template>
	
	<template id="son">
		<div >
			<div >我是头部{{names}}</div>
			<slot v-bind:names="names">我是默认数据1{{names}}</slot>
			<div >我是低部</div>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			components:{
				"son":{
					template:"#son",
					data:function(){
						return{
							names:["l","k"]
						}
					}
				}
			}
		});

	</script>
	</body>

</html>

作用域插槽应用场景：

子组件提供数据，父组件决定如何渲染

注意：Vue2.6之后 slot-scope就用v-slot来替代了

匿名插槽时：v-slot:default=”abc”

简写：#default=”abc”

7.11 组件渲染方式

方式一：先定义注册组件，然后在vue实例当做标签来使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<one ></one>
		</div>
		
		<template id="one">
			<div >
				<p>我是组件</p>
			</div>
		</template>

		<script type="text/javascript">
			Vue.component("one",{template:"#one"})
			
			let vue = new Vue({
				el: "#app"
			})
		</script>
	</body>

</html>

方式二：先定义注册组件，然后通过vue实例的render方法来渲染

<div id="app">
	无内容	
</div>

let vue = new Vue({
	el: "#app",
	render:function(createElement){
		let html=createElement("one");
		return html
	}
})

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
		</div>
		
		<template id="one">
			<div >
				<p>我是组件</p>
			</div>
		</template>

		<script type="text/javascript">
			Vue.component("one",{template:"#one"})
			
			let vue = new Vue({
				el: "#app",
				render:function(createElement){
					let html=createElement("one");
					return html
				}
			})
		</script>
	</body>

</html>

两种方式的区别：

方式1不会覆盖vue实例控制区域

方式2会覆盖vue实例控制区域

8 Vuex

Vuex是Vue配套的公共数据管理工具，可以将共享的数据保存到vuex中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据

案例：儿子数据与父亲数据同步

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	
<body>
	<div id="app">
		<father></father>
	</div>
	
	<template id="father">
		<div id="">
			<son @parentchange="change"></son>
			<son2 :parentnum="num"></son2>	
		</div>
	</template>
	
	<template id="son">
		<div >
			<button @click="add">增加</button>
			<button @click="sub">减少</button>
			<input type="text" :value="count" />
		</div>
	</template>
	
	<template id="son2">
		<div >
			<p>{{parentnum}}</p>
		</div>
	</template>

	<script type="text/javascript">
		Vue.component("father",{
			template:"#father",
			data:function(){
				return{
					num:0
				}
			},
			methods:{
				change(newCount){
					this.num=newCount;
				}
			},
			components:{
				"son":{
					template:"#son",
					data:function(){
						return{
							count:0
						}
					},
					methods:{
						add(){
							this.count=this.count+1;
							this.$emit("parentchange",this.count)
						},
						sub(){
							this.count=this.count-1;
							this.$emit("parentchange",this.count)
						}
					}
				},
				"son2":{
					template:"#son2",
					props:["parentnum"]
				}
			}
		}); 
		
		let vue = new Vue({
			el: "#app",
			data: {	
			}
		})
	</script>
	</body>

</html>

8.1 使用步骤

导入vuex前必须导入在vue之后
创建Vuex对象

const store = new Vuex.Store({
	//				state相当于data，保存共享数据
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	}
})

使用（注意格式$this.store.state.数据）
在祖先組件中添加store的key保存vuex對象

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<grandfather></grandfather>
		</div>

		<template id="grandfather">
			<div>
				<p>{{this.$store.state.msg}}</p>
			</div>
		</template>

		<template id="father">
			<div>
				<p>{{this.$store.state.msg}}</p>
			</div>
		</template>

		<template id="son">
			<div>
				<p>{{this.$store.state.msg}}</p>
			</div>
		</template>

		<script type="text/javascript">
			
			const store = new Vuex.Store({
				state: {
					msg:"aaa"
				}	
			});
			
			Vue.component("grandfather", {
				template: "#grandfather",
//				在祖先組件中添加store的key保存vuex對象
				store:store,
				components: {
					"father": {
						template: "#father",
						components: {
							"son": {
								template: "#son",
								
							}
						}
					}
				}
			});

		</script>
	</body>

</html>

mutations保存了修改共享数据的方法
注意：

在Vuex中不推荐直接修改共享的数据

因为如果组件都修改了这个共享数据，若数据发生错误，就很难去调试是哪个组件导致的
调用mutations中的方法：this.$state.commit(“方法名”);

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vuex.js"></script>
	</head>

	<body>
		<div id="app">
			<father></father>
		</div>

		<template id="father">
			<div id="">
				<son ></son>
				<son2></son2>
			</div>
		</template>

		<template id="son">
			<div>
				<button @click="add">增加</button>
				<button @click="sub">减少</button>
				<input type="text" :value="this.$store.state.count " />
			</div>
		</template>

		<template id="son2">
			<div>
				<button @click="add">增加</button>
				<button @click="sub">减少</button>
				<input type="text" :value="this.$store.state.count " />
			</div>
		</template>

		<script type="text/javascript">
			const store = new Vuex.Store({
				state: {
					count: 0
				},
				mutations: {
					mAdd(state) {
						state.count = state.count + 1;
					},
					mSub(state) {
						state.count = state.count - 1;
					}
				}
			})

			Vue.component("father", {
				template: "#father",
				store: store,
				components: {
					"son": {
						template: "#son",
						methods: {
							add() {
								this.$store.commit("mAdd")
							},
							sub() {
								this.$store.commit("mSub")
							}
						}
					},
					"son2": {
						template: "#son2",
						methods: {
							add() {
								this.$store.commit("mAdd")
							},
							sub() {
								this.$store.commit("mSub")
							}
						}
					}
				}
			});

			let vue = new Vue({
				el: "#app",
				data: {}
			})
		</script>
	</body>

</html>

8.2 getters 计算属性

this.$store.getters.计算属性名

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vuex.js"></script>
</head>

<body>
	<div id="app">
		<father></father>
	</div>

	<template id="father">
		<div id="">
			{{this.$store.getters.format}}
		</div>
	</template>

	<template id="son">
		<div>

		</div>
	</template>

	<template id="son2">
		<div>
		</div>
	</template>

	<script type="text/javascript">
		const store = new Vuex.Store({
			state: {
				msg: "aaaa"
			},
			getters: {
				format(state) {
					return state.msg + "sss"
				}
			}
		})

		Vue.component("father", {
			template: "#father",
			store: store,
			components: {
				"son": {
					template: "#son"
				},
				"son2": {
					template: "#son2"
				}
			}
		});

		let vue = new Vue({
			el: "#app",
			data: {}
		})
	</script>
</body>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vuex.js"></script>
	</head>

	<body>
		<div id="app">
			<father></father>
		</div>

		<template id="father">
			<div id="">
				{{this.$store.getters.format}}
			</div>
		</template>

		<template id="son">
			<div>

			</div>
		</template>

		<template id="son2">
			<div>
			</div>
		</template>

		<script type="text/javascript">
			const store = new Vuex.Store({
				state: {
					msg: "aaaa"
				},
				getters: {
					format(state) {
						return state.msg + "sss"
					}
				}
			})

			Vue.component("father", {
				template: "#father",
				store: store,
				components: {
					"son": {
						template: "#son"
					},
					"son2": {
						template: "#son2"
					}
				}
			});

			let vue = new Vue({
				el: "#app",
				data: {}
			})
		</script>
	</body>

</html>

8.3 Router切换组件

和v-if、v-show一样，Vue Router是用来切换组件的显示的

v-if/v-show是标记来切换(true/false)

Vue Router是用哈希来切换(#/xxx)

比v-if/v-show强大的是Vue Router不仅能切换组件的显示，还能在切换的时候传递参数

使用方式：

导入Vue Router(在vue.js之后)
定义组件

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

let vue = new Vue({
	el: "#app",
	components: {
		one: one
	}
})

定义路由规则

数组中的每一个对象就是一条规则

即匹配到哪一个hash，显示哪一个组件

const two = {
    template: "#two"
}
const routes = [{
    path: '/one',
    component: one
},
{
    path: '/two',
    component: two
}
]

根据路由规则创建路由对象

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

将路径对象挂在到Vue实例中

let vue = new Vue({
	el: "#app",
	router:router,
	components: {
		one: one,
		two: two
	}
})

修改URL哈希值

<div id="app">
	<a href="$/one">切换到第一个页面</a>
	<a href="$/two">切换到第二个页面</a>	
</div>

通过< router-view>渲染匹配的组件（出口）

<div id="app">
	<a href="#/one">切换到第一个页面</a>
	<a href="#/two">切换到第二个页面</a>	
	<router-view></router-view>
</div>

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>

	</head>

	<body>
		<div id="app">
			<a href="#/one">切换到第一个页面</a>
			<a href="#/two">切换到第二个页面</a>	
			<router-view></router-view>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			const one = {
				template: "#one"
			};

			const two = {
				template: "#two"
			};
			
			const routes = [{
					path: '/one',
					component: one
				},
				{
					path: '/two',
					component: two
				}
			];

			const router = new VueRouter({
				routes
			})

			let vue = new Vue({
				el: "#app",
				router:router,
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

router-link

上面用a标签可以设置URL的hash，但是不够专业

vue router中提供了一个专门用于设置hash的标签router-link

通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.

<div id="app">
	<router-link to="/one">切换到第一个页面</router-link>
	<router-link to="/two">切换到第二个页面</router-link>	
	<router-view></router-view>
</div>

给router-link定义渲染成什么（指定tag属性）

<div id="app">
	<router-link to="/one" tag="button">切换到第一个页面</router-link>
	<router-link to="/two" tag="button">切换到第二个页面</router-link>	
	<router-view></router-view>
</div>

如何指定路由的激活状态？

重写css属性router-link-active

<style type="text/css">
	.router-link-active{
		background: red;
	}
</style>

通过linkActiveClass（是路由实例对象中的属性）

nj-active是一个类名

const router = new VueRouter({
	routes,
	linkActiveClass:"nj-actove"
})

<style type="text/css">
	.nj-actove{
		background: red;
	}
</style>

如何指定默认的hash？路由重定向redirect

在定义路由规则的时候写

const routes = [{
        path: '/',
        redirect: '/one'
	},
	{
        path: '/one',
        component: one
    },
	{
        path: '/two',
        component: two
	}
];

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
		<style type="text/css">
			/*.router-link-active{
				background: red;
			}*/
			
			.nj-actove {
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<router-link to="/one" tag="button">切换到第一个页面</router-link>
			<router-link to="/two" tag="button">切换到第二个页面</router-link>
			<router-view></router-view>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			const one = {
				template: "#one"
			};

			const two = {
				template: "#two"
			};

			const routes = [{
					path: '/',
					redirect: '/one'
				},
				{
					path: '/one',
					component: one
				},
				{
					path: '/two',
					component: two
				}
			];

			const router = new VueRouter({
				routes,
				linkActiveClass: "nj-actove"
			})

			let vue = new Vue({
				el: "#app",
				router: router,
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

传递参数

只要将Vue Router实例对象挂在到Vue实例对象上，就可以通过vue.$route拿到路由对象

只要能拿到路由对象，就可以通过路由对象拿到传递的参数

传递参数的两种方式

通过URL参数参数==(?key=value&key=value)，通过this.$route.query.key==获取

<div id="app">
	<router-link to="/one?name=zhangsan&age=33" tag="button">切换到第一个页面</router-link>
	<router-link to="/two" tag="button">切换到第二个页面</router-link>
	<router-view></router-view>
</div>

const one = {
	template: "#one",
	created:function(){
		console.log(this.$route);
		console.log(this.$route.query.name);
		console.log(this.$route.query.age);
	}
};

通过占位符传递==（路由规则中/:key/:key，路径中/value/value），通过this.$route.params.key==获取

<div id="app">
	<router-link to="/one?name=zhangsan&age=33" tag="button">切换到第一个页面</router-link>
	<router-link to="/two/lisi/30" tag="button">切换到第二个页面</router-link>
	<router-view></router-view>
</div>

const routes = [{
        path: '/',
        redirect: '/one'
    },
    {
        path: '/one',
        component: one
    },
    {
        path: '/two/:name/:age',
        component: two
    }
];

const two = {
	template: "#two",
    created: function() {
        console.log(this.$route);
        console.log(this.$route.params.name);
        console.log(this.$route.params.age);
	}
};

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
		<style type="text/css">
			.nj-actove {
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<router-link to="/one?name=zhangsan&age=33" tag="button">切换到第一个页面</router-link>
			<router-link to="/two/lisi/30" tag="button">切换到第二个页面</router-link>
			<router-view></router-view>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			const one = {
				template: "#one",
				created: function() {
					console.log(this.$route);
					console.log(this.$route.query.name);
					console.log(this.$route.query.age);
				}
			};

			const two = {
				template: "#two",
				created: function() {
					console.log(this.$route);
					console.log(this.$route.params.name);
					console.log(this.$route.params.age);
				}
			};

			const routes = [{
					path: '/',
					redirect: '/one'
				},
				{
					path: '/one',
					component: one
				},
				{
					path: '/two/:name/:age',
					component: two
				}
			];

			const router = new VueRouter({
				routes,
				linkActiveClass: "nj-actove"
			})

			let vue = new Vue({
				el: "#app",
				router: router,
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

嵌套路由

嵌套路由（子路由），就是在被切换的组件中又切换其他子组件

如：在one界面中也有两个按钮，通过两个按钮进一步切换one中的内容

1 子路由的hash要指定下一级路由和二级路由

<template id="one">
	<div class="onepage">
		<p>第一个界面</p>
		<router-link to="/one/onesub1" tag="button">切换到第一个自界面</router-link>
		<router-link to="/one/onesub2" tag="button">切换到第二个自界面</router-link>
		<router-view></router-view>
	</div>
</template>

const onesub1 = {
		template: "#onesub1"
	};	
const onesub2 = {
	template: "#onesub2"
};

2 路由规则也得写一下

2.1 以下方式定义，onesub1/onesub2出来之后会完全覆盖one

const routes = [{
        path: '/one',
        component: one
	},{
        path: '/one/onesub1',
        component: onesub1
    },{
        path: '/one/onesub2',
        component: onesub2
    },
    {
        path: '/two/:name/:age',
        component: two
    }
];

2.2在一级路由中通过children来配置子路由

const routes = [{
        path: '/one',
        component: one,
        children: [{
				// 当 /user/:id/profile 匹配成功，
				// UserProfile 会被渲染在 User 的 <router-view> 中
				path: 'onesub1',
				component: onesub1
			},
			{
				// 当 /user/:id/posts 匹配成功
				// UserPosts 会被渲染在 User 的 <router-view> 中
				path: 'onesub2',
				component: onesub2
			}
		]
	},{
        path: '/one/onesub1',
        component: onesub1
    },{
        path: '/one/onesub2',
        component: onesub2
    },
    {
        path: '/two/:name/:age',
        component: two
    }
];

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
		<style type="text/css">
			.nj-actove {
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<router-link to="/one?name=zhangsan&age=33" tag="button">切换到第一个页面</router-link>
			<router-link to="/two/lisi/30" tag="button">切换到第二个页面</router-link>
			<router-view></router-view>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
				<router-link to="/one/onesub1" tag="button">切换到第一个自界面</router-link>
				<router-link to="/one/onesub2" tag="button">切换到第二个自界面</router-link>
				<router-view></router-view>
			</div>
		</template>

		<template id="onesub1">
			<div class="onesub1page">
				<p>第一个界面子介面1</p>
			</div>
		</template>

		<template id="onesub2">
			<div class="onesub2page">
				<p>第一个界面子介面2</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			const onesub1 = {
				template: "#onesub1"
			};

			const onesub2 = {
				template: "#onesub2"
			};

			const one = {
				template: "#one",
				components: {
					onesub1: onesub1,
					onesub2: onesub2
				}
			};

			const two = {
				template: "#two"
			};

			const routes = [{
					path: '/one',
					component: one,
					children: [{
							// 当 /user/:id/profile 匹配成功，
							// UserProfile 会被渲染在 User 的 <router-view> 中
							path: 'onesub1',
							component: onesub1
						},
						{
							// 当 /user/:id/posts 匹配成功
							// UserPosts 会被渲染在 User 的 <router-view> 中
							path: 'onesub2',
							component: onesub2
						}
					]
				}, {
					path: '/one/onesub1',
					component: onesub1
				}, {
					path: '/one/onesub2',
					component: onesub2
				},
				{
					path: '/two/:name/:age',
					component: two
				}
			];

			const router = new VueRouter({
				routes
			})

			let vue = new Vue({
				el: "#app",
				router: router,
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

命名视图

命名视图和具名插槽相似，都是让不同的出口显示不同的内容

命名视图就是当路由地址被匹配的时候同时制定多个出口，并且每个出口中显示的内容不同

<div id="app">
	<router-view name="name1"></router-view>
	<router-view name="name2"></router-view>
</div>

const routes = [{
	path: '/',
    components:{
        name1:one,
        name2:two
    }
	}
];

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>

	<body>
		<div id="app">
			<router-view name="name1"></router-view>
			<router-view name="name2"></router-view>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			

			const one = {
				template: "#one",
			};

			const two = {
				template: "#two"
			};

			const routes = [{
					path: '/',
					components:{
						name1:one,
						name2:two
					}
				}
			];

			const router = new VueRouter({
				routes
			})

			let vue = new Vue({
				el: "#app",
				router: router,
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

watch属性

watch属性是专门用于监听数据变化的，只要数据发生了变化，就会自动调用对应数据的回调方法
watch属性不仅仅能够监听数据的变化，还能够监听路由地址的变化，在企业开发中可以通过watch来判断当前页面是从哪个界面跳转过来的
watch是写在vue实例对象中的

监听路由的变化（监听vue实例对象中的”$route.path”）

作用：判断从哪个界面跳到哪个界面

let vue = new Vue({
	el: "#app",
	router: router,
	watch:{
        num1:function(newValue,oldValue){
        	this.res=parseInt(this.num1)+parseInt(this.num2)		
		},
    	num2:function(newValue,oldValue){
    		this.res=parseInt(this.num1)+parseInt(this.num2)		
   		 },
		"$route.path":function(newValue,oldValue){
   	 		console.log(newValue,oldValue);
   		 }
	},
    data:{
        num1:0,
        num2:0,
        res:0
    },
    components: {
        one: one,
        two: two
    }
})

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vuex.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" v-model="num1"/>
			<span >+</span>
			<input type="text" v-model="num2" />
			<span >=</span>
			<input type="text" disabled v-model="res"/>
		</div>

		<template id="one">
			<div class="onepage">
				<p>第一个界面</p>
			</div>
		</template>

		<template id="two">
			<div class="twopage">
				<p>第二个界面</p>
			</div>
		</template>

		<script type="text/javascript">
			

			const one = {
				template: "#one",
			};

			const two = {
				template: "#two"
			};

			const routes = [{
					path: '/',
					components:{
						name1:one,
						name2:two
					}
				}
			];

			const router = new VueRouter({
				routes
			})

			let vue = new Vue({
				el: "#app",
				router: router,
				watch:{
					num1:function(newValue,oldValue){
//						console.log(this.num1)
//						console.log(newValue,oldValue);
						this.res=parseInt(this.num1)+parseInt(this.num2)		
					},
					num2:function(newValue,oldValue){
//						console.log(this.num1)
//						console.log(newValue,oldValue);
						this.res=parseInt(this.num1)+parseInt(this.num2)		
					},
					"$route.path":function(newValue,oldValue){
						console.log(newValue,oldValue);
					}
				},
				data:{
					num1:0,
					num2:0,
					res:0
				},
				components: {
					one: one,
					two: two
				}
			})
		</script>
	</body>

</html>

9 Vue生命周期方法

9.1 什么是生命周期方法？

和webpack生命周期方法一样，都是在从生到死的特定阶段调用的方法

生命周期钩子 = 生命周期函数 = 生命周期事件

9.2 Vue生命周期方法分类

1）创建期间的生命周期方法：

beforeCreate

仅仅表示vue实例刚刚被创建出来，此时还没有初始化好vue实例中的数据和方法，所以此时不能访问到vue实例中的data和methods

created

在调用created的时候，是最早能访问到vue实例中的data和methods的时候

beforeMount

在调用beforeMount的时候，仅仅只完成了模板的编译，但是还没有将模板渲染到界面上

mounted

在调用mounted的时候，模板的渲染已经完成，此时可以拿到渲染的内容

2）运行期间的生命周期方法

beforeUpdate

vue实例对象中的data中的数据发生变化时触发（实时监听）。因此调用beforeUpdate的时候就表示data中的数据被修改了。（数据更新了，但是界面还没更新）

updated

调用updated的时候表示数据被修改了，且最新的数据也在界面上重新渲染完毕。

3）销毁期间的生命周期方法

beforeDestroy

在调用beforeDestroy，表示当前组件即将被销毁。若组件不会被销毁，则改生命周期不会调用。该生命周期函数是最后能访问到组件中的data和methods中数据的函数。

destroyed

在调用beforeDestroy，表示当前组件已经被完全销毁了。若组件不会被销毁，则改生命周期不会调用。此时已经操作不到组件中的数据和方法了

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			
		</div>

		<script type="text/javascript">

			let vue = new Vue({
				beforeCreate:function(){
					
				},
				created:function(){
					
				},
				beforeMount:function(){
					
				},
				mounted:function(){
					
				},
				beforeUpdate::function(){
					
				},
				updated:function(){
					
				},
				beforeDestroy:function(){
					
				},
				destroyed:function(){
					
				},
				el: "#app",
			})
		</script>
	</body>

</html>

10 特殊特性

10.1 vue特殊特性

vue特点：数据驱动界面更新，无需操作DOM来更新界面

vue不推荐直接操作DOM，但企业开发中有时候需要拿到DOM，并操作DOM，此时救可以通过ref来获取

10.2 ref使用

在需要获取的元素上添加ref属性

在使用的地方通过this.$refs.xxx获取

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click="myFn">按钮</button>
			<p ref='mypp'>我是原生的dom</p>
			<one id="myOne" ref='myOne'></one>
		</div>
		
		<template id="one">
			<div >
				<p>我是组件</p>
			</div>
		</template>

		<script type="text/javascript">
			Vue.component("one",{template:"#one"})
			
			let vue = new Vue({
				el: "#app",
				methods:{
					myFn(){
						console.log(this.$refs);
						console.log(this.$refs.mypp);
						console.log(this.$refs.myOne);
					}
				}
			})
		</script>
	</body>

</html>

注意点：

如果是通过原生的js来获取元素，无论是原生的js或者是自定义的组件，拿到的都是原生的元素，且vue官方不推荐这么获取

this.$refs默认是一个空对象，用它获得的原生元素还是原生元素，组件就还是组件，就可以进一步拿到组件中的数据和方法

11 Vue-CLI

11.1基本使用

CLI：Command Line Interface

Vue-CLI是vue官方提供的脚手架工具，默认已经为我们搭建好了一套利用webpack管理vue的项目结构

11.2 安装和使用Vue-cli

将外网转内网

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看版本号

cnpm -v

安装指定的@vue/cli版本

cnpm install -g @vue/cli@4.1.1

检查是否安装成功：vue --version

通过脚手架创建项目：vue create project-name

手动配置

Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
1. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
Progressive Web App (PWA) Support：渐进式Web应用程序
Router ：vue-router（vue路由）
Vuex ：vuex（vue的状态管理模式）
CSS Pre-processors ：CSS 预处理器（如：less、sass）
Linter / Formatter：代码风格检查和格式化（如：ESlint）
Unit Testing ：单元测试（unit tests）
E2E Testing ：e2e（end to end）测试

11.3 项目结构

vue-cli2.x中生成的项目结果可以看到build和config文件夹，它们存储了webpack相关的配置

vue-cli3.x以后生成的项目结构就没有build和config文件夹了，因为为了化繁为简，让初学者不用关心webpack只管如何使用vue

node_modules文件夹：

存储了依赖的相关的包

public文件夹：

任何放在public文件夹的静态资源都会被简单地复制而不经过webpack,需要通过绝对路径来引用它们

一般用于存储一些永远不会改变的静态资源，或者webpack不支持的第三方库

src文件夹：

代码文件夹

assets：存储项目中自己的一些静态文件（图片/字体等）

components：存储项目中自定义的组件（小组件，公共组件）

views：存储项目中的自定义组件（大组件，页面级组件，公共组件）

router：存储VueRouter相关文件

store：存储Vuex相关文件

App.vue：根组件

main.js：项目的入口

运行

cd my-project2

npm run serve

打包

cd my-project2

npm run build （vue-cli2.x）

就会生成一个dist文件夹东西都放在里面

卸载

cnpm uninstall @vue/cli -g

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^