用 ref 访问 Vue.js 程序中的 DOM

时间 2019-11-07

标签 ref 访问 vue.js vue 程序 dom 栏目 JavaScript 繁體版

原文原文链接

做者：Nwose Lotanna
翻译：疯狂的技术宅javascript

原文：https://blog.logrocket.com/ho...html

未经容许严禁转载前端

在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。vue

前提条件

本文适用于全部使用 Vue 的开发人，包括初学者。在阅读本文以前，你应该具有一些前提条件：java

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 元素或子元素的引用。node

若是将 ref 属性添加到 Vue 模板中的 HTML 元素，那么就能够在 Vue 实例中引用该元素甚至子元素。你也能够直接访问 DOM 元素，它是一个只读属性并返回一个对象。git

为何 ref 很重要？

ref 属性对于经过在父 $ref 属性中做为键来选择包含它的 DOM 元素是相当重要的。例如在 input 元素中放置 ref 属性会将父 DOM 节点公开为 this.$refs.input，也能够用 this.refs["input"] 的形式。程序员

经过在特定元素的引用上定义方法，能够轻松地操纵 DOM 元素。一个典型的例子是用 this 将焦点添加到输入元素上：github

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，由于它可以直接操做子节点。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...