局部自定义指令
<div id='app'>
原数据: <span v-text="num"></span>
放大十倍的数据<span v-big="num"></span>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
num: 1
},
directives: {
big: {
bind(el, binding) {
console.log(el, binding)
el.innerText = binding.value * 10
},
inserted(el, binding, vnode) {
el.innerText = binding.value * 10
},
update(el, binding, vnode, oldVnode) {
el.innerText = binding.value * 10
},
}
}
})
</script>
全局自定义指令
Vue.directive('big', {
bind(el, binding, vnode) { el.innerText = binding.value * 10 },
inserted(el, binding, vnode) { el.innerText = binding.value * 10 },
update(el, binding, vnode, oldVnode) { el.innerText = binding.value * 10 }
});