Vue中常用的内置指令及自定义指令

百香果果ccc

已于 2022-12-09 16:53:09 修改

阅读量419

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-12-04 18:22:28 首次发布

本文链接：https://blog.csdn.net/wytccc/article/details/128042364

版权

Vue 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

内置指令

v-bind
【单向数据绑定】
【格式：v-bind:属性名=“data中定义的属性”】
【简写：:属性名=“data中定义的属性”】

<div id="root">
	<a href="http://www.baidu.com">跳转百度</a> // 普通字符串赋值
	<a v-bind:href="url">跳转到百度页面1</a> // 标准写法
	<a :href="url">跳转到百度页面2</a>  // 简写
</div>

new Vue({
	el: '#root',
	data: function () {
		return {
			url: 'http://www.baidu.com'
		}
	}
});

v-model
【双向数据绑定，一般用于表单元素上】
【格式：v-model:value=“data中定义的属性”】
【简写：v-model=“data中定义的属性”】

<div id="root">
	<input type="text" value="字符串"/>  普通字符串赋值（文本框中的默认值）
	<input type="text" v-model:value="username"/> // 标准写法
	<input type="text" v-model="username"/> // 简写
</div>

new Vue({
	el: '#root',
	data: function () {
		return {
			username: 'wuwu'
		}
	}
});

v-on
【绑定事件处理函数】
【格式：v-on:事件类型=“事件处理函数”】
【简写：@事件类型=“事件处理函数”】

<div id="root">
	<button onclick="show()">点击</button>   // 原生js绑定事件方式
	<button v-on:click="show">点击</button> // 标准写法，无参数可以不写()
	<button @click="show">点击</button> // 简写
</div>

new Vue({
	el: '#root',
	data: function () {
		return {
			count: 1
		}
	},
	methods: {
		show() {
			console.log(this.count);
		}
	}
});

v-if、v-else-if、v-else
【创建和删除一个元素】
【与js中的if、else if、else逻辑相同，三者搭配使用时，需要紧挨在一起，中间不能被其他元素分割】
【格式：v-if=“属性或表达式”、v-else-if=“属性或表达式”、v-else】
```
<div id="root">
	<p v-if="5 < 1">这是一段文字1</p>  // 不成立
	<p v-else-if="5 < 6">这是一段文字2</p> // 成立
	<p v-else>上方都不成立时，显示此节点</p> // 上方代码成立，此行不会被执行
</div>
```

v-show
【显示和隐藏一个元素】
【底层是通过display属性实现的，节点存在于页面中，只是被隐藏了】
【格式：v-show=“属性或表达式”】

<div id="root">
	<p v-show="true">这是一段文字</p> // 显示
	<p v-show="5 < 1">这是一段文字</p> // 隐藏
	<p v-show="isShow">这是一段文字</p> // 显示
</div>

new Vue({
	el: '#root',
	data: function () {
		return {
			isShow: true
		}
	}
});

v-for
【遍历数组、对象、字符串（比较少用）、次数（比较少用）】
【格式：v-for="(item, index) in arr; :key=“唯一值”】

<div id="root">
	<!-- 遍历数组 -->
	<ul>
		<li v-for="item in arrList" :key="item.id">
			{{item.id}}---{{item.name}}---{{item.age}}
		</li>
	</ul>
	<!-- 遍历对象 -->
	<ol>
		<li v-for="(value, key) in objs" :key="key">
			{{key}}---{{value}}
		</li>
	</ol>
	<!-- 遍历字符串 -->
	<p>
		<span v-for="(item, index) in str" :key="index">
			{{index}}---{{item}}
		</span>
	</p>
	<!-- 遍历次数 -->
	<p>
		<span v-for="(item, index) in 5" :key="index">
			{{index}}---{{item}}
		</span>
	</p>
</div>

new Vue({
	el: "#root",
	data: function () {
		return {
			arrList: [{
				id: 1,
				name: 'wuwu',
				age: 18
			}, {
				id: 2,
				name: 'tt',
				age: 19
			}],
			objs: {
				name: 'wuwu',
				age: 18,
				study: 'vue'
			},
			str: 'hello World'
		}
	}
});

v-text
【在标签间渲染纯文本，替换掉标签中的所有内容，不解析标签】
v-html
【在标签间渲染html文本，替换掉标签中的所有内容，能够解析标签】
v-cloak
【vue实例加载完毕的一瞬间，会自动删掉v-cloak属性，可搭配CSS来使用】
【下例中，vue实例加载中，带有v-cloak属性的标签会先隐藏，防止将插值表达式当做字符串直接渲染到页面中，vue实例加载完毕，系统自动将v-cloak属性去掉，显示标签，交互效果更好一些】
```
[v-cloak] {
	display: none;
}
```
```
<div id="#root">
	<p v-cloak>{{name}}</p>
</div>
```

v-once
【只在初始时动态渲染，之后就视为静态内容了】

<div id="root">
	<p v-once>{{count}}</p> <!-- 只在页面初始化时，获取count的值渲染在页面上，之后count的值再变化时，该标签渲染的内容不被影响 -->
	<p>{{count}}</p> <!-- 随着按钮被点击，count不断+1 -->
	<button @click="count++"></button>
</div>

v-pre
【加上此指令，vue不解析标签中的内容，直接渲染标签，可以提高性能】

<div id="root">
	<p v-pre>该标签上的内容直接渲染到页面上，{{count}}</p>
	<p>vue先将属性解析之后再渲染到页面上，{{count}}</p>
</div>

在这里插入图片描述

自定义指令

局部自定义指令
说明：下例中，模拟文本框绑定默认值，并获取焦点的功能，只能通过对象写法实现，因为如果使用函数写法，是在bind环节就设置element.focus();，此时文本框还没被渲染到页面上，导致初始时获取焦点效果不生效。使用对象写法，可以把element.focus()写在inserted钩子中，只有当节点被渲染到页面上时，才会执行获取焦点代码，这时才会有效果。

<div id="root">
	<!-- 模拟文本框绑定默认值，并获取焦点 -->
	<input type="text" v-focus-bind="msg">
	<!-- 给指定文本添加#前缀 -->
	<p v-prefix="msg"></p>
</div>

new Vue({
	el: '#root',
	data: function() {
		return {
			msg: 'hello world!!!'
		}
	},
	directives: {
		// 对象写法，具有三个钩子，能处理一些细节的问题
		'focus-bind': {
			bind(element, binding) { // 指令与节点绑定成功时
				element.value = binding.value;
			},
			inserted(element, binding) { // 绑定指令的这个节点被渲染到页面上时
				element.focus();
			},
			update(element, binding) {  // 指令所在的模板被重新解析时
				element.value = binding.value;
			}
		},
		// 函数写法，实际上是bind和update的结合体
		// 触发时机：1、指令与节点绑定成功时（bind）  2、指令所在的模板被重新解析时（update）
		'prefix'(element, binding) {
			element.innerText = '#' + binding.value;
		}
	}
});

效果

在这里插入图片描述
注意事项
① 指令中的this指向window，不指向vm
② 指令名字如果是多个单词，不能使用驼峰式命名法（vue不认），可以用中划线分割，且需要用单引号包裹起来（比如上例中的focus-bind）；单个单词不包裹也行（比如上例中的prefix）
③ 声明指令时，不用加v-前缀；使用指令时，需要加上v-前缀

全局自定义指令

// 将上例的focus-bind指令改为全局指令
Vue.directive('focus-bind', {
	bind(element, binding) { // 指令与节点绑定成功时
		element.value = binding.value;
	},
	inserted(element, binding) { // 绑定指令的这个节点被渲染到页面上时
		element.focus();
	},
	update(element, binding) {  // 指令所在的模板被重新解析时
		element.value = binding.value;
	}
});
// 将上例的prefix指令改为全局指令
Vue.directive('prefix', function(element, binding) {
	element.innerText = '#' + binding.value;
});
new Vue({
	el: '#root'
});