用 ref 访问 Vue.js 程序中的 DOM[每日前端夜话0x9C]
在本文中,你将了解如何在 Vue.js 中引用组件中的 HTML 元素。
前提条件
本文适用于所有使用 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/vue-canvas)
- 解压缩下载的项目,切换到它所做的目录并运行 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 将焦点添加到输入元素上:
1this.$refs["input"].focus()
通过这种方式,refs 的使用方法以像 JavaScript 中的 document.querySelector('.element') 或 jQuery 中的$('.element') 一样。可以在 Vue.js 实例内部和外部访问 $refs。但是它们并不是数据属性,因此它们没有响应性。
在浏览器中进行模板检查时,它们根本不显示,因为它不是 HTML 属性,只是一个 Vue 模板属性。
Demo
如果你从一开始就关注了这篇文章,现在应该已经下载了 Vue 入门项目并在 VS Code 上打开了它。打开 components 文件夹并将下面的代码复制到 test.vue 文件中:
1<template> 2 <div> 3 <h2>Hello this is for refs man!</h2> 4 <p>You have counted {{this.counter}} times</p> 5 <input type="text" ref="input"> 6 <button @click="submit">Add 1 to counter</button> 7 </div> 8</template> 9<script>10export default {11 name: 'Test',12 data(){13 return {14 counter: 015 }16 },17 methods: {18 submit(){19 this.counter++;20 console.log(this.ref)21 }22 }23}24</script>25
现在用以下命令在开发服务器中运行它:
1npm run serve
你将看到用户界面会显示一个简单的计数器,该计数器在单击时会被更新,但是当你在浏览器中打开开发人员工具时,你会注意到它没有记录日志。
正确的使用语法非常重要,因为这意味着 Vue 不会将此视为错误,的确如此。根据我们已经知道的关于 Vue refs的内容,它们会返回一个对象,但是根据未定义的响应来判断,有些东西是错误的。将下面的代码复制到 test.vue 文件中:
1<template> 2 <div> 3 <h2>Hello this is for refs man!</h2> 4 <p>You have counted {{this.counter}} times</p> 5 <input type="text" ref="input"> 6 <button @click="submit">Add 1 to counter</button> 7 </div> 8</template> 9<script>10export default {11 name: 'Test',12 data(){13 return {14 counter: 015 }16 },17 methods: {18 submit(){19 this.counter++;20 console.log(this.$refs)21 }22 }23}24</script>
当你运行并检查它时,你会发现现在返回了一个对象:
检查test.vue
快速查看代码块将揭示正确的语法:在模板中它被称为 ref,但是当我们在 Vue 实例中引用它时,它被称为 $refs。当不返回 undefined时,这提示是非常重要的。你可以访问引用元素的每个可能的属性,包括模板中的元素。
接下来记录一些我们可能感兴趣的属性。现在你的 test.vue 文件的内容应该是:
1<template> 2 <div> 3 <h2>Hello this is for refs man!</h2> 4 <p>You have counted {{this.counter}} times</p> 5 <input type="text" ref="input"> 6 <button @click="submit">Add 1 to counter</button> 7 </div> 8</template> 9<script>10export default {11 name: 'Test',12 data(){13 return {14 counter: 015 }16 },17 methods: {18 submit(){19 this.counter++;20 console.log(this.$refs)21 }22 }23}24</script>25<style scoped>26p , input, button{27 font-size: 30px;28}29input, button{30 font-size: 20px;31}32ul {33 list-style-type: none;34 padding: 0;35}36li {37 display: inline-block;38 margin: 0 10px;39}40a {41 color: #42b983;42}43</style>
在你的浏览器上应如下所示:
在浏览器中测试运行
显示元素
要显示 DOM 中的 HTML 元素,请进入 submit 方法并将 methods 代码更改为以下内容:
1methods: {2 submit(){3 this.counter++;4 console.log(this.$refs.input)5 }6 }
这里的 input 是你之前在元素中创建的引用名称( ref="input")。它可以是你选择的任何名称。
显示输入的值
要显示 HTML 元素的输入值(在用户界面的文本框中键入的字符串),进入 submit 方法并将代码更改为:
1methods: {2 submit(){3 this.counter++;4 console.log(this.$refs.input.value)5 }6 }
这样就显示了你输入的字符串,当然用 vanilla JavaScript 和 jQuery 也可以实现相同的功能。
显示元素的 URL
进入 submit 方法并将代码更改为:
1methods: {2 submit(){3 this.counter++;4 console.log(this.$refs.input.baseURI)5 }6}
还有许多其他可以通过 ref 返回的对象信息。
条件处理
Vue.js 的 refs 也可用于输出 DOM 元素内部的多个元素,例如使用 v-for 指令的条件语句。refs 在调用时返回一个 item 数组,而不是对象。为了说明这一点,可创建一个这样的简单列表:
1<template> 2 <div> 3 <p v-for="car in 4" v-bind:key="car" ref="car"> I am car number {{car}}</p> 4 <button @click="submit">View refs</button> 5 </div> 6</template> 7<script> 8export default { 9 name: 'Test',10 data(){11 return {12 }13 },14 methods: {15 submit(){16 console.log(this.$refs)17 }18 }19}20</script>
当你在开发服务器中再次运行时,它将如下所示:
带条件的预览
你可以在 GitHub(https://github.com/viclotana/vue-refs)找到本教程的完整代码。
结论
本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素,例如值,子节点,数据属性,甚至它的 base URL。
另外我们还学会了实现这一目标的方法。要注意要在 Vue 实例初始化并且渲染组件之后填充 refs,所以不鼓励在计算属性中使用 ref,因为它能够直接操作子节点。
原文:https://blog.logrocket.com/how-to-use-refs-to-access-your-application-dom-in-vue-js/
©著作权归作者所有:来自51CTO博客作者mb5ff980b461ced的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- Web UI自动化测试之元素定位
- LeetCode #27 移除元素
- (美团)巧用数组下标,轻轻松松找出所有元素
- 超详细!详解一道高频算法题:数组中的第 K 个最大元素
- 动画:面试必刷之二维数组中查找一个元素
- 前 K 个高频元素告诉你桶排序有啥用
- Python办公自动化|光速对比并提取两份Word/Excel中的不同元素
- 动画: 快速排序 | 如何求第 K 大元素?