vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue自定义指令

Vue自定义指令详解

作者:小旺不正经

这篇文章主要为大家介绍了Vue自定义指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

Vue自定义指令

自定义指令

注册一个全局指令v-focus,该指令的功能是在页面加载时元素获得焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-fo>
		</div>
		<script>
            // 注册自定义指令
			Vue.directive('fo',{
				inserted:function(el){
                    // 聚焦元素
					el.focus()
				}
			})
			new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>
 

image-20211112151122161

打开界面光标直接在输入框内

钩子函数

指令定义函数提供了几个钩子函数(可选)。

钩子函数的参数主要有以下几项

输出相关属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app" v-hh:a.b.c="mess">
		</div>
		<script>
			Vue.directive('hh',{
				bind: function(el,binding,vnode){
					var s = JSON.stringify
					el.innerHTML = 'name:'+s(binding.name)+'<br>'+
					'value:'+s(binding.value)+'<br>'+
					'expression:'+s(binding.expression)+'<br>'+
					'argument:'+s(binding.arg)+'<br>'+
					'modifiers:'+s(binding.modifiers)+'<br>'+
					'vnode keys:'+Object.keys(vnode).join(',')
				}
			})
			new Vue({
				el:'#app',
				data:{
					mess:'abc'
				}
			})
		</script>
	</body>
</html>
 

image-20211112163153199

运用例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-hh="{text:'123',c:'blue'}"></div>
		</div>
		<script>
			Vue.directive('hh',function(el,binding){
				el.innerHTML=binding.value.text
				el.style.color=binding.value.c
			})
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>
 

image-20211112164831459

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:
阅读全文