vue中使用ref获取dom对象

更新日期: 2019-06-24阅读: 4.8k标签: dom

前提条件

本文适用于所有使用 vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:

  • Node.js 10.x或更高版本。在终端或命令提示符下运行 node -v 来验证你的版本
  • npm 6.7 或以上版本
  • 代码编辑器;我强烈推荐 Visual Studio Code
  • 把最新版本的 Vue 全局安装在你的机器上
  • 在你的计算机上安装 Vue CLI 3.0。首先用 npm uninstall -g vue-cli 卸载旧的 CLI 版本,然后用 npm install -g @vue/cli 安装新版本。
  • 下载 Vue 入门项目(地址:https://github.com/viclotana/...
  • 解压缩下载的项目,切换到它所做的目录并运行 npm install 以使所有依赖项保持最新


什么是 ref?

Ref 是 Vue 的实例属性,用于在应用程序模板中注册或指示对 html 元素或子元素的引用。

如果将 ref 属性添加到 Vue 模板中的 HTML 元素,那么就可以在 Vue 实例中引用该元素甚至子元素。你也可以直接访问 dom 元素,它是一个只读属性并返回一个对象。


为什么 ref 很重要?

ref 属性对于通过在父 $ref 属性中作为键来选择包含它的 DOM 元素是至关重要的。例如在 input 元素中放置 ref 属性会将父 DOM 节点公开为 this.$refs.input,也可以用 this.refs["input"] 的形式。

通过在特定元素的引用上定义方法,可以轻松地操纵 DOM 元素。一个典型的例子是用 this 将焦点添加到输入元素上:

this.$refs["input"].focus()

通过这种方式,refs 的使用方法以像 JavaScript 中的 document.querySelector('.element') 或 jquery 中的$('.element') 一样。可以在 Vue.js 实例内部和外部访问 $refs。但是它们并不是数据属性,因此它们没有响应性。

浏览器中进行模板检查时,它们根本不显示,因为它不是 HTML 属性,只是一个 Vue 模板属性。


Demo

如果你从一开始就关注了这篇文章,现在应该已经下载了 Vue 入门项目并在 VS Code 上打开了它。打开 components 文件夹并将下面的代码复制到 test.vue 文件中:

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    submit(){
      this.counter++;
      console.log(this.ref)
    }
  }
}
</script>

现在用以下命令在开发服务器中运行它:

npm run serve

你将看到用户界面会显示一个简单的计数器,该计数器在单击时会被更新,但是当你在浏览器中打开开发人员工具时,你会注意到它没有记录日志。

正确的使用语法非常重要,因为这意味着 Vue 不会将此视为错误,的确如此。根据我们已经知道的关于 Vue refs的内容,它们会返回一个对象,但是根据未定义的响应来判断,有些东西是错误的。将下面的代码复制到 test.vue 文件中:

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    submit(){
      this.counter++;
      console.log(this.$refs)
    }
  }
}
</script>

当你运行并检查它时,你会发现现在返回了一个对象:


快速查看代码块将揭示正确的语法:在模板中它被称为 ref,但是当我们在 Vue 实例中引用它时,它被称为 $refs。当不返回 undefined时,这提示是非常重要的。你可以访问引用元素的每个可能的属性,包括模板中的元素。

接下来记录一些我们可能感兴趣的属性。现在你的 test.vue 文件的内容应该是:

<template>
  <div>
    <h2>Hello this is for refs man!</h2>
    <p>You have counted {{this.counter}} times</p>
    <input type="text" ref="input">
    <button @click="submit">Add 1 to counter</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    submit(){
      this.counter++;
      console.log(this.$refs)
    }
  }
}
</script>
<style scoped>
p , input, button{
  font-size: 30px;
}
input, button{
  font-size: 20px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


显示元素

要显示 DOM 中的 HTML 元素,请进入 submit 方法并将 methods 代码更改为以下内容:

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input)
    }
  }

这里的 input 是你之前在元素中创建的引用名称( ref="input")。它可以是你选择的任何名称。


显示输入的值

要显示 HTML 元素的输入值(在用户界面的文本框中键入的字符串),进入 submit 方法并将代码更改为:

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input.value)
    }
  }

这样就显示了你输入的字符串,当然用 vanilla JavaScript 和 jQuery 也可以实现相同的功能。


显示元素的 URL

进入 submit 方法并将代码更改为:

methods: {
    submit(){
      this.counter++;
      console.log(this.$refs.input.baseURI)
    }
}

还有许多其他可以通过 ref 返回的对象信息。


条件处理

Vue.js 的 refs 也可用于输出 DOM 元素内部的多个元素,例如使用 v-for 指令的条件语句。 refs 在调用时返回一个 item 数组,而不是对象。为了说明这一点,可创建一个这样的简单列表:

<template>
  <div>
    <p v-for="car in 4" v-bind:key="car" ref="car"> I am car number {{car}}</p>
    <button @click="submit">View refs</button>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return {
    }
  },
  methods: {
    submit(){
      console.log(this.$refs)
    }
  }
}
</script>


你可以在 GitHub(https://github.com/viclotana/...)找到本教程的完整代码。


结论

本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素,例如值,子节点,数据属性,甚至它的 base URL。

另外我们还学会了实现这一目标的方法。要注意要在 Vue 实例初始化并且渲染组件之后填充 refs,所以不鼓励在计算属性中使用 ref,因为它能够直接操作子节点。


链接: https://www.fly63.com/article/detial/4347

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!