版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82155691
一、基本介绍
1、全局自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})2、局部指令
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>二、代码示例：
代码案例：
<body>
<div id="app">
<p v-move="1000" >{{msg}}</p>
</div>
<div id="demo">
<p v-move="1000" >{{msg}}</p>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
// 注册全局指令
/*Vue.directive('move', function(el, binding){
el.style.transition = "2s";
setTimeout(()=>{
el.style.transform = `translateX(${binding.value}px)`;
},200)
})*/
const vm = new Vue({
el:"#app",
data: {
msg:"124444444444444"
},
<!--注册局部指令-->
directives : {
'move' : {
bind (el, binding) {
el.style.transition = "2s";
setTimeout(()=>{
el.style.transform = `translateX(${binding.value}px)`;
},200)
}
}
}
})
const vm2 = new Vue({
el:"#demo",
data: {
msg:"124444444444444"
}
})
</script>代码运行测试结果：
注册全局指令：
注册局部指令：
