vue基础

1，vue简介

（1）vue的概念

一套用于构建用户界面的渐进式的js框架。

vue可以自底向上的逐层的因公

简单应用：只需要一个轻量小巧的核心库

复杂应用：介意引入各种各样的vue插件

（2）vue的作者

尤玉溪

（3）vue的特点：

1，采用组件化模式，提高代码复用率，让代码更好维护

.vue文件包含一个模块里面的.html，.css,.js

方便整个模块被被人引用

2，声明式编码，让编码人员不用直接操作DOM，提高代码效率

注，命令式代码，就是传统的js文件，需要一步一步的进行操作，缺少哪一步都不能运行。

3，使用虚拟DOM+优秀Diff算法，尽量复用DOM节点

（4）学习vue之前掌握的js框架基础

  • es6语法规范
  • es6模块化
  • 包管理器
  • 原型 原型链
  • 数组的常用方法
  • axios
  • promise

2，搭建vue框架

1，用script标签进行引入

在官网进行下载js文件，有两个版本，一个开发版本vue.js，另一个就是生产版本，vue.min.js，相对于开发版本这是进行压缩过的。

CDN:就是当src的路径是http：开头的时候，需要用CDN进行加速。当时绝对路径的时候就是本地加载。

3，vue基础使用

（1）初始vue

  • 0，当用script标签引入了vue.js文件的时候，全局就多了一个vue函数
  • 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  • 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  • 3.root容器里的代码被称为【Vue模板】；
  • 4.Vue实例和容器是一一对应的；
  • 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  • 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  • 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式 和 js代码(语句)

​ 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

​ (1). a

​ (2). a+b

​ (3). demo(1)

​ (4). x === y ? ‘a’ : ‘b’

​ 2.js代码(语句)

​ (1). if(){}

​ (2). for(){}

<body>
		<!-- 
			初识Vue：
				0，当用script标签引入了vue.js文件的时候，全局就多了一个vue函数
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.root容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'

						2.js代码(语句)
									(1). if(){}
									(2). for(){}

		<!-- 准备好一个容器 -->
	<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'atguigu',
					address:'北京'
				}
			})
		</script>

（2）模板语法

Vue模板语法有2大类：

  • 1.插值语法：
    • 功能：用于解析标签体内容。
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
  • 2.指令语法：
    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
    • 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，
    • 且可以直接读取到data中的所有属性。
    • 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。
<!-- 准备好一个容器-->
		<!-- 差值语法 -->
		<div class="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr>
			<h1>指令语法</h1>
			<!-- 当使用v-bind 是相当于绑定的意思，就是把引号的东西当成一个js表达式去执行 -->
			<!-- v-bind： 可以简写成 ： -->
			<a v-bind:href="url">点击进去连接</a>
			<!-- 在data中加入一个对象，在调用对象的方法的时候，就直接调用即可 -->
			<a v-bind:href="school.url">点击进去连接</a>
		</div>
		<script>
			Vue.config.productionTip = false

			new Vue({
				el:'#root',
				data:{
					name: 'jack',
					url:'http://www.atguigu.com',
					school:{
						name:'http://www.baidu.com'
					}
				},

			})
		</script>

（3）数据绑定

Vue中有2种数据绑定的方式：

​ 1.单向绑定(v-bind)：数据只能从data流向页面。

​ 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

​ 备注：

​ 1.双向绑定一般都应用在表单类元素（输入性元素）上（如：input、select等）

​ 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<body>
		<!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素（输入性元素）上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 单向的意思就是从vue写的值可以给到页面，但是从页面输入的书，vue里面却不能改变，这是因为v-bind是单向绑定 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			<!-- v-model是进行双向绑定，当你在页面进行输入数字，vue里面的数据也会改变 -->
			<!-- 双向数据绑定：<input type="text" v-model:value ="name"> -->
			<!-- 简写模式 -->
			双向数据绑定：<input type="text" v-model ="name">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

（4）el和data的两种写法

data与el的2种写法

​ 1.el有2种写法

​ (1).new Vue时候配置el属性。

​ (2).先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

​ 2.data有2种写法

​ (1).对象式

​ (2).函数式

​ 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

​ 3.一个重要的原则：

​ 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<body>
		<!-- 
			data与el的2种写法
					1.el有2种写法
									(1).new Vue时候配置el属性。
									(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
					2.data有2种写法
									(1).对象式
									(2).函数式
									如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
					3.一个重要的原则：
									由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		// 第二种写法
		// 给vue实例对象加上el元素，就是这个v是对哪个元素在起作用
		v.$mount('#root')

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			 data:{
				name:'尚硅谷'
			} 
			//data的第二种写法：函数式
			// 这个data函数是vue帮我们进行调用的
			// 这个data的函数声明方式最好就是用这种声明方式，
			// vue管理的函数一般窦昊使用箭头函数
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
	</script>

（5）MVVM模型

  • 1，M:模型
  • 2，v：视图
  • 3，vm：视图模型： vue实例对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xw4VSgrv-1645883016122)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220124182653378.png)]

显示在代码上的位置就是：

M：模型（就是数据）

data:{
		name:'尚硅谷',
		address:'北京',
	}

v：视图（就是页面上显示的东西）

<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			
		</div>

vm：视图模型，就是整个vue实例

const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})

关于在v中调用vm中数据发现：

  • 1.data中所有的属性，最后都出现在了vm身上。
  • 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
<body>
		<!-- 
			MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1> 
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
			<!-- 这是vm上的属性 -->
			<h1>测试一下2：{{$options}}</h1> 
			<!-- 这个是vm原型上的属性 -->
			<h1>测试一下3：{{$emit}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>

（6）数据代理

1，复习Object.defineproperty方法

这个方法就是给对象定义属性的一个方法

<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
			// 第一个参数是对象，第二个参数就是属性名称，第三个参数是配置项
			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false，枚举的意思就是可以参与遍历
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false
				

				// 就类似于java里面的get,set方法
				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)
		</script>

2，什么叫数据代理

就是通过一个对象代理对另一个对象中属性的操作（读/写）

举例子：就是一个对象1可以管理使用自己的属性，这时候有另一个对象2也可以管理并且使用对象1的属性。

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}
			// 给obj2添加x属性,并且得到x值和设置x值,都可以和obj对应的值相通
			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>

3，vue中的数据代理

  • 1.Vue中的数据代理：
    • 通过vm对象来代理data对象中属性的操作（读/写）
  • 2.Vue中数据代理的好处：
    • 更加方便的操作data中的数据
  • 3.基本原理：
    • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
    • 为每一个添加到vm上的属性，都指定一个getter/setter。
    • 在getter/setter内部去操作（读/写）data中对应的属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhtzTaMp-1645883016124)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220124204038128.png)]

（7）事件处理

1，事件的基本使用

  • 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  • 2.事件的回调需要配置在methods对象中，最终会在vm上；
  • 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
  • 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  • 5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
<body>
		<!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来{{name}}学习</h2>
			<!-- 就是当你点击这个按钮的时候，就会执行对应的方法 -->
			<button v-on:click="showInfo">点我提示信息</button>
			<!-- 简写形式 -->
			<button @click="showInfo">点我提示信息(不传参)</button>
			<!-- 需求就是，当点击这个点我提示信息1的时候，不仅要得到点击事件event还要得到66这个参数 -->
			<!-- 这里使用$event来进行给鼠标事件进行占位置，是为了让vue方法里面可以得到这个鼠标事件 -->
			<button @click="showInfo1(66,$event)">点我提示信息1（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo(event){
					// 这里的event参数就是鼠标点击事件
					// console.log(event.target.innerHtml) 可以根据事件参数得到一系列数据
					// console.log(this)  返回的就是vm
					// 但是这里的this并不都是vm，当这个方法声明成一个箭头函数的时候，这里的this就是window
					// 所以一般在vm声明的方法都是一般函数的形式，并不使用箭头函数的形式
					alert('同学你好')
				},
				// 这个是根据v中的showinfo1里面的方法的参数，来确定这里的参数值
				showinfo1(number,event){

				}
			}
			
		})
	</script>

2，事件修饰符

  • 1.prevent：阻止默认事件（常用）；
  • 2.stop：阻止事件冒泡（常用）；
  • 3.once：事件只触发一次（常用）；
  • 4.capture：使用事件的捕获模式；
  • 5.self：只有event.target是当前操作的元素时才触发事件；
  • 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
<!-- 阻止默认事件（常用）a标签是默认跳到其他页面，这样可以阻止默认跳转 -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） 当子标签和父标签都有点击事件，当点击子标签的时候，父标签的点击事件也会启动，这就是事件冒泡，阻止事件冒泡就是当点击子标签的时候，父标签的点击事件不被启动-->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写  先阻止冒泡再阻止默认事件，可以连续写，位置没关系-->
			<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>
			</div>

			<!-- 事件只触发一次（常用）点击一次按钮之后，下次就不管用了-->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>

3，键盘事件

1.Vue中常用的按键别名：

​ 回车 => enter

​ 删除 => delete (捕获“删除”和“退格”键)

​ 退出 => esc

​ 空格 => space

​ 换行 => tab (特殊，必须配合keydown去使用)

​ 上 => up

​ 下 => down

​ 左 => left

​ 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意多个字母组成的名字都要转为kebab-case（短横线命名）

​ 按键的原始的key值是用 e.Key来进行返回，e.keyCode来返回按键的代数

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

​ (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

​ (2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.自定义别名：Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<body>
	<!-- 
				1.Vue中常用的按键别名：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

				2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意多个字母组成的名字都要转为kebab-case（短横线命名）
				按键的原始的key值是用 e.Key来进行返回，e.keyCode来返回按键的代数

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

				4.也可以使用keyCode去指定具体的按键（不推荐）

				5.自定义别名：Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

		-->
	<!-- 准备好一个容器-->
	<!-- 想做到的一个效果是，输入内容之后直接点击回车键 -->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- @ketdown是点击键盘，按下并弹起之后触发的事件，@keyup，是按下某一个键就触发的事件 -->
<!-- @keydown后面可以点两个过程，@keydown.ctrl.y 意思就是只有点击ctrl和y的时候才能触发事件 -->
		<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
	</div>

</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el:'#root',
		data:{
			name:'尚硅谷'
		},
		methods:{
			showInfo(e){
				// 判断只有点击回车按钮的时候，才能执行某方法
				// 但是在vue里面不需要编码进行判断,给一些按键给了别名
				// if(e.keyCode !==13) return
				console.log(e.target.value)
			}
		}
	})
</script>

(8)计算属性

案例：

想实现一下的效果：

当输入框中的值变化的时候，后面的全名也会发生变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24gDjWiz-1645883016124)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220127223024495.png)]

1，使用{{ }}模板表达式写

缺点就是，如果对模板的表达式过长，就不方便进行表达

<div id="root">
			姓:<input type="text" v-model:value="firstName"><br>
			名：<input type="text" v-model:value="lastName">
			<!-- 全名：<span>{{firstName}}-{{lastName}}</span> -->
			<!-- 就是不论输入框里的输入几位，在全名里只显示前三位，可以使用表达式进行对字符串进行截取，但是如果                   需求太多就不方便在表达式进行表达 -->
			全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>


<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		// 插值语法实现
		new Vue({
			el:'#root',
			data:{
			 firstName:'张',
			 lastName:'三'
			}
		})
	</script>

2，使用methods写

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			<!-- 调用methods的方法，使用这个方法的返回值 -->
			全名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					// 这里的this就是vue实例
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},
		})
</script>

3，使用计算属性写

计算属性：

​ 1.定义：要用的属性不存在，要通过已有属性（是vm实例总的属性）计算得来。

​ 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

​ 3.get函数什么时候执行？

​ (1).初次读取时会执行一次。

​ (2).当依赖的数据发生改变时会被再次调用。

​ 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。（methods在开发者工具这儿 是看不见具体内容的，但是用计算属性，在开发者工具这里可以直接调试）

​ 5.备注：

​ 1.计算属性最终会出现在vm上，直接读取使用即可。

​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					// get 有什么作用？就是当有人读取fullname时，get就会被调用，且返回值就作为fullName的值
					// get方法里面的this就是vue实例
					// get什么时候调用？1，初次读取fullName时（就会进行缓存），2，所依赖的数据发生变化时
					get(){
						console.log('get被调用了')
						return this.firstName+'-'+this.lastName
					},
					// 这个set不是必须写的，这个set什么时候可以调用，是在fullName被修改的时候，才会被调用
					set(value){
						constarr=value.split('-')
						// set的方法中，firstName和lastName两个都会改变，那么页面上引用firstName和lastName也会改变
						// 同时fullName的值也会改变，是一种连锁反应。
						this.firstName=arr[0]
						this.lastName=arr[1]
					}
				}
                
                //简写方式
                // 当确定这个计算属性只读不改的时候，才可以简写
				// 在上方调用的时候，也是直接写 funllName
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>

4，使用监视属性来写

<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(newValue){
					// this.fullName = newValue+'-'+this.lastName
					// 让这句话等一会再执行
					// 
					setInterval(()=>{
						this.fullName = newValue+'-'+this.lastName
					},1000)

				},
				lastName(newValue){
					this.fullName=this.firstName+'-'+newValue;
				}
			}
			
		})
	</script>

（9）监视属性

案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ZrIVvVb-1645883016125)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220128143007106.png)]

做法：

1，通过vm对象的$watch()或者watch配置来监视指定的属性

2，当属性变化的时候，回调函数自动调用，在函数内部进行计算

1，监视属性watch：

​ 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

​ 2.监视的属性必须存在，才能进行监视！！

​ 3.监视的两种写法：

​ (1).new Vue时传入watch配置

​ (2).通过vm.$watch监视

<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
 -->
<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 使用了methods里面的方法 -->
			<button @click='change'>切换天气</button>
			<!-- 当methods里面的方法只有简单的语句时，可以直接写在@click里面 -->
			<button @click='this.isHot = !this.isHot'>切换天气</button>
</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成提示		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			methods: {
				change(){
					this.isHot = !this.isHot
				}
			},
			computed:{
				// 这儿的计算属性不涉及到赋值，所以可以用简写的方式
				info(){
					return this.isHot ?'炎热':'凉爽'
				}
			},
			// 1,监视的方式1
			// 用来监视vm中某一个属性是否发生改变，watch是一个配置对象
			watch:{
				isHot:{
					// 初始化时，让handler调用一下
					immediate:ture,
					// handler什么时候调用？就是当isHot发生改变时。
					// 它可以把isHot修改前的值给你，也可以把修改后的值给你，是通过参数来的
					handler(newValue,oldValue){
						console.log(newValue,oldValue);
					}
				
				}
			}

		})
		// 2，监视的写法2
		vm.$watch('isHot',{
			// 初始化时，让handler调用一下
			immediate:ture,
					// handler什么时候调用？就是当isHot发生改变时。
					// 它可以把isHot修改前的值给你，也可以把修改后的值给你，是通过参数来的
					handler(newValue,oldValue){
						console.log(newValue,oldValue);
					}
		})
	</script>

2，深度监视

深度监视：

​ (1).Vue中的watch默认不监测对象内部值的改变（一层）。

​ (2).配置deep:true可以监测对象内部值改变（多层）。

​ 备注：

​ (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

​ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<div id="root">
			<h3>a的值时：{{numbers.a}}</h3>
			<button @click='numbers.a++'>点我让a+1</button>
			<hr/>
			<h3>b的值时：{{numbers.b}}</h3>
			<button @click='numbers.b++'>点我让b+1</button>
</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1
				}
			},
			watch:{
				// 监视多级结构中某个属性的变化,使用的方式
				'numbers.a':{
					handler(){
						console.log('a发生了改变');
					}
				},
				// 若只是想看numbers里面的a和b有没有改变，
				// 监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers已经发生改变啦')
						
					}
				}
			}
		})

	</script>

3，简写形式

watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}

//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */
		//当不需要深度监视，只需要监视的时候，可以进行简写 
		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

4,computed和watch之间的区别

computed和watch之间的区别：

​ 1.computed能完成的功能，watch都可以完成。

​ 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

​ 两个重要的小原则：

​ 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

​ 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

​ 这样this的指向才是vm 或 组件实例对象。

(10) 绑定样式

1. class样式

​ 写法:class=“xxx” xxx可以是字符串、对象、数组。

​ 字符串写法适用于：类名不确定，要动态获取。

​ 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

​ 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

​ :style="{fontSize: xxx}"其中xxx是动态值。

​ :style="[a,b]"其中a、b是样式对象。

案例：

<div id="root">
	<!-- 绑定class样式  字符串写法，适用于：样式的类名不确定，需要动态指定-->
			<!-- 当点击这个div的时候，class的值会变化 -->
			<!--将会变化的class 写成绑定属性的模式，这样就会去data中去取值 -->
			<div class="basic" :class='mood' @click='changeMood'>{{name}}</div><br/><br/>
	<!-- 绑定class样式  数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
			<div class="basic" :class='arr'>{{name}}</div>
	<!-- 绑定class样式 对象写法，适用于绑定的演示个数确定，名字也确定，但要动态决定用不用 -->
			<div class="basic" :class='classObj'>{{name}}</div>
	<!-- 绑定style样式  对象写法-->
			<div class="basic" :style="styleObj"></div>
	<!-- 绑定style样式  数组写法 就是把两个样式对象都进行应用-->
			<div class="basic" :style="[styleObj,styleObj1]">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				arr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false
				},
				styleObj:{
					// 对象里的键名不能用-，要用驼峰式进行命名
					fontSize:'40px'
				},
				styleObj1:{
					backgroundColor:'orange'
				}
			},
			methods: {
				changeMood(){
					const arr=['happy','sad','normal']
					// random()方法是返回从0(含)到1（不含）的随机数
					const index =Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
			
		})
	</script>

（11）条件渲染

条件渲染：

​ 1.v-if

​ 写法：

​ (1).v-if=“表达式”

​ (2).v-else-if=“表达式”

​ (3).v-else=“表达式”

​ 适用于：切换频率较低的场景。

​ 特点：不展示的DOM元素直接被移除。

​ 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

​ 2.v-show

​ 写法：v-show=“表达式”

​ 适用于：切换频率较高的场景。

​ 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

​

​ 3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

案例：

                                                                                                     <div id="root">
		<!-- 使用v-show 来做条件渲染 -->
			<!-- v-show 底层就是实现了display:none -->
			<!-- v-show的当值为true时，标签就会显示，当值为false时，标签就不显示 -->
			<!-- v-show的值可以是一个boolean值，同时也可以写成一个表达式，转换成布尔值 -->
			<h2 v-show="true">欢迎来到{{name}}</h2>
			<h2 v-show='1 != 3'>欢迎来到{{name}}</h2>
		<!-- 使用v-if 来做条件渲染 -->
			<h2 v-if="true">欢迎来到{{name}}</h2>
			<h2 v-if="1 === 1">欢迎来到{{name}}</h2>
		<!-- 使用v-else 和v-else-if  v-else是上面条件都不满足，才会执行的语句，后面不用跟着条件-->
			<!-- 但下面的结构是不能被打断的 -->
			<div v-if='1 === 1'>Angular</div>
			<div v-else-if='1 === 2'>React</div>
			<div v-else>Vue</div>
		<!-- 交互的效果 需求（当n=1的时候，展示一个div，n=2的时候展示一个div，n=3的时候，展示一个div）-->
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<div v-show='n === 1'>Angular</div>
			<div v-if='n === 2'>React</div>
			<div v-show='n === 3'>Vue</div>
		<!-- v-show 和v-if区别 -->
			<!-- 当div的切换频率高的时候，尽量使用v-show，，使用频率低就是用v-if-->

		<!-- templat标签的使用 这个标签不会影响结构的改变，但是只能是配合v-if -->
			<!-- 当我们想满足一个条件，这三个h2标签都显示出来的时候，给三个标签都加上v-show，比较麻烦
				但是如果另外加上一个div就会破坏代码的结构，所以使用template标签，给它加上条件 -->
			<template v-if='n === 1'>
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>	
	
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	</script>

（12）列表渲染

1，v-for的指令

  • 1.用于展示列表数据
  • 2.语法：v-for="(item, index) in xxx" :key=“yyy”
  • 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

案例：

<div id="root">
    
			<!-- 遍历数组 -->
			<ul>
				<!-- 声明p一个形参,这里的key不要省略，就是每一个对象的唯一的id值-->
				<li v-for="p in persons" :key="p.id">
					{{p.name}}-{{p.age}}
				</li>
				<!-- 可以写多个形参，形参的第一个就是遍历的每一个对象，第二个参数就是index值 -->
				<li v-for="(p,index) in persons" :key="p.id">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
				<!-- 遍历对象可以拿到的形参，和遍历数组拿到的形参是不同的 -->
			<h2>汽车信息</h2>
			<ul>
				<!-- 遍历时拿到的第一个形参就是对象的值，拿到的第二个形参就是对象的键名 -->
				<li v-for="(value,k) of car" :key='ke'>
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>遍历字符串</h2>
			<ul>
				<!-- 遍历的两个参数，第一个参数就是字符，第二个参数就是字符的索引号 -->
				<li v-for="(char,index) in str" :key='index'>
					{{index}}- {{char}}
				</li>
			</ul>

			<!-- 遍历指定次数-->
			<h2>遍历指定次数</h2>
			<ul>
				<!-- 遍历的两个参数，第一个参数就是1-5的数字排序，第二个参数就是数字所对应的索引号 -->
				<li v-for="(number,index) in 5" :key='index'>
					{{number}}- {{index}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20},
					],
					car:{
						name:'奥迪',
						price:'70w',
						color:'heise'
					},
					str:'hello'
				}
			})
		</script>

2，key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

​ 1. 虚拟DOM中key的作用：

​ key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

​

​ 2.对比规则：

​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 创建新的真实DOM，随后渲染到到页面。

​

​ 3. 用index作为key可能会引发的问题：

​ 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

​ 2. 如果结构中还包含输入类的DOM：

​ 会产生错误DOM更新 ==> 界面有问题。

​ 4. 开发中如何选择key?:

​ 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

​ 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

​ 使用index作为key是没有问题的。

1，在使用v-for语句生成li标签的时候，用index作为key值时

原理图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjVv00a1-1645883016126)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220129151020766.png)]

2.在使用v-for标签生成li标签的时候，用自身的id值作为key值时，

原理图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f9UZiy6c-1645883016127)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220129152137103.png)]

3，在使用v-for标签生成li标签的时候，没有写上key值，那么就会自动默认让index作为key值

3，列表过滤

将要实现的功能：在输入框里输入一个字，下面的信息就会发生改变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hd5XmjhQ-1645883016127)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220129170101481.png)]

<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for='p in filterPersons' :key='p.id'>
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false		
			
			// 用watch实现
			// new Vue({
			// 	el:'#root',
			// 	data:{
			// 		keyWord:'',
			// 		persons:[
			// 			{id:'001',name:'马冬梅',age:19,sex:'女'},
			// 			{id:'002',name:'周冬雨',age:20,sex:'女'},
			// 			{id:'003',name:'周杰伦',age:21,sex:'男'},
			// 			{id:'004',name:'温兆伦',age:22,sex:'男'}
			// 		],
			// 		filterPersons:[]
			// 	},
			// 	watch:{
			// 		keyWord:{
			// 			// 这个的目的就是，让列表初始化
			// 			immediate:true,
			// 			handler(val){
			// 				this.filterPersons = this.persons.filter((p)=>{
			// 				//indexOf方法是用来判断字符串中是否有某一个字符，如果有，就返回这个字符的index，如果没有就返回-1 
			// 				return p.name.indexOf(val) !== -1
			// 			})
			// 			}
						
			// 		}
			// 	}				
			// }) 
			// 用计算属性实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					
				},
				computed:{
					filPerson(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}			
			}) 
		</script>

4，列表排序

<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click='sortType=0'>年龄升序</button>
			<button @click='sortType=1'>年龄降序</button>
			<button @click='sortType=2'>原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0代表的原顺序，1代表着降序，2代表升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerson(){
						const arr=this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						// 判断一下是否需要排序
						if(this.sortType){
							arr.sort((a,b)=>{
								return sortType==1?b.age-a.age: a.age-b.age
							})
						}
						return arr
					}
				}
				
			}) 

		</script>

（13）vue检测数据的原理

1， vue是如何检测对象里面属性数据改变的

数据代理的过程：

  • 1，加工data(就是把data的每一组属性改成get和set方法来表示)
    • 为什么需要加工，就是为了做响应式，当页面的数据改变时，data里面的数据也会改变。
    • 原理就是，当页面上的name改变，那么set方法就会被调用，调用之后,就会重新解析模板，生成虚拟dom，然后新旧虚拟dom对比，生成新的页面
  • 2，vm._data=data

对象数据的检测就是根据加工data中的，set和get方法。

2，vue的set使用

使用场景：当你的代码data都已经写好，但是想要手动的去添加一个属性，直接在vm._data.sex这种方式添加，是不起作用的，不会生成sex的get和set的方法，不会做出响应式的改变，这个时候就可以使用VUE的一个API进行实现

语法：Vue.set(target,key,val) target参数是：往哪个属性中添加，key：添加的属性名，val：添加的属性值

案例：Vue.set(vm._data.student,‘sex’,‘男’)

和上面相同功能的一个命令：vm.$set(vm._data.student,‘sex’,‘男’)，也可用。

这里的vm._data.student都可以写成vm.student，因为数据代理的原因，这两个是同一个东西。

局限性：Vue.set方法只能给data里面的对象加一个属性，但是不能直接给data添加一个属性

3，vue是怎么检测数组改变的

当使用vue对data数据进行7种数组操作

  • 1，vue首先调用了数组原型的push方法。
  • 2，然后vue再对模板进行解析，更新页面的数据。

除了上面vue提供的7种数据操作，还可以用set方法对数组进行操作。

Vue.set(vm._data.student.hobby,1,‘打台球’) 就是对hobby数组里面的第2个数值改成 ’ 打台球 ’

同样是vm.$set(vm._data.student.hobby,1,‘打台球’)

4, vue数据检测

Vue监视数据的原理：

​ 1. vue会监视data中所有层次的数据。

​ 2. 如何监测对象中的数据？

​ 通过setter实现监视，且要在new Vue时就传入要监测的数据。

​ (1).对象中后追加的属性，Vue默认不做响应式处理

​ (2).如需给后添加的属性做响应式，请使用如下API：

​ Vue.set(target，propertyName/index，value) 或

​ vm.$set(target，propertyName/index，value)

​ 3. 如何监测数组中的数据？

​ 通过包裹数组更新元素的方法实现，本质就是做了两件事：

​ (1).调用原生对应的方法对数组进行更新。

​ (2).重新解析模板，进而更新页面。

​ 4.在Vue修改数组中的某个元素一定要用如下方法：

​ 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

​ 2.Vue.set() 或 vm.$set()

​ 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

​ 5.变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有不变更的方法，例如filter(),concat(),和 slice()

​ 他们不会变更原始数组，而需要返回一个新数组，当使用非变更方法是，可以用新数组替换旧数组

<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					Vue.set(this.student,'sex','男');
				},
				addFriend(){
					const newFriend = {name:'jeck',age:40}
					this.student.friends.unshift(newFriend)
				},
				updateFirstFriendName(){
					this.student.friends[0].name='张珊'
				},
				addHobby(){
					this.student.hobby.push('打游戏')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					Vue.set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby=this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
			
				}

			}
		})
	</script>

（14）收集表单数据

收集表单数据：

​ 若：，则v-model收集的是value值，用户输入的就是value值。

​ 若：，则v-model收集的是value值，且要给标签配置value值。

​ 若：

​ 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ 2.配置input的value属性:

​ (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ (2)v-model的初始值是数组，那么收集的的就是value组成的数组

​ 备注：v-model的三个修饰符：

​ lazy：失去焦点再收集数据

​ number：输入字符串转为有效的数字

​ trim：输入首尾空格过滤

<div id="root">
			<form action="" @submit.prevent='demo'>
				<label for="demo" >账号：</label>
				<!-- 修饰符trim就是输入首尾空格过滤 -->
				<input type="text" id='demo' v-model.trim='userinfo.account'><br/>
				账户：<input type="password" v-model='userinfo.password'><br/>
				年龄：<input type="number" v-model.number='userinfo.age'>
				性别：
				男：<input type="radio" name="sex" v-model='userinfo.sex' value='male'>
				女：<input type="radio" name="sex" v-model='userinfo.sex' value='female'><br/>
				爱好：学习<input type="checkbox" v-model='userinfo.hobby' value="study">
					打游戏<input type="checkbox" v-model='userinfo.hobby' value="game">
					吃饭<input type="checkbox" v-model='userinfo.hobby' value="eat"><br/>
				所属校区:
				<select userinfo.v-model='city'>
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
				</select><br/><br/>
				<!-- 修饰符lazy 就是当输入框失去焦点的时候，再进行收集数据 -->
				其他信息：<textarea name="" id="" cols="30" rows="10"v-model.lazy='userinfo.other'>
				</textarea><br/><br/>
				<input type="checkbox">
				阅读并接收<a href="http://www.baidu.com">《用户协议》</a>
				<button >提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userinfo:{
				account:'',
				password:'',
				sex:'female',
				hobby:[],
				city:'',
				other:'',
				age:''
				}
				
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userinfo))
				}
			}
		})
	</script>

（15）过滤器

过滤器：

​ 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

​ 语法：

​ 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

​ 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

​ 备注：

​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联

​ 2.并没有改变原本的数据, 是产生新的对应的数据

<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现  正常的时间 | 过滤器名字-->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') }}</h3>
			<!-- 多个过滤器的串联，time传给 timeFormater，得到的结果再传给mySlice-->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<!-- v-bind使用 -->
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>
		<!-- 模拟多个组件，两个vm实例，要使用全局过滤器 -->
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				// str在参数的位置给赋值，那就是默认的值，str如果为空那就使用默认的值，如果不为空，那就使用设置的值
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>

（16）内置指令

1，之前学的一些指令

  • v-bind : 单向绑定解析表达式, 可简写为 :xxx
  • v-model : 双向数据绑定
  • v-for : 遍历数组/对象/字符串
  • v-on : 绑定事件监听, 可简写为@
  • v-if : 条件渲染（动态控制节点是否存存在）
  • v-else : 条件渲染（动态控制节点是否存存在）
  • v-show : 条件渲染 (动态控制节点是否展示)

2，v-text指令

v-text指令：

​ 1.作用：向其所在的节点中渲染文本内容。

​ 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div id="root">
			<!-- 可以进行字符串的拼接 -->
			<div>你好，{{name}}</div> 
			<!-- 这种方式只能显示name -->
			<div v-text="name"></div>
			<!-- 不会识别str中的标签属性 -->
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>

3，v-html指令

v-html指令：

​ 1.作用：向指定节点中渲染包含html结构的内容。

​ 2.与插值语法的区别：

​ (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

​ (2).v-html可以识别html结构。

​ 3.严重注意：v-html有安全性问题！！！！

​ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

​ (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<div id="root">
			<div>你好，{{name}}</div>
			<!-- 可以识别str中的标签 -->
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</script>

4，v-cloak

v-cloak指令（没有值）：

​ 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

​ 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

5，v-once

v-once指令：

​ 1.v-once所在节点在初次动态渲染后，就视为静态内容了。

​ 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

6，v-pre

v-pre指令：

​ 1.跳过其所在节点的编译过程。

​ 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<div id="root">
			<!-- 给没有使用vue模板的标签加上，这样可以提高效率 -->
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

(17)自定义指令

自定义指令总结：

​ 一、定义语法：

​ (1).局部指令：

​ new Vue({ new Vue({

​ directives:{指令名:配置对象} 或 directives{指令名:回调函数}

​ }) })

​ (2).全局指令：

​ Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

​ 二、配置对象中常用的3个回调：

​ (1).bind：指令与元素成功绑定时调用。

​ (2).inserted：指令所在元素被插入页面时调用。

​ (3).update：指令所在模板结构被重新解析时调用。

​ 三、备注：

​ 1.指令定义时不加v-，但使用时要加v-；

​ 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- 当自定义指令的名称很长的时候，可以用-进行连接，但是在下面写方法名的时候，要用引号引起来 -->
			<h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

// 全局自定义指令
		// 方式1
		Vue.directive('big1',function(element,binding){
			console.log(this) // 这里的this是windows，在directives里面的this都是windows       
            element.innterText = binding *10

		})
		// 方式2
		Vue.directive('fbind1',{
			bind(element,binding){
						element.value = binding.value
					},
					// 指令所在的元素被插入页面时,元素放在页面之后
					inserted(element,binding){
						element.focus()
					},
					// 指令所在模板被重新解析时
					updated(element,binding){
						// 当模板重新解析的时候，给元素中放入内容进行赋值
						element.value = binding.value
					}
		})

		new Vue({
			el:' #root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				// big函数在什么时候被调用？1，是指令与元素成功绑定时（一上来）。2，指令所在的模板被重新解析时
				// element是一个真实的dom标签，binding就是和这个标签绑定在一起的值
				big(element,binding){     
					console.log(this) // 这里的this是windows，在directives里面的this都是windows                              
                    element.innterText = binding *10
				},
				fbind:{
					// 指令与元素成功绑定时(一上来)，元素已经有了，但是还没放到页面
					bind(element,binding){
						element.value = binding.value
					},
					// 指令所在的元素被插入页面时,元素放在页面之后
					inserted(element,binding){
						element.focus()
					},
					// 指令所在模板被重新解析时
					updated(element,binding){
						// 当模板重新解析的时候，给元素中放入内容进行赋值
						element.value = binding.value
					}
				}
			}
		})
		
	</script>

（18）生命周期

1，生命周期的概念

​ 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

​ 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

​ 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

​ 4.生命周期函数中的this指向是vm 或 组件实例对象。

2，生命周期实例

<div id="root" :x="n">
			<h2 v-text="n"></h2>
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{{n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			// 无法通过vm访问到data中的数据，methods中的方法
			// 指的是数据检测,数据代理创建之前
			beforeCreate() {
				console.log('beforeCreate')
			},
			// 可以通过vm访问到data中的数据，methids中配置的方法
			created() {
				console.log('created')
			},
			// 此时,页面呈现的是未经Vue编译的DOM结构.所有对DOM的操作,最终都不奏效
			beforeMount() {
				console.log('beforeMount')
			},
			// 页面中呈现的是经过VUE编译的Dom.对Dom的操作均有效(尽可能避免),至此初始化过程结束,
			// 一般在此进行:开启定时器,发送网络请求,订阅消息,绑定自定义时间等初始化操作
			mounted() {
				console.log('mounted')
			},
			// 此时:数据是新的,但页面是就的,即是:页面和数据同步
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			// 此时:数据是新的,页面也是新的,即:页面和数据保持同步
			updated() {
				console.log('updated')
			},
			// 此时:vm中所有的:data,methods，指令等等，都处于可用状态，马上要执行销毁过程，
			// 一般在这个阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾工作
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})
	</script>

3，总结生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZzaZVBZ-1645883016128)(资料（含课件）/资料（含课件）/02_原理图/生命周期.png)]

常用的生命周期钩子：

​ 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

​ 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

​ 关于销毁Vue实例

​ 1.销毁后借助Vue开发者工具看不到任何信息。

​ 2.销毁后自定义事件会失效，但原生DOM事件依然有效。

​ 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

<div id="root">
			<h2 :style="{opacity}">欢迎学习Vue</h2>
			<button @click="opacity = 1">透明度设置为1</button>
			<button @click="stop">点我停止变换</button>
		</div>

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		 new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			methods: {
				stop(){
					// 让变化透明度的文字停止方式1
					// clearInterval(this.timer)
					// 暴力的清除的定时器，同时将vm清除
					// 在beforeDestory设置将定时器去掉
					this.$destroy()
				}
			},
			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				this.timer = setInterval(() => {
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},
		})

	</script>

4，vue的组件化编程

（0）传统方式编写应用与组件方式编写应用

代码的复用率是指的是，html的代码不能复用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKSfzQBY-1645883016129)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220205214022602.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqdlrKwR-1645883016130)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220205220905752.png)]

（1）模块与组件，模块化与组件化

1，模块

理解：向外挺特定功能的js程序，一般就是一个js文件

作用：复用js，简化js的便携，提高js的运行效率

2，组件

概念：就是实现应用中局部功能代码（css,html,js）和资源(mp3,mp4,)的集合

作用：复用编码，简化项目编码，提高运行效率

3，模块化

当应用中的js都是以模块来编写的，那这个应用就是一个模块化的应用

4，组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

5，非单文件组件

一个文件中包含有n个组件

（1）基本使用方式
  • Vue中使用组件的三大步骤：

    • ​ 一、定义组件(创建组件)

    • ​ 二、注册组件

    • ​ 三、使用组件(写组件标签)

      一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
	区别如下：
			1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
			2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
			备注：使用template可以配置组件结构。

二、如何注册组件？
				1.局部注册：靠new Vue的时候传入components选项
				2.全局注册：靠Vue.component('组件名',组件)

三、编写组件标签：
				<school></school>

<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步 编写组件标签 -->
			<school></school>
			<hr>
			<student></student>
			<hr>
		</div>
		<div class="root2">
			<!-- 可以使用全局配置的全局组件 -->
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 第一步：创建一个school组件
		const school = Vue.extend({
			// 里面的配置项是和创建vm中的配置几乎是一样的
			// el:'#root', 组件里面一定不要写el配置，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
			// html结构
			template:`
				<div>
				<h2>学校名称：{{name}}</h2>
				<h2>学校地址：{{address}}</h2>
				</div>
				<button>点我提示学校名称</button>
			`,
			data(){
				return{
					schoolName:'尚硅谷',
					address:'北京昌平'
				}				
			}
		})
		// 创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return{
					studentName:'张三',
					age:9
				}
			}
		})		
		new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			// 第二步：局部注册组件
			components:{
				school:school,  //可直接写成简写形式 school
				student
			}
		})
//全局注册方式
		// 第一步：创建一个hello组件
		const hello = Vue.extend({
			data(){
				return {
					msg:'hello'
				}
			}
		})
		// 第二步 全局注册组件
		Vue.component('hello',hello)
	</script>
（2）关于组件的注意点

几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

​ 2.关于组件标签:

​ 第一种写法：

​ 第二种写法：

​ 备注：不用使用脚手架时，会导致后续组件不能渲染。

​ 3.一个简写方式：

​ const school = Vue.extend(options) 可简写为：const school = options

（3）组件的嵌套

​ 案例：

app组件的存在

<div id="root">
			<app></app>
		</div>
//定义student组件,作为school的子组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		// 定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return{
					msg:'hello'
				}
			}
		})
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>
					<student></student>	//嵌套组件
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			components:{
				student,
			}			
		})
		// 定义app组件
		const app=Vue.extend({
			template:`
			<div>
			<hello></hello>
			<school></school>
			</div>
			`,
			components:{
				school,
				hello
			}
		})		
		//创建vm
		new Vue({
			el:'#root',
			//注册组件（局部）
			components:{
				app
			}
		})
	</script>

（4）VueComponent实例对象

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
						即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：
	(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
	(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
	Vue的实例对象，以后简称vm。

（5）一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

// 往Vue的原型对象上面放一个属性
Vue.prototype.x = 99
//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					console.log(this.x) // 在组件实例对象上面也可以访问到Vue原型对象上的属性x
				}
			},
		})
		//创建一个vm
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})

6，单文件组件

一个文件中只有一个组件 a.vue

单文件起名准则：

1，若是一个单词命名，school.vue/School.vue 一般用第二种

2，若是多个单词命名，my-school.vue / MySchool.vue 一般使用第二种

普通的vue组件

// School.vue
<template>
      <!-- 组件的结构 -->
      <div class='demo'>
           <h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
          <button>点我提示学校名称</button>
      </div>
</template>

<script>
// 组件交互相关的代码（数据，方法等等）
// 类似于模块化，对school进行暴露，
// 有三种暴露方式
// 1，主动暴露
// 2，统一暴露
// 3，默认暴露
export default Vue.extend({
			data(){
				return{
					schoolName:'尚硅谷',
					address:'北京昌平'
				}				
			}
		})
// 简写形式,加上name
export default {
     name:'School',
     data(){
				return{
					schoolName:'尚硅谷',
					address:'北京昌平'
				}				
			}
}
</script>

<style>
     /* 组件的样式 */
     .demo{
          background-color: antiquewhite;
     }
</style>

App组件 ,所有的普通组件，都交给他管理

<template>
  <div>
       <school></school>
  </div>
</template>

<script>
// 引入组件
import School from './School'
import School from './School.vue'
  export default {
     name:'App',
     components:{
          School
     }

   }
</script>

<style>

</style>

main.js ，new一个Vue实例，对App组件进行管理，

import App from './App.js'
new Vue({
     el:'#root',
     template:`<App></App>`,
     components:{
          App
     }
})

index.html

 <div id="root">
          <!-- 可以省略，写到main.js里面 -->
          <!-- <App/> --> 
     </div>
     <script type="text/javascript" src="./vue.js"></script>
     <script type="text/javascript" src="./main.js"></script>

（2）vue-cli

(1)脚手架创建之后的文件解析

脚手架创建之后的项目得我

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

(2)使用脚手架创建的项目分解

index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个特殊配置，含义是让Ie浏览器是以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图表，<%= BASE_URL %>这个就相当于 ./  为了避免有路径问题 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标签 就是直接去找packsge.json里面的name进行配置-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js时 这句话就会显示在页面上面-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

/**
 * 改文件是整个项目的入口文件
 */
// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象 -- vm
new Vue({
     // 完成了这个功能：就是将App组件放入容器中
     // 为什么要用render是因为上面在引入vue的时候是引入的残缺版的，没有模板解析器
     // 所以要使用render对页面进行渲染
     // render(createElement){
     //      return createElement('h1','你好啊')
     // }
     // 上面那句话，简写之后就是 return:h=>h('h1','你好啊') h1加引号是因为h1是html的内置元素
     render: h => h(App),
}).$mount('#app')

// .$mount('#app') 上面的代码就类似于下面的代码
// new Vue({
//      el:'#app',
//      render: h => h(App),
// })

App.vue

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School.vue'
	import Student from './components/Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

School.vue

<template>
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>
<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.name);
    },
  },
};
</script>
<style>
.demo {
  background-color: orange;
}
</style>

(3)关于新建项目中的注意点

1，在mian.js里面的reader的使用

在main.js中的import Vue from ‘vue’，其实引入的是一个残缺的Vue，这个Vue只是带有Vue核心内容，没有带模板解析器。所以在main.js里面并不能使用模板解析器，要使用render进行手动模板解析。这条代码只需要在main.js里面使用，因为在其他的组件里面，使用的是template标签，在vue里面，是有解析template标签的模块。

2，关于不同模块的Vue
  1. vue.js与vue.runtime.xxx.js的区别：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

(4)ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx

案例

<template>
  <div>
       <!-- 获取一个DOM元素，js里面都是用document的一些方法进行获取，但是vue有自己的方法
       就是往想要获取的元素身上加上ref属性，用ref进行获取Dom元素 -->
       <h1 v-text="msg" ref="title"></h1>
       <button @click="getMag" ref="btn">点我获取上方的文字</button>
       <School ref="school"/>
  </div>
</template>

<script>
// 引入School组件
import School from './components/School.vue'
export default {
     name:'App',
     data(){
          return{
               msg:'欢迎学习'
          }
     },
     methods:{
          getMag(){
               console.log(this.$refs.title) //输出的是真实DOM元素
               console.log(this.$refs.btn)//输出的是真实DOM元素
               console.log(this.$refs.school)//输出的是School组件的实例对象
          }
     },
     components:{
          School
     }
}
</script>

(5)props属性

  1. 功能：让组件接收外部传过来的数据

  2. 传递数据：<Demo name="xxx"/>

  3. 接收数据：

    1. 第一种方式（只接收）：props:['name']

    2. 第二种方式（限制类型）：props:{name:String}

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

App.vue
<template>
  <div>
      <!-- 在进行传数据的时候，value是必须要用引号引起来的， 但是想要传一个number类型的数据过去
      就要使用v-bind，这样引号里面的内容就不会被当成一个字符串，而是一个js表达式-->
       <Student name='李四' sex='女' :age='18'/>
  </div>
</template>


Student.vue
<template>
  <div>
       <h1>{{msg}}</h1>
       <h2>学生姓名：{{name}}</h2>
       <h2>学生性别：{{sex}}</h2>
       <h2>学生年纪：{{age+1}}</h2>
       <button @click="updateAge">修改prop接收的数据</button>
  </div>
</template>

<script>
export default {
     name:'Student',
     data(){
          return{
             msg:'我是一个尚硅谷的学生',
          //    在运行组件的时候，会优先加载props里面的数据，所以这里可以获取传过来的数据
             myAge:this.age  
          }
     },
     methods:{
          updateAge(){
               // 由于不能直接修改prop传过来的值，所以只能是利用中间变量myAge
               this.myAge++
          }
     }
     // 在使用Student组件的时候，传进来的参数，需要在这里进行定义
     // props:['name','sex','age'] 简单声明接收
     // 接收的同时对数据进行类型限制
     // props:{
     //      name:String,
     //      sex:String,
     //      age:Number
     // }

     // 接收的同时对数据：进行类型的限制+默认值的限定+必要性的限制
     props:{
          name:{
               type:String,
               required:true //name是必要的
          },
          age:{
               type:Number,
               default:99 //如果没有传，那就是默认值
          },
          sex:{
               type:String,
               required:true
          }
     }
}
</script>

(6)mixin混入

  1. 功能：可以把多个组件共用的配置提取成一个混入对象

  2. 比如School中有一个method和Student中有一个同样的method，那就可以把这个method定义在mixin.js中，在后再在组件中进行引入。

  3. 使用方式：

    第一步定义混合：

    {
    data(){....},
    methods:{....}
    ....
}

    第二步使用混入：

     全局混入：```Vue.mixin(xxx)```
 局部混入：```mixins:['xxx']	```

案例：

定义mixin.js

export const hunhe ={
     methods:{
          showName(){
               alert(this.name)
          }
      }
}

局部引入：

// School组件中引入

<script>
// 引入一个mixin混合
import {hunhe} from '../maxin'
export default {
     name:'School',
     data(){
          return {
            name:'尚硅谷',
            address:'北京，昌平'   
          }
     },
     // 引入mixin.js里面的资源
     // 原则是，如果是数据，或者方法，自己声明的data中也有，mixin中也有，那就是以data、methin中的为主
     // 但是如果本文件中写了生命周期钩子，mixin中也写了生命周期钩子，那么这两个方法都会被实现，会先实现mixin里面的
     mixins:[hunhe] 
}
</script>

全局引入：

//main.js

// 在main.jsz中全局引入mixin，引入之后，所有的组件都可以用到hunhe内的方法
import {hunhe} from './maxin'

(7)vue插件

  1. 功能：用于增强Vue

  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

  3. 定义插件：

    对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

  4. 使用插件：Vue.use()（一般是在main.js中引入插件）

定义插件plugins.js插件文件

const obj = {
     install(Vue){
          console.log('@@@install')
          // 定义一个全局的过滤器
          // 定义全局指令
          // 定义混入
          Vue.mixin({})
          // 给Vue原型上添加一个方法（vm和vc就都可以用了）
          Vue.prototype.hello = ()=>{
               alert('你好啊')
          }
     }
}

export default obj

(8)scoped样式

情景就是，当多个组件在运行的时候，如果组件中的style的class，名字有重复的，就会有冲突。显示的结果就是使用引入的第二个组件中的样式。

为了避免这个冲突，就可以在style标签中加上scoped，那就是限制了样式的作用域

scoped的作用：

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：<style scoped>

(9)Todolist案例总结

  1. 组件化编码流程：

     (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
 
 (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
 
 		1).一个组件在用：放在组件自身即可。
 
 		2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。
 
 (3).实现交互：从绑定事件开始。

  2. props适用于：

     (1).父组件 ==> 子组件 通信
 
 (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

(10)浏览器本地存储

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。无论传的value值是什么类型的，都会自动转换成String类型的，
      如果想要将对象进行存储，那就用JSON.stringifg(person)进行转换成字符串

    2. xxxxxStorage.getItem('person');

       	该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

       	该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

       	该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

(11)组件自定义事件

1,给组件绑定一个自定义事件

案例需求：在School组件里面新加一个按钮，点击按钮就把School里面的属性传到App组件里面

//App.vue
 <School :getSchoolName="getSchoolName"/>
//School.vue
     <button @click='sendNameToApp'>把学校名给App</button>
 	methods:{
          sendNameToApp(){
               this.getSchoolName(this.name)//使用App中的方法
          }
     }



//App.vue
 <!-- 通过父组件和子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@或者v-on) -->
 <!-- 意思就是在Student组件的实例对象上加了一个点击事件，当这个点击事件被使用的时候，demo函数就被调用 -->
       <Student v-on:atguigu='getStudentName'/>
           
//Student.vue
     methods:{
          sendStudentName(){
               // 在方法中调用App传来的点击事件atguigu，并且第二个参数就是传入的一个参数
               this.$emit('atguigu',this.name) //直接使用
          }
     }

​ 

//App.vue
<!-- 这种写法是比较灵活的，比如是当页面加载完之后，等5秒钟再非student组件加上某一个方法
       这种比较细节的需求，就可以使用这种方法 -->
       <student ref="student"/>
           
        mounted(){
          // 当APP组件挂载完毕之后，当student实例对象调用了atguigu事件时，getStudentName就会被调用
          this.$refs.student.$on('atguigu',this.getStudentName)
     }
   //Student.vue
     methods:{
          sendStudentName(){
               // 在方法中调用App传来的点击事件atguigu，并且第二个参数就是传入的一个参数
               this.$emit('atguigu',this.name) //直接使用
          }
     }
2，给组件解绑一个自定义事件
// Student.vue
<button @click='unbind'>解绑atguigu事件</button>

methods:{
    unbind(){
               this.$off('atguigu') //只是用适用于解绑一个事件
               this.$off(['atguigu','demo'])  //解绑多个事件
               this.$off() //解绑所有的自定义事件
          }
}
3，自定义组件总结

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

(12)全局事件总线

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 安装全局事件总线：

    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

  3. 使用事件总线：

    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：this.$bus.$emit('xxxx',数据)

  4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

案例：

// main.js
new Vue({
    el:'#app',
    render:h =>h(App),
    // 在数据代理还没开始之前，给Vue的原型上面添加这个vm
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    }

})

//School.vue
//将方法加入到全局事件总线上面
methods:{
         getStudentName(studentName){
              console.log(studentName)
         }
    },
    mounted(){
     //     $on 就是说当getStudentName执行的时候，就调用this.getStudentName方法
         this.$bus.$on('getStudentName',this.getStudentName)
    },
    beforeDestroy(){
         this,$off('getStudentName')
    }

// Student.vue
// 使用全局事件总线
<button @click='sendStudentName'>将学生姓名传给School</button>

 methods:{
          sendStudentName(){
               // 调用getStudentName方法并且传入参数
               this.$bus.$emit('getStudentName',this.name)
          }
     }

(13)消息订阅

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

    4. 提供数据：pubsub.publish('xxx',数据)

    5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

案例：

// School.vue
mounted(){
     //    订阅消息，当调用hello事件的时候，执行回调函数
          this.pubId=pubsub.subscribe('hello',(msgName,data)=>{

               console.log('有人发布了hello消息，hello消息的回调执行了')
          })
     },
     beforeDestroy(){
          pubsub.subscribe(this.pubId)
     }

//Student.vue
 methods:{
          sendStudentName(){
               pubsub.publish('hello',this.name)
          }
     },

(14)nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
// 需求就是当点击编辑的时候，就要获取输入框的焦点，但是对于下面的方法来说，在点击编辑的时候，要先进行判断todo中的isEdit是否存在，如果直接在下面写的话，就相当于input框还没出来，就已经加上焦点的功能了，所以直接在下面写是不奏效的。
itemEdit(todo){
            // if(todo.hasOwnProperty('isEdit')){
            if(Object.hasOwnProperty.call(todo,'isEdit')){
                todo.isEdit = true
            }else{
                this.$set(todo,'isEdit',true)
            }
            this.$nextTick(function(){
              this.$refs.inputTitle.focus()
            })           
  },
  // 当执行这个方法的时候，执行完if..else，不会先执行nextTick调用的方法，而是等if..else执行形成真正的dom元素的时候，在执行这个nextTick调用的方法，类似于定时器的作用。

(15) Vue脚手架配置代理

方法一：

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

// 使用的时候
axios.get('http://localhost:8080/student').then(
	response=>{
        console.log(response.data)
    },
    error=>{
        console.log(error.message)
    }
)

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
方法二：

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        ws:true,  //用于支持websocket
        changeOrigin: true, 
        pathRewrite: {'^/api1': ''}//将8080代理服务器中的/api1的换成空字符串，转发给5000的服务器
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。
getStudent(){
               axios.get('http://localhost:8080/api1/student').then(
                    response =>{
                         console.log('请求成功了',response.data)
                    },
                    error =>{
                         console.log('请求失败',error.message)
                    }
               )
          }

(16) vue-resource

这个的作用就是类似于axios，用来一部传输数据的。这个是一个插件。

首先进行下载 npm i vue-resource

在main.js中引入插件

//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

传输数据时的使用方式：(和axios的使用方式是一样的)

this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
					response => {
						console.log('请求成功了')
						//请求成功后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
					},
					error => {
						//请求后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
					}
				)

(17)插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

      父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

        父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

5，vuex

（1）概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

1，使用全局事件总线，让x在任何组件中能得到也能修改。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03nLNJC4-1645883016131)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220212193809368.png)]2，使用vuex实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5dKCF6C-1645883016132)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220212194132319.png)]

（2）何时使用

多个组件需要共享数据时

（3）vuex的原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0MoqPCr-1645883016133)(资料（含课件）/资料（含课件）/02_原理图/vuex.png)]

（4）搭建vuex环境

1，下载vuex

npm install --save vuex@版本号

注;使用vue2 的最好下载的是vuex3，vue3的最好下载vuex4，不然写代码时会有报错

2，搭建vuex环境

  1. 创建文件：src/store/index.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

  2. 在main.js中创建vm时传入store配置项

    ......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store  //在vm中配置store
})

3，基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

（5）getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

  3. 组件中读取数据：$store.getters.bigSum

（6）四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

（7）案例

index.js

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备action-用于响应组件中的动作
const actions = {
     jia(context,value){
          context.commit('JIA',value)
     },
     jian(context,value){
          context.commit('JIAN',value)
     },
     jiaOdd(context,value){
          if(context.state.sum % 2 !=0){
            context.commit('JIA',value)   
          }
          
     },
     jiaWait(context,value){
          setTimeout(() => {
               context.commit('JIA',value)
          }, 500);
          
     },
}
// 准备mutations-用于操作数据（state）
const mutations = {
     JIA(state,value){
          state.sum += value
     },
     JIAN(state,value){
          state.sum -= value
     },
}
// 准备satae -- 用于存储数据
const state = {
     sum:0,
     school:'尚硅谷'
}
// 准备getter-- 用于将state中的数据进行加工
const getters = {
     bigSum(state){
          return state.sum*10
     }
}
export default new Vuex.Store({
     actions,
     mutations,
     state,
     getters
})

Count.vue

<template>
    <div>
         <h1>当前求和为：{{sum}}</h1>
         <h1>当前求和放大10倍为：{{bigSum}}</h1>
         <h1>所在学校为：{{school}}</h1>
         <select v-model='value'>
              <option :value="1">1</option>
              <option :value="2">2</option>
              <option :value="3">3</option>
         </select>
         <!-- 当使用mapMutations和mapActions时，方法必须要带参数 -->
         <button @click='add(value)'>+</button>
         <button @click='sub(value)'>-</button>
         <button @click='addOdd(value)'>当前求和为奇数再加</button>
         <button @click='addWait(value)'>等一等再加</button>
    </div>

</template>

<script>
import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
export default {
     name:'Count',
     data(){
          return{
               value:1
          }
     },
     // 为了避免在插值语法中写太多公式代码,自己写计算属性
     computed:{
     // 自己写方法
          // sum(){
          //      return this.$store.state.sum
          // },
          // school(){
          //      return this.$store.state.school
          // },
     // 借助mapState生成计算属性，从state中读取数据（对象写法）
          // 注：下面不能写成简写形式，因为后面的sum是一个字符串，并不是一个变量
          // ...mapState({sum:'sum',school:'school'})
     // 借助mapState生成计算属性，从state中读取数据（数组写法） 
          // 数组里的sum有两个用途，一个是声明的计算属性叫sum，另一个是state中的变量名也叫sum
          ...mapState(['sum','school']),
     /******************************* */
     // 自己写方法
          // bigSum(){
          //      return this.$store.getters.bigSum
          // }   
     //使用 mapGetters
          // 对象写法
          // ...mapGetters({bigSum:'bigSum'})
          // 数组写法
          ...mapGetters(['bigSum'])              
     },
     methods:{
          // add(){
          //      // 可以直接跳过action层，直接访问commit
          //      // this.$store.dispatch('jia',this.value)
          //      this.$store.commit('JIA',this.value)
          // },
          // sub(){
          //       // 可以直接跳过action层，直接访问commit
          //      // this.$store.dispatch('jian',this.value)
          //       this.$store.commit('JIAN',this.value)
          // },
     // 使用mapMuations来取代上面的代码，生成对应的方法，方法中会调用communit去联系Mutations，进而做到简化的作用
          // 上面的两个方法是直接和mutations进行对话的，所以使用mapMutaition方法
           ...mapMutations({add:'JIA',sub:'JIAN'}),
         //还有数组的写法，但是需要方法名和commint中的名是一样的时候，才可以，例如：
          // ...mapMutations(['JIA','JIAN']),
     /********************************************** */
     // 使用mapActions来取代上面的代码，生成对应的方法，方法中会调用dispatech去联系Actions，
          // addOdd(){
          //      this.$store.dispatch('jiaOdd',this.value)
          // },
          // addWait(){
          //      this.$store.dispatch('jiaWait',this.value)
          // },
          ...mapActions({addOdd:'jiaOdd',addWait:'jiaWait'})
          // 同样也有数组的写法
     }     
}
</script>

<style>
button{
     margin-left: 5px;
}
</style>

（8）vuex模块化

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

案例：

Person.vue

<template>
    <div>
          <h1>人员列表</h1>
          <h2>Count组件求和为：{{sum}}</h2>
          <h2>显示列表中的第一个人的名字：{{showPersonName}}</h2>
          <input type="text" placeholder="请输入姓名" v-model="name">
          <button @click="add">添加</button> 
          <button @click="addWang">添加一名姓王的人员</button>
          <ul v-for='p in personList' :key='p.id'>
               <li>{{p.name}}</li>
          </ul>
    </div>
</template>
<script>
import {nanoid} from 'nanoid'
import { mapState} from 'vuex'
export default {
     name:'Person',
     data(){
          return {
               name:'',
          }
     },
     computed:{
          // 简写方式
          ...mapState('CountAbout',['sum']),
          // 自己写
          personList(){
               return this.$store.state.PersonAbout.personList
          },
          showPersonName(){
               return this.$store.getters['PersonAbout/showPersonName']
          }
     },
     methods:{
          add(){
               const personObj = {id:nanoid(),name:this.name}
               this.$store.commit('PersonAbout/ADD',personObj)
               this.name=''
          },
          addWang(){
               const personObj = {id:nanoid(),name:this.name}
               this.$store.dispatch('PersonAbout/personWang',personObj)
          }
     }
     
}
</script>

count.vue

<template>
    <div>
         <h1>当前求和为：{{sum}}</h1>
         <h1>当前求和放大10倍为：{{bigSum}}</h1>
         <h1>所在学校为：{{school}}</h1>
         <h1>person中的人数是：{{personList.length}}</h1>
         <select v-model='value'>
              <option :value="1">1</option>
              <option :value="2">2</option>
              <option :value="3">3</option>
         </select>
         <!-- 当使用mapMutations和mapActions时，方法必须要带参数 -->
         <button @click='add(value)'>+</button>
         <button @click='sub(value)'>-</button>
         <button @click='addOdd(value)'>当前求和为奇数再加</button>
         <button @click='addWait(value)'>等一等再加</button>
    </div>

</template>

<script>
import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
export default {
     name:'Count',
     data(){
          return{
               value:1
          }
     },
     
     computed:{
          // 如果在index.js中
          ...mapState('CountAbout',['sum','school']),
          ...mapState('PersonAbout',['personList']),
          ...mapGetters('CountAbout',['bigSum'])              
     },

     methods:{        
           ...mapMutations('CountAbout',{add:'JIA',sub:'JIAN'}),
          ...mapActions('CountAbout',{addOdd:'jiaOdd',addWait:'jiaWait'})
     }
     
}
</script>

（9）在action中使用axios

在action中：

//     接收服务器的数据，不用传递参数
         addPersonServe(context){
          axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
               response =>{
                    context.commit('ADD',{id:nanoid(),name:response.data})
               },
               error=>{
                    alert(error.message)
               }
          )
         }
     },

在Person.vue中：

 <button @click='addPersonServe'>添加一个人，名字随机</button>

 methods:{
     addPersonServe(){
               this.$store.dispatch('PersonAbout/addPersonServe')
          }
 }

6，路由

（1）原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B9nUuUgZ-1645883016133)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220214204002494.png)]

（2）概念

  1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
  2. 前端路由：key是路径，value是组件。

（3）基本使用

1，安装vue-router

npm i vue-router

注意版本问题，如果是用的vue2，那vue-router最好用3.0版本，不然会有问题，要用最新的vue-router，最好看文档去写。

2，引入vue-router ，并且使用插件

main.js

import vueRouter from 'vue-router'
Vue.use(vueRouter)
new Vue({
    el:'#app',
    render:h =>h(App),
    router
})

3,新建router文件，并且创建index.js文件

// 引入路由器
import vueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
// 配置路由器，并添加路由的配置项
const router = new vueRouter({
     routes:[
          {
               path:'/about',
               component:About
          },
          {
               path:'/home',
               component:Home,
          }
     ]
})
export default router

4，实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

这里的这个标签最终会变成标签

5，指定展示位置

<router-view></router-view>

（4）几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

（5）多级路由

  1. 配置路由规则，使用children配置项：

    routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

  2. 跳转（要写完整路径）：

    <router-link to="/home/news">News</router-link>

案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4yARLzWt-1645883016134)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220215173130618.png)]

代码结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5uJ0R612-1645883016134)(C:/Users/Wlijun/AppData/Roaming/Typora/typora-user-images/image-20220215173201726.png)]

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import vueRouter from 'vue-router'
// 使用vueRouter
Vue.use(vueRouter)
// 引入路由配置项
import router from './router'
Vue.config.productionTip = false
new Vue({
    el:'#app',
    render:h =>h(App),
    router

})

App.vue

<template>
    <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->
          <!-- vue中借助rout-link标签实现路由的切换-->
          <router-link class="list-group-item" active-class='active' to='/about'>About</router-link>
          <router-link class="list-group-item" active-class='active' to='/home'>Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定主键的呈现视图 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>

router/index.js

// 该文件专门用于整个应用的路由器

// 引入路由器
import vueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
// 配置路由器，并添加路由的配置项
const router = new vueRouter({
     routes:[
          {
               path:'/about',
               component:About
          },
          {
               path:'/home',
               component:Home,
               children:[
                    {
                         path:'news',
                         component:News
                    },
                    {
                         path:'message',
                         component:Message
                    }
               ]
          }
     ]
})
export default router

About.vue

<template>
  <div>
    <h2>About组件内容</h2>
  </div>
</template>
<script>
export default {
     name:'About'

}
</script>

<style>

</style>

Home.vue

<template>
  <div>
    <h2>我是Home的内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/news"
            >News</router-link
          >
        </li>
        <li>
          <router-link
            class="list-group-item active"
            active-class="active"
            to="/home/message"
            >Message</router-link
          >
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>

News.vue

<template>
  <ul>
     <li>news001</li>
     <li>news002</li>
     <li>news003</li>
</ul>
</template>
<script>
export default {
     name:'News'

}
</script>

<style>

</style>

Message.vue

<template>
  <ul>
     <li>
          <a href="/message1">message001</a>&nbsp;&nbsp;
     </li>
     <li>
          <a href="/message2">message002</a>&nbsp;&nbsp;
     </li>
     <li>
          <a href="/message/3">message003</a>&nbsp;&nbsp;
     </li>
 </ul>
</template>

<script>
export default {
     name:'Message'
}
</script>

<style>

</style>

（6）路由的query参数

  1. 传递参数

    <!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

  2. 接收参数：

    $route.query.id
$route.query.title

（7）命名路由

  1. 作用：可以简化路由的跳转。

  2. 如何使用

    1. 给路由命名：

      {
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello'     //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

    2. 简化跳转：

      <!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 注意要在to前面加上：-->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

（8）路由的params参数

  1. 配置路由，声明接收params参数

    {
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

  2. 传递参数

    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

    特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  3. 接收参数：

    $route.params.id
$route.params.title

（9）props属性配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件，但是这只能传递写死的数据
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

// 在组件接收方式
...
<h2>消息的id：{{id}}</h2>
<h2>消息的标题：{{title}}</h2>
...
props:['id','title']

（10）route-link标签的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push和replace，数据结构为栈结构
    push是追加历史记录，当产生一次新路径的时候，不会破坏之前的路径，通过在栈内移动指针，来进行显示前一个记录还是后一个记录。
    replace是替换当前记录。和push相比，是破坏了之前的记录，栈内只存在最新的记录。
    路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

（11）编程式路由导航

  1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  2. 需求：当使用进行跳转的时候，是自动转换成a标签的，如果html文件中，跳转链接并不是a标签，而是按钮的时候，就不能使用，就使用自行编程式路由导航

  3. 具体编码：

    //$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.forward() //前进，跳转历史链接中的前进
this.$router.back() //后退
this.$router.go(m) //可前进也可后退,m就是前进或者后退的步数

案例：

在页面中加上两个按钮，实现点击按钮，跳转到链接并且携带参数

........ 
<button @click='pushShow(m)'>push查看</button>
 <button @click='replaceShow(m)'>replace查看</button>

.........
methods:{
          pushShow(m){
               this.$router.push({  //使用push实现路由跳转
                    name:'xiangqing',
                    path:'detail', 
                    params:{
                         id:m.id,
                         title:m.title
               }
               })
          },
          replaceShow(m){
               this.$router.replace({
                    name:'xiangqing',
                    path:'detail', 
                    params:{
                         id:m.id,
                         title:m.title
               }
               })
          }

（12）缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。

  2. 需求：当组件所在的视图被切换时，这个组件其实是被销毁了，这样容易把组件中保存的数据也被销毁，为了避免某些组件中的数据不被销毁，就可以进行缓存。

  3. 具体编码：

    // 如果不是用include，那此视图内所有的组件都会被缓存，
// 加上include，就只有News组件被缓存
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>
// 若有多个组件需要缓存，那就可以写成数组的形式
:include=['News','Message']

（13）两个新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
  2. 需求：比如一个组件设置了路由缓存，切换组件的时候，该组件并没有被销毁，但是当这个组件中需要添加定时器的时候，定时器的关闭，一般都会写在组件销毁之前的函数里，当组件不被销毁时，定时器会一直开着，很影响效率。这时可以利用下面这两个钩子函数
  3. 具体名字：
    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。

（14）路由守卫

  1. 作用：对路由进行权限控制

  2. 分类：全局守卫、独享守卫、组件内守卫

  3. 全局守卫:

    //全局前置守卫：初始化时执行、每次路由切换前执行
/**to:要去的地方，from：从哪来，next就是放行的意思  */
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
    // 在给组件加上一个属性，来判断该组件是不是需要加权限
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

  4. 独享守卫:

    // 就是在一个需要受限的组件中写上，独享守卫只有这一个方法
beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

  5. 组件内守卫：

    // 注意和全局守卫的概念分开

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

（15）路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
  3. hash模式：
    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式：
    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
# vue.js # javascript # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云开源项目Sermant正式成为CNCF官方项目

avatar 华为开发者空间
cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间