详解在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元素；

不过只要通过一点点变通的做法，就可以突破这个限制：

HTML代码：

    <div id="app">
      <span class='test' v-run="register('test1')"></span>
      <p class='test' v-run="register('test2')"></p>
    </div>

JavaScript代码：

const vm = new Vue({
  el:'#app',
  data : {
    elements : {}
  },
  directives : {
    run (el, binding) {
      if (typeof binding.value == 'function')
        binding.value(el);
    }
  },
  methods : {
    register (flag) {
      return (el)=>{
        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 元素，怎么可能访问的到……(:з)∠)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

  • Vue获取DOM元素样式和样式更改示例

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • 详解Vue中的自定义指令

    详解Vue中的自定义指令

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.在Vue里,代码复用的主要形式和抽象是组件.然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令.本文将详细介绍Vue自定义指令 指令注册 以一个input元素自动获得焦点为例,当页面加载时,使用autofocus可以让元素将获得焦点 .但是autofocus在移动版Safari上不工作.现在注册一个使元素自动获取焦点的指令 指令注册类似于组件注册,包括全局指令和局部指令两

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

  • 详解为什么Vue中的v-if和v-for不建议一起用

    详解为什么Vue中的v-if和v-for不建议一起用

    本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化 两者在用法上 <

  • 详解Stack Navigator中使用自定义的Render Callback

    详解Stack Navigator中使用自定义的Render Callback

    目录 Stack Navigator使用component props传递组件 无因素引起组件更新时,使用render callback的效果 有因素引起组件更新时,使用component props的效果 有因素引起组件更新时,使用render callback的效果 有因素引起组件更新时,在render callback中使用React.memo 有因素引起组件更新时,在render callback中使用useCallback 总结 Stack Navigator使用component p

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • vue 3.0 使用ref获取dom元素的示例

    vue 3.0 使用ref获取dom元素的示例

    前言 附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr

  • VUE中的自定义指令钩子函数讲解

    VUE中的自定义指令钩子函数讲解

    目录 自定义指令钩子函数 自定义指令 先上官方解释 小贴士 钩子函数运行顺序 自定义指令钩子函数 自定义指令 除了VUE 内置指令外,VUE也支持我们自定义注册指令,分为局部和全局注册 但这些想必大家都不陌生,其中官方API也是写的明明白白 官方API点这里 而且自定义指令也会极大程度上帮助我们日常的编程,但这是很有意思的事情出现了,就是钩子函数,很多老铁都弄不明白这五个函数的具体区别 先上官方解释 bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inser

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • vue中的自定义指令clickOutside

    vue中的自定义指令clickOutside

    目录 自定义指令clickOutside 首先我们先看看vue官方的文档 clickoutside 这个指令用在哪里呢? 写法 自定义指令clickoutside使用及扩展用法 自定义指令clickOutside 这个指令通过vue的自定义指令的钩子函数实现. 首先我们先看看vue官方的文档 emmmm 看着好像有点困难,没关系官方文档也给出了例子. 现在应该就明白了不少了吧. clickoutside 这个指令用在哪里呢? 比如 写法 export default { bind (el, bi

随机推荐