vue(10)自定义指令

谁践踏了优雅 2022-01-10 14:21 162阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<style type="text/css">
    	
    		
    	</style>
    </head>
    <body>
    	<script src="vue.min.js"></script>
    	<div id="div1">
    		<div v-xart:hello.a.b="message"></div>
    	</div>
    	<script type="text/javascript">
    		Vue.directive('xart',{                                     //自定义指令，钩子函数
    			bind:function(el,binding,vnode){ 
    				var s = JSON.stringify
    				el.innerHTML = 
    					'name: '+s(binding.name)+"<br>"+                //指令名xart
    					'value: '+s(binding.value)+'<br>'+               //指令的绑定值hello vue
    					'expression: '+s(binding.expression)+'<br>'+     //字符串形式的指令表达式message
    					'argument" '+s(binding.arg)+'<br>'+              //传给指令的参数hello
    					'modifiers: '+s(binding.modifiers)+'<br>'+      //一个包含修饰符的对象.a.b
    					'vnode keys: '+Object.keys(vnode).join(', ')
    			},
    			update:function(newValue,oldValue){ 
    				//值更新时的工作
    			},
    			unbind:function(){ 
    				//清理工作
    			}
    		})
    
    		new Vue({ 
    			el:"#div1",
    			data:{ 
    				message:"hello vue"
    			}
    		})
    	</script>
    </body>
    </html>

![在这里插入图片描述][20190620103945921.png]

[20190620103945921.png]: /images/20220110/ec20c59572ac407f9d5f76ced42164f6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue自定义指令

自定义指令 vue里面不仅仅有内置的指令，也可以根据自己的需求构建自定义指令它其实就是操作DOM元素的属性以及内容通过directives属性配置自定义指令，有函

浅浅的花香味﹌/ 2023年09月26日 23:00/ 0 赞/ 172 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 260 阅读

相关 vue 指令自定义

<body> <div id="app"> <input type="text" v-focus> <input type=

╰半橙微兮°/ 2023年01月07日 08:51/ 0 赞/ 315 阅读

相关 vue 自定义指令

项目中使用指令的情景是“有无权限” ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

灰太狼/ 2022年11月04日 12:29/ 0 赞/ 282 阅读

相关 vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你

男娘i/ 2022年04月03日 04:30/ 0 赞/ 431 阅读

相关 Vue自定义指令

`v-on 、v-model、v-show` 等指令，在操作 dom 时使用了 ref 属性，其实指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此

比眉伴天荒/ 2022年01月29日 02:53/ 0 赞/ 423 阅读

相关 vue(10)自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

谁践踏了优雅/ 2022年01月10日 14:21/ 0 赞/ 163 阅读

相关 Vue 自定义指令

Vue 自定义指令除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。

待我称王封你为后i/ 2021年12月16日 05:43/ 0 赞/ 480 阅读

相关 vue自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面

布满荆棘的人生/ 2021年09月02日 06:07/ 0 赞/ 559 阅读

相关 vue 自定义指令

自定义指令: 1、全局指令: (1)创建 Vue.directive('名称',{ 钩子函数:function(el,

曾经终败给现在/ 2021年07月24日 18:28/ 0 赞/ 682 阅读