vue之自定义指令

来源:互联网 发布:cl.4z3.pw index.php 编辑:程序博客网 时间:2024/05/18 03:47

除了内置指令,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>