| 用ref访问Vue.js程序中的DOM | 您所在的位置：网站首页 › 酷开14u › 用ref访问Vue.js程序中的DOM |
用ref访问Vue.js程序中的DOM
|
作者：Nwose Lotanna 翻译：疯狂的技术宅 原文：https://blog.logrocket.com/ho... 未经允许严禁转载 在本文中，你将了解如何在 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/...） 解压缩下载的项目，切换到它所做的目录并运行 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 文件中： Hello this is for refs man!You have counted {{this.counter}} times Add 1 to counter export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.ref) } } }现在用以下命令在开发服务器中运行它： npm run serve你将看到用户界面会显示一个简单的计数器，该计数器在单击时会被更新，但是当你在浏览器中打开开发人员工具时，你会注意到它没有记录日志。 正确的使用语法非常重要，因为这意味着 Vue 不会将此视为错误，的确如此。根据我们已经知道的关于 Vue refs的内容，它们会返回一个对象，但是根据未定义的响应来判断，有些东西是错误的。将下面的代码复制到 test.vue 文件中： Hello this is for refs man!You have counted {{this.counter}} times Add 1 to counter export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } }当你运行并检查它时，你会发现现在返回了一个对象：
快速查看代码块将揭示正确的语法：在模板中它被称为 ref，但是当我们在 Vue 实例中引用它时，它被称为 $refs。当不返回 undefined时，这提示是非常重要的。你可以访问引用元素的每个可能的属性，包括模板中的元素。 接下来记录一些我们可能感兴趣的属性。现在你的 test.vue 文件的内容应该是： Hello this is for refs man!You have counted {{this.counter}} times Add 1 to counter export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } } 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; }在你的浏览器上应如下所示：
要显示 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 数组，而不是对象。为了说明这一点，可创建一个这样的简单列表： I am car number {{car}} View refs export default { name: 'Test', data(){ return { } }, methods: { submit(){ console.log(this.$refs) } } }当你在开发服务器中再次运行时，它将如下所示：
你可以在 GitHub（https://github.com/viclotana/...）找到本教程的完整代码。 结论本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素，例如值，子节点，数据属性，甚至它的 base URL。 另外我们还学会了实现这一目标的方法。要注意要在 Vue 实例初始化并且渲染组件之后填充 refs，所以不鼓励在计算属性中使用 ref，因为它能够直接操作子节点。 本文首发微信公众号：前端先锋 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
深入理解Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13个帮你提高开发效率的现代CSS框架
快速上手BootstrapVue
JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
WebSocket实战：在 Node 和 React 之间进行实时通信
关于 Git 的 20 个面试题
深入解析 Node.js 的 console.log
Node.js 究竟是什么？
30分钟用Node.js构建一个API服务器
Javascript的对象拷贝
程序员30岁前月薪达不到30K，该何去何从
14个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩展插件
Node.js 多线程完全指南
把HTML转成PDF的4个方案及实现
更多文章...
原文链接:https://segmentfault.com/a/1190000019857955 |
【本文地址】