JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

Vue自定义指令详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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

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

钩子函数

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

  • bind：只调用一次，指令第一次绑定到元素时调用，可以用这个钩子函数定义一个在绑定时执行一次的初始化动作。
  • inserted：被绑定的元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
  • update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
  • componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
  • unbind：只调用一次，指令与元素解绑时调用。

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

  • el：指令所绑定的元素，可以用来直接操作DOM。
  • binding：一个对象，包含以下属性
  • name：指令名，不包括v-前缀。
  • value：指令的绑定值，例如v-my-directive=“1+1”，value的值是2。
  • oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用。
  • exPression：绑定值的表达式或变量名，例如v-my-directive=“1+1”，exPRession的值是"1+1"。
  • arg：传给指令的参数，例如v-my-directive：foo，arg的值是"foo"。
  • modifiers：一个包含修饰符的对象，例如v-my-directive.foo.bar，修饰符对象modifiers的值是{foo：true，bar：true}。
  • vnode：Vue编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

输出相关属性

<!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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本宝典的更多内容！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的Vue自定义指令详解全部内容，希望文章能够帮你解决Vue自定义指令详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程