VUE 自定义指令详解（五个钩子函数及参数的剖析）

最新推荐文章于 2024-05-16 12:13:54 发布

飘走的落不离

最新推荐文章于 2024-05-16 12:13:54 发布

阅读量5.5k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gebieren/article/details/106697187

版权

Vue 中提供了14个比较常用的指令，如v-text、v-html、v-on、v-model等，而在实际的开发过程中，对于表单元素获取焦点也会常用到，而autofucos属性在vue中是失效的（移动端的Safarit也会失效），那如何来实现这个效果，这个时候就需要用到自定义的指令了。

下面就简单两个例子v-focus(获取焦点）、v-color(设置字体颜色）：

<body>
		<div id="app">
			<h2 v-color>{
  {msg}}</h2>
			<input type="text" v-focus />
		</div>
		<script src="vue.js"></script>
		<script>
			//注册一个全局自定义指令 `v-focus`
			Vue.directive("focus", {
				inserted(el) {
					el.focus();
				},
			});
			//注册一个全局自定义指令 `v-color`
			Vue.directive("color", {
				bind(el) {
					el.style.color = "red";
				},
			});
			const vm = new Vue({
				el: "#app",
				data: {
					msg: "自定义指令",
				},
			});
		</script>
	</body>

效果如下：

最低0.47元/天解锁文章

飘走的落不离

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
VUE 自定义指令详解（五个钩子函数及参数的剖析）

Vue 中提供了14个比较常用的指令，如v-text、v-html、v-on、v-model等，而在实际的开发过程中，对于表单元素获取焦点也会常用到，而autofucos属性在vue中是失效的（移动端的Safarit也会失效），那如何来实现这个效果，这个时候就需要用到自定义的指令了。下面就简单两个例子v-focus(获取焦点）、v-color(设置字体颜色）：<body> <div id="app"> <h2 v-color>{{msg}}</h
复制链接

扫一扫