详解在Vue中通过自定义指令获取dom元素
2018-12-31
编程之家收集整理的这篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的；
在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive) ；
自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数，并允许我们监听指令绑定的数据的变化，但是它也是有缺点的，就是在指令的钩子函数内无法通过this来访问当前 vue 实例，也就无法进一步进行复杂的操作(虽然一般不需要什么复杂的操作)，在 vue 的钩子函数 (lifecycle hook) 和方法 (method) 中也无法像this.$el那样轻易的访问到自定义指令绑定的DOM元素；
不过只要通过一点点变通的做法，就可以突破这个限制：
JavaScript代码：
{
this.elements[flag] = el;
}
}
},beforeMount () {
console.log(this.elements.test1); //=> undefined
},mounted () {
console.log(this.elements.test1); //=> the span DOM Element
console.log(this.elements.test2); //=> the p DOM Element
}
})
如代码所示，建立一个名为run的自定义指令，运行绑定的方法，并将当前 DOM Element 作为参数传入；
同时建立一个名为register的方法，接收一个 flag 参数，并根据这个参数返回一个用于将传入参数注册到this.elements对象中的闭包函数；
将写好的 run 指令和 register 方法搭配使用，就可以把想要的 DOM 注册进this.elements，并在 hook 或者 method 中十分方便的访问；
注意：自定义指令将会在DOM元素插入 Document 时，也就是组件 mount 时首次执行，所以在此之前，比如beforeMount钩子中是无法使用的，这点也和this.$el 一致，详情可以查看官方文档中的生命周期图示；
其实也很好理解啦……在 mount 之前，根本就没有这个实际的 DOM 元素，怎么可能访问的到……(:з)∠)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250

<input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" v-model='keywords' v-focus>
 


Vue.directive('focus',{
bind:function(el){
el.focus()
},
updated:function(el){
el.focus()
},
inserted:function(el){
el.focus()                           DOM元素创建完成后
},
})


 
转载于:https://www.cnblogs.com/xiannv/p/10972999.html

文章目录
自定义指令
Vue全局自定义指令
Vue局部自定义指令
Vue钩子函数
Vue钩子函数传参数详解
钩子函数简写或者合并

自定义指令

除了Vue核心的内置指令(例如：v-model 和 v-show等)以外，Vue也允许自己定义指令。虽然Vue是避免我们操作DOM元素的，但是，在有的情况下，我们需要对DOM元素进行底层操作，这个时候我们就会用到自定义指令。


Vue全局自定义指令

接下来用自动获取焦点这个小例子，来介绍一下全局自定义指令。

注意：Vue.directive(‘参数名称’,{})  定义全局指令，它有两个参数

参数1：指令名称,注意在定义的时候，指令名称前不需要加 v- 前缀，但是在调用的时候，必须加v- 前缀。
参数2：参数2是一个对象，这个对象身上有一些指令相关的函数(也就是下边介绍的钩子函数)，这些函数可以在特定的阶段，执行相关操作。

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

<script>
	//这里就用到上边所说的钩子函数了，在这里不做详解，在下面的钩子函数以及传参做详解
	Vue.directive('focus',{
		bind:function(){//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
		
		},
		inserted:function(el){// inserted 表示元素 插入到DOM中的时候，会执行此函数，触发一次
			el.focus(); //注意：在每一个函数中，第一个参数，永远是 el ，表示被绑定了指令的 那个元素 ，这个el参数，是一个原生JS的DOM对象
		},
		updated:function(){// 每当VNode 更新的时候，会执行 updated函数，可能会触发多次
		
		}
	})

	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{}
	})
</script>



Vue局部自定义指令

局部自定义指令，其实和全局自定义指令差不多，原理都是一样，接来下用给字体设置样式例子，来介绍局部自定义指令

注意：局部自定义指令 有两个条件【指令名称 和 指令对象】
<div id="app>
	<h5 v-color>我是局部自定义指令</h5>
</div>

<script>
	var vm = new Vue({
		el:'#app',
		date:{},
		methods:{},
		directives:{
			'color':{//给字体设置颜色
				bind:function(el){ //这个function() 中还有第二个参数 binding ，这里不做介绍，在下边钩子函数参数中介绍
					el.style.color="red";
				}
			}
		}
	})
</script>

注：全局用的是 directive,局部用的是directives

Vue钩子函数

在定义全局指令的时候，就说Vue.directive('指令名称',{}) 有两个参数,那么 钩子函数 就是用在第二个参数对象中的。

一个指令对象可以提供以下钩子函数(前三个是常用的)


bind :只调用一次，每当指令绑定到元素上的时候，会立即执行这个 bind 函数。

在上边自动获取焦点的案例中，在元素 刚绑定指令的时候，还没有插入到 DOM 中去，这个时候调用 focus 方法没有作用，因为一个元素，只有插入DOM之后，才能获取焦点，所以这个函数不能获取焦点
样式设置；只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素肯定有一个内联样式，将来元素肯定会渲染显示到页面中去，这个时候，浏览器的渲染引擎必然会解析样式，然后应用这个样式。

注：一般和样式操作有关的，一般都可以在 bind 函数中执行


inserted ： 表示元素 插入到DOM中的时候，会执行 inserted 函数，触发一次。(例如：自动获取焦点)

注：和 JS 行为有关系的操作，最好在 inserted 中去执行，防止 JS 行为不生效。


updated ： 当VNode 更新的时候，会执行 updated 函数，可能会触发多次




componentUpdated ： 指令所在组件的VNode 及其子 VNode 全部更新后调用。
upbind： 只调用一次，指令与元素解绑时调用。


Vue钩子函数传参数详解

上边也有介绍，钩子函数有四个参数。一个是指令所绑定的元素，用来直接操作DOM；另外一个是一个对象，它包含一些属性。另外两个了解。

通过一些例子来了解一下：


el ： 指令所绑定的元素，规定的也是每个钩子函数中的第一个参数，永远不会改变，这个 el 参数，是一个原生的JS 的 DOM对象
binding： 第二个参数是一个对象，它包含一些属性(前三个常用，但是其他的也要知道)

name：指令名，不包括 v- 前缀。
value： 指令绑定的值，例如：v-count="1 + 1"中，绑定值为 2
expression： 字符串形式的指令表达式。例如：v-count="1 + 1"中，表达式为 1 + 1



oldValue： 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
arg： 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"
modifiers： 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }


vnode： Vue 编译生成的虚拟节点。
oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

注：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
<div id="app">
	//注意：v-color=" 'yellow' "  里边是单引号引着(因为value属性)
	<p v-color=" 'yellow' " v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
	//全局自定义指令写法
	Vue.directive('color',{
		bind:function(el,binding){
			el.style.color=binding.value;
		}
	})


	//局部自定义指令写法
	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{},
		directives:{
			'fontsize':{//设置字体大小
				bind:function(el,binding){
					el.style.fontSize=binding.value;
					
					//增强代码健壮性的一种写法(不管给指令赋值带不带 px ，都会先转化为整数)
					//el.style.fontSize = parseInt(binding.value) + 'px'
				}
			}
		}
	})

</script>


注：钩子函数中的参数，不是一定起名是 el 或者 binding 的，一定要明白原理，他们只不过是形参而已，名字可以不一样，但是他们代表的含义是Vue内部规定好的！

钩子函数简写或者合并

在有的时候，可能bind 和 update触发相同行为，不关其他钩子函数的事。

<div id="app">
	<p v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{},
		directives:{
			'fontsize':function(el,binding){ //注意：这个 function 等同于把代码写到了 bind 和 update 中去
				el.style.fontSize=binding.value;
			}
		}
	
	})

</script>

    
我们知道，Vue.js的核心是数据驱动，当数据有所变化时，DOM就会被更新，比如：

<span v-text="msg"></span>
export default {
  data(){
　　return{
  　　msg : 'oldMsg'  
　　}
　}
　methods : {
　　changeMsg : function(){
　　　　this.msg = 'newMsg'
　　}
　}  
}

当调用了changeMsg方法，msg被修改为 ' newMsg ' ，我们可以把这次修改理解为数据发生了变化，此时数据的变化就要驱动DOM变化，我们可以看到<span>oldMsg</span>变成了<span>newMsg</span>，Vue 实现这种响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新，这里涉及到Vue.nextTick 和 vm.$nextTick 等等另外一大堆知识点，我们这里不作深入讨论，我们只需要知道，是数据的变化驱动了DOM的变化，在这个过程中，我们发现我们并没有去操作具体的DOM元素，按照以前的做法，我们可能需要getElementByAnyWays（不论用什么方式获取元素，原生Js或者jQuery.....）获取这个span元素，然后在适当的时候修改它的innerHTML，但我们没有这样做，我们只修改了数据，Vue帮我们实现了DOM的修改与更新，这就是Vue最大的特性之一：数据驱动。
 
明白了数据驱动这回事，在使用Vue的过程中，我们发现大部分时候不用去操作具体的每个DOM元素，但是，就怕那剩下的小部分时间……我们还是需要获取具体的DOM并且对它做一些事情，当你有这个需求并且去做的时候，你会发现在Vue中获取DOM元素是一件令人头疼的事情。
 
首先，我们使用一种比较普遍的方法来实现，在需要获取DOM的元素上绑定ref属性，然后通过 this.$refs [ 属性值 ] 来获取。

<p ref="sentence">I'm waiting for ref</p>
export default{
    created(){
　　　　console.log(this.$refs.sentence);　　　　// undefined　　
　　 }
　　 mounted(){
　　　　console.log(this.$refs.sentence)　　　　// VueComponent
　　 }
}

这里有个小的注意点，就是mounted时期之前，包括beforeMount、created时期，this.$refs都是一个空对象，无法获取到想要的sentence对象，详细解说请戳 官方生命周期图 ，所以，我们要在正确的时间做正确的事情嘛，学习时间就好好看我的文章O(∩_∩)O 。
到了mounted时期，元素已经挂载完成，我们可以获取到sentence对象了，拿到后迫不及待的想要修改它的innerHTML，于是又报错了，this.$refs.sentence.innerHTML是undefined，相当不爽，打断点，一查究竟，发现this.$refs.sentence是奇奇怪怪的VueComponent，并不是我们传统的DOM对象，那怎么获取到我们想要的innerHTML、className等等呢？通过断点仔细查看该VueComponent对象后，发现我们想要的东西都藏在更深一层的属性$el里，如下图：

 
知道了里面的玄机，我们就可以通过 this.$refs.sentence.$el.innerHTML = "whatever you want" 来修改DOM的内容了。
 
 
作了如此多的铺垫，我们是不是可以开始今天高大上的主题了？使用Vue的自定义指令来解决这个问题。
HTML：

<span v-getdom="regist('span1')"></span>
<p v-getdom="regist('p1')"></p>

JavaScript：

const vm = new Vue({
  el:'#app',
  data : {
    domEles: {}
  },
  directives : {
    getdom(el, binding) {
      if (typeof binding.value == 'function')
        binding.value(el);
    }
  },
  methods : {
    regist (flag) {
      return (el)=>{
        this.domEles[flag] = el;
      }
    }
  },
  mounted () {
    console.log(this.domEles.span1);  //=> the span DOM Element
    console.log(this.domEles.p1); 　　//=> the p DOM Element
  }
}) 

 
首先，我们通过官方提供的directives开发一个局部（局部是指该directives只属于该new Vue()对象，不可被其他Vue对象使用）自定义指令getdom，然后你就可以在模板任何元素上使用v-getdom指令做一些事。
getdom( )传入了两个参数，el 和 binding ，这是官方特定参数，有具体的寓意，如下：
 

 
 
接着，建立一个名为 regist 的方法，接收一个 flag 参数，并根据这个参数返回一个用于将传入参数注册到 this.domEles对象中的闭包函数。
将getdom指令与regist方法搭配使用，就可以将想要的元素注册进this.domEles对象中，不论在mounted还是methods中使用都非常方便，只需要this.domEles [ 注册名 ]访问即可，这里我们得到的DOM对象，可以直接获取innerHTML等属性，不需要再深入一层，这与原生DOM是相同的，让我们感到熟悉又舒服。

转载于:https://www.cnblogs.com/Double-Zhang/p/7891664.html