Vue.js 指令与生命周期深度解析

俎树振

已于 2024-04-19 12:46:21 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-09 02:04:50 首次发布

本文链接：https://blog.csdn.net/ZSZ1805355272/article/details/127756603

版权

一、内置指令

1．v-bind

v-bind：响应并更新DOM特性，例如：v-bind:href、v-bind:class、v-bind:title等。
主要用法：绑定属性、动态更新HTML元素上的属性。
示例：

<div class="app">
    <a v-bind:href="url">click me</a>
</div>

//创建vue对象
var app = new Vue({
 //获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

运行：
在这里插入图片描述

2．v-model

v-model：数据双向绑定，用于表单输入，例如<input v-model="message">。
主要用法：用在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定。它会根据控件类型自动选取正确的方法来更新元素，主要负责监听用户的输入事件以更新数据，并处理一些极端的例子。
示例：

<div id="msgDiv">
	[原始消息]：{{message}} <br />
	[翻转消息]：{{message.split('').reverse().join('')}} <br /> <!-- 翻转操作reverse() -->
	请输入信息：<input v-model="message">
</div>

<script>
	window.onload = function() {
		new Vue({
		el: '#msgDiv', //设置要进行渲染
			data: {
				message: "你好 Vue!" //原始显示内容
			}
		})
	}
</script>

运行：
在这里插入图片描述

3．v-for

v-for：循环指令。
例：

 <li v-for='value in arr' :key="index"></li>

<li v-for='value in arr'>，
如果其值为’value in arr’，则在控制台显示data中arr的内容；
如果其值为’value in json’，则显示data中json的内容。

示例：

<div id="app">
	<ul>
		<li v-for="(user, index) in users" :key="index">
			{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
		</li>
	</ul>
</div>

var app = new Vue({
	el:"#app",//el即element，要渲染的页面元素
	data: {
		users:[
			{"name":"Bill","age":20,"gender":"男"},
			{"name":"Amy","age":22,"gender":"女"},
			{"name":"Bob","age":21,"gender":"男"}
		]
	}
});

运行：
在这里插入图片描述

4．v-on

v-on：用于监听DOM事件，例如v-on:click、v-on:keyup等。
主要用法：绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名称或一个内联语句，如果没有修饰符也可以省略。

V-on用在普通元素上时，只能监听原生DOM事件,方法以事件为唯一的参数。
V-on用在自定义元素组件上时，能监听子组件触发的自定义事件。
如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。

示例：

<div id="app">
	<!--完整写法-->
	<button v-on:click="show">点我</button>
	<!--简化写法-->
	<button @click="show">点我</button>
</div>

 <script>
	//创建vue对象
	var app = new Vue({
		el:"#app",
		//定义vue的方法
		methods:{
		//定义show方法
			show() {
				//弹出提示框
				alert("Hello Vue!!!");
			}
		}
	});
</script>

运行：
在这里插入图片描述

5．显示数据(v-text和v-html)

概述：
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.
示例：

v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

区别：

v-text：更新元素的textContent，把数据当作纯文本显示，如果要更新部分的textContent，需要使用{{mustache}}插值。
v-html：更新元素的innerHTML，遇到html标签,会正常解析，按普通HTML插入“-”，不会作为Vue模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。建议只在可信内容上使用v-html，不在用户提交的内容上使用。

6．v-cloak

v-cloak：这个指令保持在元素上，直到关联实例结束编译。
在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。
在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时不需要用到 v-cloak 指令。
示例：

var app = new Vue({
	el: '#app',
	data: {
		context:'互联网头部玩家钟爱的健身项目'
	}
});

<style>
[v-cloak]{display: none;}
</style>
<div id="app" v-cloak>
    {{context}}
</div>

效果：
在这里插入图片描述

7．v-pre

v-pre：不需要表达式，用于跳过元素及子元素的编译过程，以此来加快整个项目的编译速度。例如：
{{ this will not be compiled }}
主要用法：跳过元素和它的子元素的编译过程。此外，它可以用来显示原始标签。
示例：

<div id="app">
	<p>{{message}}</p>
	<p v-pre>{{message}}</p>
</div>

const app = new Vue({
el: "#app",
data: {
message: "你好，Vue！"
}
})

在这里插入图片描述

二.条件指令

1．判断语法(v-if和v-show)

概述：

v-if: 条件不满足时, 元素不会存在.
v-show: 条件不满足时, 元素不会显示(但仍然存在).
v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

示例：

<div id="app">
	<button @click="show = !show">点我</button>
	<h1 v-if="show">Hello v-if.</h1>
	<h1 v-show="show">Hello v-show.</h1>
</div>

new Vue({
	el: "#app",
	data: {
		show: true
	}
});

运行：
点击显示，点击隐藏

2．v-else

v-else：条件渲染指令，必须与v-if成对使用。
主要用法：v-else元素必须紧跟在v-if或者v-else-if的后面，否则它将不会被识别。

3．v-else-if

v-else-if：判断多层条件，必须跟v-if成对使用。
主要用法：表示v-if的“else if”块，可以链式调用。前一兄弟元素必须有v-if或v-else-if

三.自定义指令

自定义指令又分为局部自定义指令和全局自定义指令。使用Vue.directive(id,definition)可以注册全局自定义指令，使用组件的directives选项可以注册局部自定义指令。

1.指令的注册

(1)局部注册

自定义指令：作用在局部，默认只会在当前页面的Vue实例生效；其写法跟全局注册不同，它是用directives写在Vue实例中，这时directive要加“s”变为复数。指令名不用字符串格式，指令名和directives都是以对象的形式来写，其中的钩子函数写法和全局一样。当指令写好后，直接在html元素中使用v-指令名即可。
局部注册自定义指令，代码如下

directives:{
  content:{
    inserted:el=>{
      el.value='输入的内容';
    }
  }
}

在页面中用v-指令名引用即可，代码如下

 <input type="text" v-focus v-content/>

(2)全局注册

全局注册自定义指令：作用在全局，写法是在Vue实例前用Vue.directive()方法，directive不用加“s”。在这个方法中传入两个参数，第一个参数是指令名，指令名要求是字符串；第二个参数是一个对象，在对象中属性为钩子函数，这很像Ajax中的success回调函数，在钩子函数中传入参数（如el、binding、VNode、oldVnode），根据参数进行编写。

全局注册自定义指令，代码如下：

Vue.directive('focus',{
       inserted:function(el){
       el.focus()
      //添加焦点事件，也可以给DOM元素添加其他，例如在<input>标签中用到el.value='请输入内容'
       }
    })

⭐提示：全局注册用directive，末尾是没有“s”的，局部注册是有“s”的。

2.钩子函数

钩子函数的名称是确定的，当系统消息触发，自动会调用。

（1）生命周期钩子函数


（1）`beforeCreate()`	实例创建前触发
（2）`created()`	实例创建完成
（3）`beforeMount()`	模板渲染前，可以访问数据，模板编译完成，虚拟DOM已经存在
（4）`mounted()`	模板渲染完成，可以拿到DOM节点和数据
（5）`beforeUpdate()`	更新前
（6）`updated()`	更新完成
（7）activated（）	激活前
（8）deactivated（）	激活后
（9）`beforeDestroy()`	销毁前
（10）`destroyed()`	销毁后

点击查看👉： vue的生命周期

（2）自定义指令directives的钩子函数

①bind

只调用一次，第一次绑定指令到元素时调用，可以在此绑定中只执行一次初始化操作。

②inserted

被绑定元素插入父节点时调用。父节点只要存在即可被调用，不必存在于document中。也就是说，必定存在父节点，但是它的父节点未必存在文档中。

③update

无论绑定值是否发生变化，只要被绑定元素所在的模板被更新即可调用。Vue.js会通过比较更新前后的绑定值，忽略不必要的模板更新操作。也就是说，在包含该组件的VNode更新后调用该函数，可能在其子节点更新前调用，指令的值可能已更改、可能未更改。最好通过判断新旧值来过滤掉不必要的操作。

④componentUpdated

被绑定元素所在模板完成一次更新周期时调用。也就是说，在包含该组件的VNode及其子节点的VNode已更新后进行调用。

⑤unbind

指令与元素解绑时调用，只调用一次。

（3）路由导航 / 路由守卫钩子函数

Ⅰ、全局守卫
　　　①前置：router.beforeEach（(to,from,next)=>{ }）
　　　②后置：router.afterEach（(to,from)=>{ }）
　　　
Ⅱ、路由独享守卫
　　　beforeEnter:（to,from,next)=>{ }
　　　
Ⅲ、导航守卫
　　①beforeRouteEnter（to,from,next）{ }
　　②beforeRouteLeave（to,from,next）{ }

3.钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
VNode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3.指令函数简写

指令	缩写
v-on	@
v-bind	:
v-slot	#

4.指令的高级选项

params
定义对象中可以接受一个 params 数组，Vue.js 编译器将自动提取自定义指令绑定元素上的这些属性。
deep
当自定义指令作用于一个对象上时，我们可以使用 deep 选项来监听对象内部发生的变化。
twoWay
在自定义指令中，如果指令想向Vue实例写回数据，就需要在定义对象中使用 twoWay:true，这样可以在指令中使用 this.set(value) 来写回数据。
acceptStatement
选项 acceptStatement:true 可以允许自定义指令接受内联语句,同时 update 函数接收的值是一个函数，在调用该函数时,它将在所属实例作用域内运行。terminal
选项 terminal 的作用是阻止 Vue.js 遍历这个元素及其内部元素,并由该指令本身去编译绑定元素及其内部元素。内置的指令 v-if 和 v-for 都是 terminal 指令。

使用 terminal 选项是一个相对较为复杂的过程,你需要对 Vue.js 的编译过程有一定的了解，这里借助官网的一个例子来大致说明如何使用 terminal。

priority

选项 priority 即为指定指令的优先级。普通指令默认是 1000，termial 指令默认为 2000。同一元素上优先级高的指令会比其他指令处理得早一些，相同优先级则按出现顺序依次处理。内置指令优先级顺序:

 export const ON = 700
 export const MODEL = 800
 export const BIND = 850
 export const TRANSITION = 1100
 export const EL = 1500
 export const COMPONENT = 1500
 export const PARTIAL = 1750
 export const IF = 2100
 export const FOR = 2200
 export const SLOT = 2300