vue笔记整理

  一、MVVM模型
                        1. M:模型(Model) :data中的数据
                        2. V:视图(View) :模板代码
                        3. VM:视图模型(ViewModel):Vue实例
            观察发现:
                        1.data中所有的属性,最后都出现在了vm身上。
                        2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
 
二、数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
 
1.Vue中的数据代理:
                            通过vm对象来代理data对象中属性的操作(读/写)
                2.Vue中数据代理的好处:
                            更加方便的操作data中的数据
                3.基本原理:
                            通过Object.defineProperty()把data对象中所有属性添加到vm上。
                            为每一个添加到vm上的属性,都指定一个getter/setter。
                            在getter/setter内部去操作(读/写)data中对应的属性。
三、事件的基本使用:
                            1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
                            2.事件的回调需要配置在methods对象中,最终会在vm上;
                            3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
                            4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
                            5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;
四、Vue中的事件修饰符:
                        1.prevent:阻止默认事件(常用);
                        2.stop:阻止事件冒泡(常用);
                        3.once:事件只触发一次(常用);
                        4.capture:使用事件的捕获模式;
                        5.self:只有event.target是当前操作的元素时才触发事件;
                        6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
 
<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件(常用) -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡(常用) -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次(常用) -->
			<button @click.once="showInfo">点我提示信息</button>

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

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

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

  

五、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.自定义键名 = 键码,可以去定制按键别名
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">


Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

 

六、计算属性:

                    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/>
			<!-- 全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> -->
		</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.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						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]
					}
				}
			}
               
                //简写
                            fullName(){
                                  console.log('get被调用了')
                                  return this.firstName + '-' + this.lastName
                            }
 

  

七、监视属性watch:

                    1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
                    2.监视的属性必须存在,才能进行监视!!
                    3.监视的两种写法:
                            (1).new Vue时传入watch配置
                            (2).通过vm.$watch监视
	/*1. watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用?当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */


//2.
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
  • 深度监视:
                         (1).Vue中的watch默认不监测对象内部值的改变(一层)。
                         (2).配置deep:true可以监测对象内部值改变(多层)。
                    备注:
                            (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
                            (2).使用watch时根据数据的具体结构,决定是否采用深度监视。
    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改变了')
    					}
    				}
    			}
    
    	//正常写法
    		/* vm.$watch('isHot',{
    			immediate:true, //初始化时让handler调用一下
    			deep:true,//深度监视
    			handler(newValue,oldValue){
    				console.log('isHot被修改了',newValue,oldValue)
    			}
    		}) */
    
    		//简写
    		/* vm.$watch('isHot',(newValue,oldValue)=>{
    			console.log('isHot被修改了',newValue,oldValue,this)
    		}) */  
 
ps:computed和watch之间的区别:
                        1.computed能完成的功能,watch都可以完成。
                        2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
                两个重要的小原则:
                            1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
                            2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
                                这样this的指向才是vm 或 组件实例对象。
 
八、绑定样式:
                    1. class样式
                                写法:class="xxx" xxx可以是字符串、对象、数组。
                                        字符串写法适用于:类名不确定,要动态获取。
                                        对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
                                        数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
                    2. style样式
                                :style="{fontSize: xxx}"其中xxx是动态值。
                                :style="[a,b]"其中a、b是样式对象。
	<div id="root">
			<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定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>

 

九、条件渲染:

                            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一定可以获取到。

 

            <h2 v-show="false">欢迎来到{{name}}</h2>

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

 

十、列表

	<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>

//
filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}

 

十一、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的根数据对象 添加属性!!!

十二、收集表单数据:

                    若:<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:输入首尾空格过滤
	账号:<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">

 

十三、指令

                        v-bind  : 单向绑定解析表达式, 可简写为 :xxx
                        v-model : 双向数据绑定
                        v-for   : 遍历数组/对象/字符串
                        v-on    : 绑定事件监听, 可简写为@
                        v-if        : 条件渲染(动态控制节点是否存存在)
                        v-else  : 条件渲染(动态控制节点是否存存在)
                        v-show  : 条件渲染 (动态控制节点是否展示)
                v-text指令:
                        1.作用:向其所在的节点中渲染文本内容。
                        2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。  
    v-html指令:
                        1.作用:向指定节点中渲染包含html结构的内容。
                        2.与插值语法的区别:
                                    (1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
                                    (2).v-html可以识别html结构。
                        3.严重注意:v-html有安全性问题!!!!
                                    (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
                                    (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!    
     v-cloak指令(没有值):
                        1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
                        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
 
<h2 v-cloak>{{name}}</h2>
      v-once指令:
                        1.v-once所在节点在初次动态渲染后,就视为静态内容了。
                        2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
 
<h2 v-once>初始化的n值是:{{n}}</h2>
    v-pre指令:
                    1.跳过其所在节点的编译过程。
                    2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
 
十四、生命周期

 

 

              beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
常用的生命周期钩子:
                        1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
                        2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

                关于销毁Vue实例
                        1.销毁后借助Vue开发者工具看不到任何信息。
                        2.销毁后自定义事件会失效,但原生DOM事件依然有效。
                        3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
 
//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即将驾鹤西游了')
			}, 
 
新出的
activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},

  

 
十五、ref、props、
 
	methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			}
		},

  

//简单声明接收
		// 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
			}
		}

 

十六、组件间传递参数

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

 

父  

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

 

	props:['todos','checkTodo','deleteTodo']
子给父传递数据(第一种写法,使用@或v-on)
子给父传递数据(第二种写法,使用ref)
App中
	mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件(一次性)
		},
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(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效。
			}
		},

  

  • 全局事件总线bus
  • 在main.js中绑定bus,即可在其他组件中被使用
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

 组件A

 

mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件,收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},

组件B

methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		}

  

十七、插槽

  

<!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
		<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
	
-------
<Category title="游戏" >
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

<!-- 定义一个具名插槽(挖个坑,等着组件的使用者进行填充) -->
		<slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot>
		<slot name="footer">我是一些默认值,当使用者没有传递具体结构时,我会出现2</slot>

-----
<Category title="美食" >
			<img slot="center" src="0.jpg" alt="">
			<a slot="footer" href="#">更多美食</a>
		</Category>



	<slot :games="games" msg="hello">我是默认的一些内容</slot>
----
	<Category title="游戏">
			<template scope="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

 

十八、Vuex

 

  

 

 vue使用vuex库,有store文件夹

//准备actions——用于响应组件中的动作
const actions = {
	 jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	
}
//准备mutations——用于操作数据(state)
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		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
})

  

应用1.

methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
		
		},

 2.

computed:{
			//借助mapState生成计算属性,从state中读取数据。(数组写法)
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性,从getters中读取数据。(数组写法)
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},

  

十九、路由

路由切换

	<!-- 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>

 

路由参数query

  • 父路由
	<!-- 跳转路由并携带query参数,to的对象写法 -->
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link> 

 

  • 子路由
<ul>
		<li>消息编号:{{$route.query.id}}</li>
		<li>消息标题:{{$route.query.title}}</li>
	</ul>

  

路由参数params

  • 父路由
	<!-- 跳转路由并携带params参数,to的对象写法 -->
				<router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link> 
  • 子路由 
<ul>
		<li>消息编号:{{$route.params.id}}</li>
		<li>消息标题:{{$route.params.title}}</li>
	</ul>

路由参数props

  • router中
	children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,

							//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。
							// props:{a:1,b:'hello'}

							//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件。
							// props:true

							//props的第三种写法,值为函数
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
  • 子路由
  • 	export default {
    		name:'Detail',
    		props:['id','title'],
    	
    	}  
      

编程路由:路由控制页面前进后退

methods: {
			back(){
				this.$router.back()
				// console.log(this.$router)
			},
			forward(){
				this.$router.forward()
			},
			test(){
				this.$router.go(3)
			}
		},

 

二十、路由守卫

全局路由守卫--在router.js中

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
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 || '硅谷系统'
})

 

独享路由守卫-router.js

{
					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()
						}
					}
				},

  

组件内路由守卫-组件内

//通过路由规则,进入该组件时被调用
		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()
		}

  

 二十一、路由器的两种工作模式

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

补充:

## mixin(混入)

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

2. 使用方式:

    第一步定义混合:

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

    第二步使用混入:

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

 

Vue2.x版本知识点总结end~
有时间要学一学3.0
 
 

 

 
 
 
 
 
 
 
 
 
posted @ 2021-07-31 20:54  AoYeDDM  阅读(71)  评论(0编辑  收藏  举报