Vue学习笔记

已于 2022-03-30 16:02:41 修改
阅读量620 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vue.js 学习 javascript
于 2022-03-11 16:01:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42482333/article/details/123408543

1. 概述

1.1 VUE介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式(灵活)框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 插值表达式 内容 data中对象的属性 -->
			<h1>{{hello}}</h1>
		</div>
		
		<!-- 1.导入vue.js的类库 -->
		<script src="../js/vue.js"></script>
		<!-- 2.编辑VUE js -->
		<script>
			//新规定:  1.结尾的;号可以省略   2.字符一般使用'单引号'
			//补充知识:  var: js中声明变量的修饰符 没有作用域的概念
			//    1.const 定义常量的
			//    2.let   有作用域的变量声明.
			
			//1.实例化VUE对象   函数式编程
			const app = new Vue({
				//1.定义el元素 要在哪个位置使用vue进行渲染
				el: "#app",
				//2.定义数据对象
				data: {
					hello: 'VUE入门案例!!!!'
				}
			})
		</script>
	</body>
</html>

总结：

  1. el元素:要在哪个位置使用vue进行渲染
  2. data:用来存放数据
  3. {{XXX}}:插值表达式

3. VUE语法

3.1 数据展现

3.1.1 v-clock指令

1.需求: 由于插值表达式在渲染没有完成时,会展现{{xxx}}效果,用户体验不好 是否可以优化.
2.优化: 如果在渲染没有完成时,不给用户展现任何信息.
在这里插入图片描述

3.1.2 v-text指令

需求：
v-cloak的方式需要设置样式，可否用一种简洁的方式在渲染没有完成时,不给用户展现任何信息
在这里插入图片描述

3.1.3 v-html指令

作用: 将html标记语言,以渲染之后的效果进行展现
在这里插入图片描述

3.1.4 v-pre指令

需求:
有时如果用户就想展现{{name}}数据.如何处理
在这里插入图片描述

3.1.5 v-once指令

如果数据只需要VUE解析一次之后不需要再次解析,则可以使用该指令
在这里插入图片描述

3.1.6 v-model指令

说明:
如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model
一般在输入框中最为常用,一般用来保证数据的一致性.
在这里插入图片描述

3.2 事件绑定

3.2.1 v-on命令

作用: 如果需要对页面元素进行操作(事件)

1).click命令
在这里插入图片描述

v-on 可以使用@符号简写代替

2).methods属性介绍
点击事件中，如果实现的业务复杂，可以定义方法，将业务放入方法（函数）中
在这里插入图片描述

1.固定写法：
key 为 methods ，value 为 一个对象，对象内可以存放多个方法
2.方法可以简写为： 方法名(参数){代码}
3.多个方法间记得使用逗号分隔
4.在方法中，使用当前对象的数据，使用this

3.2.2 事件修饰符

1）stop
在这里插入图片描述
2）prevent
在这里插入图片描述
3）按键修饰符
在这里插入图片描述

按键操作还有很多如：keydown 按下时触发

3.3 属性绑定

3.3.1 v-bind 指令

想要对标签中的属性进行操作，可以使用v-bind
在这里插入图片描述

1.v-bind可以 使用冒号: 简写代替

3.3.2 属性动态绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		
		<!-- 定义style标签 -->
		<style>
			.red{
				background-color: red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 属性绑定的语法 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化操作 -->
			<a :href="url"></a>
			
			<hr >
			<!-- class的绑定 -->
			<div class="red">
				class的内容测试
			</div>
			<hr >
			<!-- 需求:需要动态的绑定样式 -->
			<div v-bind:class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 简化写法 -->
			<div :class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 切换样式 -->
			<button @click="isRed = !isRed">切换</button>
			
			v-on  v-bind
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: 'http://www.baidu.com',
					//如果控制样式 则设定boolean类型的值
					isRed: false
				}
			})
		</script>
	</body>
</html>

3.4 分支结构

3.4.1 v-if / v-else-if / v-else命令

在这里插入图片描述

3.4.2 v-show命令

在这里插入图片描述

总结：
1.将来如果需要频繁对一个数据进行切换，建议使用v-show，底层是display属性控制，效率更高

3.5 循环结构

3.5.1 v-if 命令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
			<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
			
			<!-- 2.带下标的循环遍历语法 2个参数  参数1:遍历的数据   参数2:下标 -->
			<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
			
			<!-- 3.循环遍历对象 -->
			<div v-for="user in userList" :key="user.id">
				<span v-text="user.id"></span>
				<span v-text="user.name"></span>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//一般采用数组形式保存多个数据
					hobbys: ['打游戏','敲代码','喝水','水王八'],
					userList: [{
						id: 100,
						name: '孙尚香'
					},{
						id: 200,
						name: '王昭君'
					},{
						id: 300,
						name: '貂蝉'
					}]
				}
			})
		</script>
	</body>
</html>

总结：
1.循环可以用于数组、对象
2.循环时建议指定key，key代表循环数据的位置，和下标意思相同
3.想要获取循环数据的下标，可以书写两个参数。参数1:遍历的数据 参数2:下标
4.循环遍历对象时，可以直接获取对象内的属性值

3.6 表单操作

3.6.1 表单元素的数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>用户名:</span>
					<span>
						<input name="username" type="text" v-model="username"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!--label相当于合并一个div 需要id-for进行关联  -->
						<input name="gender" type="radio" value="男" id="man"
						v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="women"
						v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				
				<div>
					<span>爱好:</span>
					<span>
						<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobbys" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
						<input name="hobbys" type="checkbox" value="喝水" v-model="hobbys"/>喝水
					</span>
				</div>
				
				<div>
					<span>部门:</span>
					<span>
						<!-- 设定下拉框多选 -->
						<select name="dept" v-model="dept" 
							multiple="true">
							<option value="财务部">财务部</option>
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
						</select>
					</span>
				</div>
				<div>
					<span>用户详情</span>
					<span>
						<textarea rows="4" cols="4" v-model="content">
							文本域
						</textarea>
					</span>
				</div>
				<div>
					<!-- 让默认的行为失效 -->
					<button @click.prevent="submit">提交</button>
				</div>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					gender: '女',
					//如果数据项有多项 则使用数组接收
					hobbys: ['敲代码','喝水'],
					//定义下拉框 如果单个数据使用'' 多个数据使用数组
					//dept: '研发部'
					dept: ['财务部','研发部'],
					content: '你好啊'
				},
				methods: {
					submit(){
						console.log("username数据:"+this.username)
						console.log("username数据:"+this.gender)
					}
				}
			})
		</script>
	</body>
</html>

3.6.2 表单修饰符

1.number : 将用户输入的内容转户为数值类型.
2.trim: 去除左右2边多余的空格.
3.lazy: 简化input框调用js的次数 当失去焦点时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- number 将字符转化为数值 -->
			数字1: <input type="text" v-model.number="num1"/><br>
			数字2: <input type="text" v-model.number="num2"/><br>
			<button @click="addNum">加法操作</button> <br>
			总数: {{count}}
			<hr >
			<!-- 去除多余的空格 -->
			数据: <input type="text" v-model.trim="msg"/> <br>
			字符长度 {{msg.length}}
			<hr />
			<!-- lazy 当数据失去焦点时触发事件 -->
			检验用户名: <input type="text" v-model.lazy="username"><br>
			{{username}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num1: '',
					num2: '',
					count: '',
					msg: '',
					username: ''
				},
				methods: {
					addNum(){
						this.count = this.num1 + this.num2
					}
				}
			})
		</script>
	</body>
</html>

3.7 计算属性

需求说明：
有时在vue的JS中需要进行大量的数据计算. 但是如果将所有的数据计算都写到HTML标签中,则代码的结构混乱.
优化: VUE中提供了计算属性的功能.

3.7.1 computed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 需要对一个字符串进行反转操作
				用户输入内容 abc 
				要求的输出内容   cba
				思路: 字符串拆分为数组  将数组进行反转  将数组拼接成串				 
				方法说明:
				reverse(): 将数组进行反转
				join("连接符") 将数组拼接为字符串
			 -->
			 用户输入: <input type="text" v-model="msg" /> <br>
			 常规调用:{{msg.split('').reverse().join('')}}<br>
			 
			 <!-- 添加计算属性的名称-->
			 计算属性调用: {{reverseMethod}}
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				//定义计算属性的key
				computed: {
					//指定计算属性的名称 要求有返回值
					reverseMethod(){
						
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

3.7.2 计算属性和方法的区别

1、计算属性和methods的执行结果都是相同的

2、当计算属性没有依赖data中的数据时，第一次使用计算属性时，会把第一次的结果进行缓存，后面再次使用计算属性，都会去第一次的结果中进行查找

3、methods方法，每调用一次，就会触发一次

4、计算属性的用法与data中的数据用法一样，因此计算属性在使用时，不加 ( )

5、methods方法在调用时，( ) 可加可不加

6、计算属性具有缓存功能，methods方法没有

在这里插入图片描述

3.8 监听器

需求说明:
当属性的数据发生变化时,则通过监听器实现对数据的监控. 从而实现数据的操作.
什么时候使用:
一般用于业务处理(异步操作 Ajax)

3.8.1 配置监听器 watch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校验用户名是否可用</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				需求:
					要求用户输入username的用户名,之后与服务器进行校验
					如果已经存在给用户提示. 如果不存在 则提示用户可用.
			 -->
			 用户名: <input type="text" v-model.lazy="username"/>{{msg}}
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					//校验的结果
					msg: ''
				},
				methods: {
					checkName(val){
						//===严格意义的数据校验 新版本提倡这么写 校验数值 还校验类型
						if(val === 'admin'){
							this.msg = "数据已存在"
						}
						else if(val === 'tom'){
							this.msg = "数据已存在"
						}
						else{
							this.msg = "数据可以使用"
						}
					}
				},
				watch: {
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>

总结：
1.定义属性的监听器，要求方法名和属性名要保持一致，并且接收一个参数
2.只要属性的值发生改变，监听器会执行
3.监听器 key 为 watch， value 为 对象

3.9 过滤器

关于过滤器说明:
一般使用过滤器格式化数据. 价格/时间等
需求说明:
当用户输入完成数据之后,要求使用过滤器将数据反转.

3.9.1 Vue.filter（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
	</head>
	<body>
		<div id="app">
			 <!-- 使用 | 线 调用过滤器-->
			 用户输入内容: <input type="text" v-model="username" /><br>
			 {{username | rename}}<br>
			 <!-- 过滤器级联-->
			 {{username | rename | addChar}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			
			//1.单独定义过滤器 
			// 参数1: 过滤器名称  参数2: 过滤器执行的方法
			// 注意事项: 过滤器需要返回值.
			Vue.filter('rename',function(val){
				
				return val.split('').reverse().join('')	
			})
			
			//2.追加哈哈哈字符 
			//箭头函数写法 可以省略function关键字, 如果只有一个参数则()省略 
			//使用=>进行关联
			Vue.filter('addChar',val => {
				
				return val + '哈哈哈'
			})
			
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

总结：
1.过滤器的定义，使用Vue.filter(过滤器名称,过滤器执行的方法（传递参数）{ })
2.使用 | 调用过滤器
3.过滤器可以连续调用
4.要设置返回值

3.10 VUE生命周期

3.10.1 VUE生命周期函数说明

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

3.10.2 VUE对象周期函数流程图

在这里插入图片描述

3.10.3 VUE对象生命周期方法测试

mounted常用！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 
				1.VUE对象的生命周期函数,可以单独的调用
				2.生命周期的函数名称是固定的,不能随意修改.
			 -->
			用户名: <input type="text" v-model="name"/>
			<button @click="destroyed">销毁</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					name: ''
				},
				methods: {
					destroyed(){
						//手动销毁VUE对象 vue中的对象API使用$调用
						this.$destroy()
					}
				},
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("初始化之后调用-beforeCreate")
				},
				//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
				created(){
					console.log("实力化对象完成,并且完成了配置之后调用created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("数据在备挂载前调用beforeMount")
				},
				//实例被挂载后调用 页面真正的加载完成之后调用
				mounted(){
					console.log("页面加载完成mounted")
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("数据更新时调用beforeUpdate")
				},
				//由于数据更改之后调用
				updated(){
					console.log("数据修改之后调用updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用。
				beforeDestroy(){
					console.log("VUE对象销毁之前调用beforeDestroy")
				},
				//实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
				destroyed(){
					console.log("实例销毁后调用destroyed")
				}
				
			})
		</script>
	</body>
</html>

3.11 数组操作

3.11.1 官网API说明

说明:
VUE针对数组的操作,开发了一套完整的API
在这里插入图片描述

3.11.2 数组方法说明

1).push() 在数组末尾追加数据.
2).pop() 删除数组最后一个元素
3).shift() 删除数组第一个元素
4).unshift() 在数据开头追加数据.
5).splice() 在指定的位置替换数据.
6).sort() 对数据进行排序 按照编码进行排序 由小到大
7).reverse() 数组反转.

3.11.3 数组操作测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组案例</title>
	</head>
	<body>
		<div id="app">
			<span v-for="item in array" v-text="item"></span><br>
			
			数据: <input type="text" v-model="data"/> 
			<button @click="push">追加</button>
			<button @click="pop">移除最后一个</button>
			<button @click="shift">删除第一个元素</button>
			<button @click="unshift">在开头追加元素</button>
			<button @click="splice">替换元素</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [5,7,4,1],
					data: ''
				},
				methods: {
					push(){
						this.array.push(this.data)
					},
					pop(){
						//移除最后一个数据
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						this.array.splice(0,2,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					},
					
				}
				
			})
		</script>
	</body>
</html>

3.12 VUE中组件化

3.12.1 组件化介绍

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想
在这里插入图片描述

3.12.2 组件化测试

全局组件：Vue.component()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<hello></hello>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			//1.定义全局组件  参数1: 定义组件名称 
			//				 参数2: 定义组件对象
			Vue.component('hello',{
				//1.组件数据.
				data(){
					return {
						msg: 'hello 组件'
					}
				},
				//2.组件结构 html数据
				template: '<h1>{{msg}}</h1>'
			})
			
			/* 注意事项: 组件的使用必须有Vue对象的渲染 */
			const app = new Vue({
				el: "#app"
			})
			
		</script>
	</body>
</html>

局部组件：components : {}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<hello1></hello1>
			<hello1></hello1>
		</div>
		
		<template id="hello1Tem">
			<div>
				<h3>{{msg}}</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script>
			
			//1.定义组件对象
			const hello1 = {
				data(){
					return {
						msg: 'hello1局部组件'
					}
				},
				template: '#hello1Tem'
			}
			
			/* 局部组件的写法 */
			const app1 = new Vue({
				el: "#app",
				//vue对象中的组件  组件名称/组件对象
				components: {
					//hello1  : hello1
					//js简化写法 如果key与value值相同,则可以简化.
					hello1
				}
			})
			
		</script>
	</body>
</html>

总结：
1.组件是什么 ？
组件是Vue最强大的功能之一，组件可扩展 HTML ，封装可重用的模块，让其它地方能使用。
2.组件能干嘛 ?
组件的优点是封装重复的特定 html 代码（css,js,html），然后通过组件名字可以重复利用该组件中的代码。
3.组件的分类：
组件可分成:

  1. 全局组件
  2. 局部组件

它们的区别就是：
全局组件能供所有实例使用，局部组件只能给当前实例使用。所以它们的区别就是作用域不同。
4.全局组件定义:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)

作用域：
所有挂载了vue 对象的 html中 都 可以使用

5.局部组件定义
components:{undefined
‘组件名称1’:{组件配置1}
‘组件名称2’:{组件配置2}
}

作用域：
只能在挂载的html上才能使用。

3.12.3 组件驼峰规则

在这里插入图片描述

总结：
如果定义组件时，使用了驼峰规则，则组件调用时要添加‘-’调用

3.12.4 组件的模板标签

1). `号的作用
在这里插入图片描述
在定义组件时，我们需要声明模板，以前我们使用单引号’'的方式书写HTML标签，但是，我们必须将代码都写在同一行，因此我们引入反撇号(数字1旁的按键)，这样就可以实现多行的HTML代码编写

2).组件template标签的写法：
引入：
为什么要使用模板标签？前面我们在定义组件时，直接书写HTML代码的方式容易造成代码的耦合，并且书写代码标签时，没有友好提示，因此我们引入模板标签
在这里插入图片描述
在这里插入图片描述

总结：

  1. 使用<template>标签进行模板的定义
  2. 在标签内必须有根标签div
  3. 给模板设置id值，用于组件绑定

3.13 Axios（此处内容请转至ajax专题）

点我跳转至ajax专题

3.14 VUE路由机制

3.14.1 VUE Router介绍

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

3.14.2 前后端路由的说明

后端路由介绍：
在这里插入图片描述
前端路由介绍：
说明:前端路由在内部配置了路由表,之后用户发起请求之后,根据路由表的内容直接跳转html页面(组件)
在这里插入图片描述

3.14.3 路由的使用

3.14.3.1 使用步骤
  1. 引入路由的js类库.（注意顺序）
  2. 添加路由链接 <router-link to="拦截请求"></router-link>
  3. 添加路由的填充位 <router-view></router-view>
  4. 定义路由组件 const user = { template: 模板 }
  5. 配置路由规则,创建路由实例 routes: [ { path:'拦截请求', component:使用的组件} ]
  6. 实现路由的挂载 const app = new Vue({ el: "#app", router })
3.14.3.2 测试
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由规则</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.添加路由链接
				router-link: vue会将标签解析为a标签
				to: vue会解析为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dept">部门</router-link>
			
			<!-- 3.定义路由占位符 当用户点击路由时,在该位置展现页面
				理解为新的div.
			  -->
			<router-view></router-view>  
			
		</div>
		
		<!-- 1.引入js -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			
			/* 4.定义组件变量 */
			const user = {
				template: '<h1>我是user组件</>'
			}
			
			const dept = {
				template: '<h1>我是部门组件</>'
			}
			
			/* 5.配置路由规则  */
			const router = new VueRouter({
				//定义规则
				routes: [
					{ path:'/user', component:user},
					{ path:'/dept', component:dept}
				]
			})
			
			
			//6.将路由组件挂载到Vue中
			const app = new Vue({
				el: "#app",
				router
			})
		</script>
	</body>
</html>

3.14.4 Router 重定向 （redirect）

说明:
路由的组件提供了重定向的功能,可以让用户默认跳转指定的组件
需求:
默认的跳转下 跳转到/user 组件中.
在这里插入图片描述

3.14.5 Router 嵌套 (children)

需求说明
链接: 商场,动物园
嵌套: 商场 shoe,手机. 动物园: 鸡 鸭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由规则</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/shopping">商场</router-link>
			<router-link to="/zoo">动物园</router-link>
			
			<router-view></router-view>
		</div>
		
		<!-- 定义商场组件 -->
		<template id="shoppingTem">
			<div>
				<h1>我是商场组件</h1>
				
				<router-link to="/shopping/shoe">鞋店</router-link>
				<router-link to="/shopping/phone">手机店</router-link>
				<router-view></router-view>
			</div>
		</template>
			
		
		<!-- 1.引入js 注意引入顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			const shopping = {
				template : "#shoppingTem"
			}
			
			const zoo = {
				template : "<h1>我是动物园组件</h1>"
			}
			
			const shoe = {
				template : "<h1>我是鞋店</h1>"
			}
			
			const phone = {
				template : "<h1>我是手机店</h1>"
			}
			
			//如果需要嵌套 则使用关键字children
			const router = new VueRouter({
				routes: [
					{path:'/shopping', component: shopping,
					children: [
						{path:'/shopping/shoe',component: shoe},
						{path:'/shopping/phone',component: phone}
					]},
					
					{path:'/zoo', component: zoo}
				]
			})
			
			const app = new Vue({
				el: "#app",
				router
			})
			
		</script>
	</body>
</html>

3.15 路由导航守卫

3.15.1 介绍

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
例如：如果用户没有登录,则不允许访问其他页面.
难点: 如果实现请求的拦截?
实现策略: 使用路由导航守卫.

3.15.2 路由导航守卫的使用(beforeEach)

const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/home', component: Home}
]

//1.定义路由对象
const router = new VueRouter({
  routes
})


 //  2.定义导航守卫(注意位置)
 //   beforeEach: 循环遍历用户的所有的请求.(拦截)
 //               在其中需要定义一个回调函数(3个参数)
 //  参数介绍:  to :要访问的请求路径
 //            from: 从哪个页面跳转而来
 //            next: 表示请求放行
 //业务需求: 1.如果用户请求/login
 //         2.如果不是login则判断是否登录 token
router.beforeEach((to,from,next) => {
    if(to.path === '/login') return next()

    //2.获取token信息
    let token = window.sessionStorage.getItem('token')
    //3.判断token是否有数据??  if(token) 如果token不为null
    //如果token为null 则跳转到登录页面
    if(!token) return next('/login')

    //表示放行
    next()

})

4. MVVM思想

1.M Model 代表数据
2.V View 代表视图
3.VM (view-model) 视图与数据的控制层
在这里插入图片描述
1.当用户数据发生变化时,同步的修改页面的数据
2.当页面的数据变化时,会被监听器监听,同步修改model数据.

vue3函数、变量
在全栈和前端徘徊的程序员
05-20 1451
Vue 3的组合式API（Composition API）为开发者提供了更灵活的方式来管理函数和变量的作用范围。通过ref和reactive定义响应式变量，开发者可以在setup函数中定义局部变量、函数以及计算属性，并通过返回值将其暴露给模板使用。组合式API还支持模块化开发，通过自定义Hook封装逻辑，隔离作用范围，避免命名冲突，提升代码的可维护性。合理使用局部变量和函数，减少全局污染，是编写高效、可维护Vue 3应用的关键。
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue笔记总结
Welcome to my csdn!
04-09 891
0.数组字符串的操作 0-1.数组 Join(‘’) / toString() ----数组转字符串 splice(index,n) ---- 删除 pop尾部删除 push尾部添加 shift头部删除 unshift 头部添加 sort()数组排序 reverse()数组反转 concat（）合并两个或多个数组/字符串 数组去重4方法 1，includes 包含 2，indexOf 3，lastIndexOf 检测 数组的首次和最后一次出现的位置 返回值为-1 4，new Set 0-2.字符
Vue中!.和?.是什么意思
ggq53219的博客
07-25 1811
在Vue（或更广泛地说，在JavaScript和TypeScript中），!和?是两个与可选链（Optional Chaining）和断言非空（Non-null Assertion）相关的操作符，它们分别用于处理可能为null或undefined的值，以避免运行时错误。?
vue中的（ ？）和（？？）的用法
zlc516的博客
08-28 1万+
今天遇到一点小问题，查了查做个小记录，给大家分享一下，不对的地方还请大家多多指教。 storeValue (restitle) { document.title = restitle?.deptName this.title = restitle?.deptName this.tenantId = restitle?.tenantId } //this.title = restitle?.deptName 等价于 //this.title = restit
vue项目中的？和？？的作用
weixin_46732620的博客
08-17 1361
作用就是获取restitle的值，或者是restitle.depname的值。.deptName 等价于。双问号后面接的是默认值。
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
VUE学习笔记
最新发布
知而获智，智达高远
10-20 1292
以上的内容都选择no就可以了。接下来进入到项目中，开始安装项目。插播一下，需要先安装cnpm，国内的镜像地址，并且设置环境变量。设置两个文件夹，这两个文件夹的位置就是nodejs的根目录的下面打开安装根路径创建两个空文件夹node_cache 、node_global然后设置环境变量。更换 npm 的 registry 源为国内源安装cnpm的设置成功。
Vue 中的知识点
Mr.小灰狼_随笔
08-31 2906
目录 Vue中的侦听器（watch） watch 概述 普通监听 Vue中的过滤器（filter） Vue中的生命周期 Vue中的侦听器（watch） watch 概述 监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。 简洁的说：watch 的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch 动态改变关联的状态。 普通监听 <!-- 普通监听 --> <div id="app"> <
vue中的一些知识
zy的博客
01-26 1310
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
Vue中...（扩展运算符）的作用
nalanxiaoxiao2011的博客
10-07 4548
vue 扩展运算符 ... 特殊运算符
Vue基础
qq_45638271的博客
05-04 412
Vue快速入门详解 Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。 let vm = new Vue({ 选项列表; }); 选项列表 1. el选项：指定的vue控制区域。(根据选择器获取) 2. data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 3. methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。 数据绑定 在视图部分获取脚本部分的数据: (插值表达式) {{变量名}} Vu
vue项目中使用可选链 ( ?. )和双问号 ( ?? )配置
weixin_40579884的博客
04-13 1万+
1.安装插件：@babel/plugin-proposal-optional-chaining npm install --save-dev @babel/plugin-proposal-optional-chaining 2.配置babel .babelrc文件添加plugins配置 { "plugins": [ "@babel/plugin-proposal-optional-chaining" ] } 3.使用 配置完了,就可以在项目中使用可选链 ( ?. ) 和双问号
vue项目中使用可选链 ( ?. )和双问号 ( ??）详解
@必意玲
10-10 1万+
配置完了,就可以在项目中使用可选链 (?. ) 和双问号 (?属性，如果不存在则设置默认值张三。文件添加 plugins 配置。
Vue基本语法篇（一）
奈何故里无故人的博客
08-06 586
一、什么是Vue Vue是一套用于构建用户界面的渐进式框架； 它只关注视图层，采用自底向上增量开发的设计； 它的目标是通过尽可能的简单API实现响应的数据绑定和组合的视图组件； 二、Vue基本语法 （注意Vue每次写完语法，都要保存网页才可以加载出来快捷键为Ctrl+s） 1、数据绑定 第一种数据绑定为一组花括号{{}}，但是这里一组指的是两个{}，为单向数据绑定。 网页图： 第二种数据绑定为v-text，v-html 网页图： 2、属性绑定 网页图： 2.
VUE将方法名字作为变量进行调用
qq_42306286的博客
03-31 6698
核心方法 applicationClick(methodsName){ this.$options.methods[methodsName]() }, 将方法名字作为参数
vue 中 用法
红尘紫陌博客
07-18 259
1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(index,$event)" :data-qt_id='item.qt_id' v-bind:class='{selectcolor:index==selectIndex}'> {{ item.type_name ...
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值