精华内容
下载资源
问答
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • 详解在Vue中通过自定义指令获取dom元素2018-12-31编程之家收集整理的这篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。vue.js 是数据绑定的...

    详解在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.fo...
    <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核心的内置指令(例如:v-model 和 v-show等)以外,Vue也允许自己定义指令...接下来用自动获取焦点这个小例子,来介绍一下全局自定义指令。 注意:Vue.directive(‘参数名称’,{}) 定义全局指令...

    自定义指令

    除了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 函数。

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

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

    • inserted : 表示元素 插入到DOM中的时候,会执行 inserted 函数,触发一次。(例如:自动获取焦点)
      注:和 JS 行为有关系的操作,最好在 inserted 中去执行,防止 JS 行为不生效。

    • updated : 当VNode 更新的时候,会执行 updated 函数,可能会触发多次


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

    Vue钩子函数传参数详解

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

    • el : 指令所绑定的元素,规定的也是每个钩子函数中的第一个参数,永远不会改变,这个 el 参数,是一个原生的JS 的 DOM对象
    • binding: 第二个参数是一个对象,它包含一些属性(前三个常用,但是其他的也要知道)
      1. name:指令名,不包括 v- 前缀。
      2. value: 指令绑定的值,例如:v-count="1 + 1"中,绑定值为 2
      3. expression: 字符串形式的指令表达式。例如:v-count="1 + 1"中,表达式为 1 + 1

      1. oldValue: 指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
      2. arg: 传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
      3. modifiers: 一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为{ foo: true, bar: true }
    • vnode: Vue 编译生成的虚拟节点。
    • oldVnode: 上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用

    注:除了 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内部规定好的!


    钩子函数简写或者合并

    在有的时候,可能bindupdate触发相同行为,不关其他钩子函数的事。

    <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 : { ...

    我们知道,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

    展开全文
  • [原文](http://www.cnblogs.com/Eden-cola/p/vue-register-dom.html)在Vue中通过自定义指令获取元素 - 不带汽的可乐 - 博客园 不带汽的可乐 博客园 首页 新随笔 联系 订阅管理 随笔 - 11  文章 - 0  评论 ...
  • 目录 一、vue操作讲解 ...6,自定义指令获取焦点 7,自定义指令改变样式 8,Vue的生命周期 9,vue-resource 实现 get, post, jsonp请求 代码请参考我的github: https://github.com/masterzz/vue-l...
  • vue自定义指令 focus获取焦点

    千次阅读 2019-11-28 16:38:42
    1.//全局自定义指令 代码要放在new Vue的上面 //注册一个全局自定义指令`v-focus` //使用Vue.directive()定义全局的指令v-focus //其中参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加v-前缀 ...
  • vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;http://www.tuicool.com/articles/6Jfiyyz在 vue.js 中,获取某个DOM Element常用的...
  • 今天小编就为大家分享一篇vue 自定义指令自动获取文本框焦点的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 创建一个自定义指令通过:Vue.directive()这个方法来实现在使用自定义指令时 我们只需要用 v-指令名,在这里我们创建了一个自定义指令叫xixi,所以就是 v-xixi 表示我们使用了这个自定义指令Vue.directive('指令名'...
  • //返回green 获取当前自定义指令 付给的值 console.log(binding.expression); // 返回 'green' 字符串形式返回 // 如果根据用户给定的参数设置颜色 el.style.color=binding.value; //绿色了 } });   ...
  • Vue自定义指令

    2020-08-01 15:20:06
    Vue自定义指令: 全局自定义指令 Vue.directive(name,{}) 局部自定义指令 directives(name:{}) 两者区别: 全局自定义指令可以在任何实例中应用 局部自定义指令只能在本身的vue实例中应用 钩子函数: bind:...
  • vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)...
  • VUE自定义指令

    2020-05-01 10:54:17
    VUE学习之路——自定义指令 为何需要自定义指令 当内置指令不满足我们对DOM元素进行操作时,VUE允许我们注册自定义指令 关于内置指令及常见的内置指令,可以参考: ...
  • Vue 搜索框获取焦点(自定义指令
  • vue自定义指令

    2020-01-12 09:27:11
    自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 比如:获取文本框的焦点 自定义指令 - 自定义一个指令 - 使用一个自定义指令 定义一个全局的指令 // 注册一个全局...
  • Vue(五)自定义指令

    2021-01-22 09:59:20
    Vue(五)自定义指令 全局自定义指令和局部自定义指令Vue允许用户自定义指令,来对DOM元素进行底层操作。自定义指令分为:全局自定义指令和局部自定义指令。 注册一个全局自定义指令 focus:获取焦点 Vue....
  • Vue框架——自定义指令

    千次阅读 2021-02-14 22:12:44
    使用Vue.directiveAPI去自定义指令 用法——以获取焦点举例 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 412
精华内容 164
关键字:

自定义指令获取vue

vue 订阅