Vue 自定义指令详解
Vue 的核心思想是数据驱动视图,这意味着我们通常只需维护数据状态,让框架自动处理 DOM 更新。但在某些特殊场景下,比如需要直接操作原生 DOM API 或集成第三方库时,我们就得绕过这一层抽象。这时候,自定义指令就派上用场了。它允许我们在表达式的值发生变化时,将特定的行为应用到 DOM 元素上。
基础用法
假设我们需要一个指令来动态设置文本颜色,可以这样定义:
<div id="app">
<div v-lang="color">{{ num }}</div>
<button @click="add">增加</button>
</div>
对应的 JavaScript 实现如下:
Vue.directive('lang', function(el, binding){
console.log(el);
console.log(binding);
el.style.color = binding.value;
});
初始化 Vue 实例:
let vm = new Vue({
el: '#app',
data: {
num: 1,
color: 'red'
},
methods: {
add(){
this.num++;
}
}
});

