vue之自定义指令

最新推荐文章于 2024-06-16 22:02:56 发布

默翁

最新推荐文章于 2024-06-16 22:02:56 发布

阅读量277

点赞数 1

分类专栏：学习笔记 vue

本文链接：https://blog.csdn.net/qq_17472727/article/details/72567163

版权

学习笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

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