vue自定义指令相关

青阳zi

已于 2022-07-01 09:46:05 修改

阅读量247

点赞数

文章标签： vue.js

于 2022-07-01 09:45:28 首次发布

本文链接：https://blog.csdn.net/qq_34093387/article/details/125552777

版权

钩子函数

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

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 钩子中可用。
解决vue中自定义方法this指向问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例</title>

	</head>
	<body>
		<div id="app">
			<p v-fontsize="'50px'">页面载入时，input 元素自动获取焦点：</p>
			<input v-focus>
		</div>
		<script src="vue.js"></script>
		<script>
			/* Vue.directive('focus',{
				//钩子函数
				bind:function(el){
					console.log(el);
				},
				inserted:function(el,binding){
					console.log(el);
					console.log(binding);
					el.focus()
				}
			})
			new Vue({
				el:'#app'
			}) */

			new Vue({
				el: '#app',
				/* directives:{//局部  错误写法
				    
					inserted:function(el,binding){
						el.focus()   
					}
				} */
				/* directives: {
					'focus': {
						inserted: function(el, binding) {
							console.log(binding);
							el.focus()
						}
					},
					'fontsize': function(el, binding) { //设置字体大小
						el.style.fontSize = parseInt(binding.value) + 'px'
					}
				} */

				/* directives: {
					focus:function(el,binding){
						el.focus()
						console.log(el);
						console.log(binding);
					}
				} */
				directives: {
					
					focus(el, binding,vnode) {
                        el.focus() //直接写这个不生效 原因是获取节点前就指向
						console.log(el);
						console.log(binding);
                        console.log(this);//指向window 如要改变可以获取vnode中的context指向Vue
						console.log(vnode.context);//指向Vue
						/* setTimeout(()=>{
							el.focus() 生效
						},0) */
						 vnode.context.$nextTick(()=>{
							el.focus() //解决this指向问题
						}) 
					},
					fontsize(el,binding){ //直接用就生效 因为不涉及focus()方法
						el.style.fontSize = parseInt(binding.value) + 'px'
					}
				}
			})
		</script>
	</body>
</html>

青阳zi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令相关

指令定义函数提供了几个钩子函数（可选）：: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。重点: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。重点: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。重点: 被绑定元素所在模板完成一次更新周期时调用。了解: 只调用一次，指令与元素解绑时调用。了解钩子函数的参数有：el: 指令所绑定的
复制链接

扫一扫