除了内置指令,Vue.js也允许注册自定义指令。自定指令提供一种机制将数据的辩护映射为DOM行为
一.自定义指令注册的方式
1.全局注册
Vue.directive('demo', {
bind: function() {
console.log('demo bound');
},
update: function(value) {
console.log('update')
}
})
2.组件内部注册
<script>
export default {
data () {
msg: 'welcom vue'
},
directives: {
focus: {
inserted: function(el) {
el.focus();
}
},
demo: {
bind: function(el, binding, vnode) {
el.innerHTML =
'name: ' + binding.name + '<br>' +
'value: ' + binding.value + '<br>' +
'expression: ' + binding.expression + '<br>' +
'argument: ' + binding.arg + '<br>' +
'modifiers: ' + JSON.stringify(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}
},
}
</script>