指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到 DOM 上。
数据驱动 DOM 是 Vue.js 的核心理念,所以不到万不得已时不要主动操作 DOM,你只需要维护好数据,DOM 的事 Vue 会帮你优雅的处理。
Vue.js 内置了很多指令,帮助我们快速完成常见的 DOM 操作,比如循环渲染、显示与隐藏等。
<div id="app"> <div v-lang="color">{{num}}</div> <button @click="add">add</button> </div>
Vue.directive('lang', function(el, binding){ console.log(el); console.log(binding); el.style='color:' + binding.value; });
let vm = new Vue({ el: '#app', data: { num: 1, color: 'red' }, methods: { add(){ this.num++; } } });
el: 指令所绑定的元素,可以用来直接操作 DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue 编译生成的虚拟节点。
<div => {{num}} add 解绑

