vue.js 是由 Evan You 和 vue 核心团队创建的渐进式 JavaScript 框架, 这是一个易于访问的核心库, 只专注于视图层. 它还具有庞大的支持库生态系统, 可帮助您轻松构建响应式 web 体验.
在这篇文章中, 您将了解如何在 Vue.JS 中引用组件中的 html 元素.
先决条件
这篇文章适合使用 Vue 的开发人员的各个阶段 - 包括初学者. 在阅读本文之前, 您应该已经具备一些先决条件.
您将需要以下内容:
Node.JS 版本 10.x 或更高版本. 通过在终端 / 命令提示符中运行 node -v 来验证您的版本
NPM 6.7 或以上
代码编辑器; 推荐 Visual Studio Code
最新版本的 Vue, 已在您的计算机上全局安装
您的计算机上已安装 Vue CLI 3.0. 为此, 请卸载旧的 CLI
首先使用 NPM 版本卸载 - g vue-cli, 然后使用 NPM install -g @ vue / cli 安装新版本
下载 Vue 入门项目 https://github.com/viclotana/vue-canvas
解压缩下载的项目, 导航到它, 并运行 NPM install 来保持所有依赖项的最新状态
什么是 refs?
引用是 Vue 实例属性, 用于注册或指示对应用程序模板中的 HTML 元素或子元素的引用.
如果将 ref 属性添加到 Vue 模板中的 HTML 元素, 则可以引用该元素, 甚至可以引用 Vue 实例中的子元素. 您也可以直接访问 DOM 元素. 它是一个只读属性, 并返回一个对象.
为什么 refs 很重要?
ref 属性对于通过充当父 $ref 属性中的键来选择包含它的 dom 元素至关重要. 例如, 将 ref 属性放在 input 元素中, 会将父 dom 节点公开为这样的.$refs.input, 或者可以这样说. refs["input"].
通过在特定元素的引用上定义方法, 可以很容易地操作 dom 元素. 一个好的实例是将焦点添加到一个输入元素, 其中:
this.$refs["input"].focus()
这样, refs 就可以像 JavaScript 中的 document.queryselector('.element')或 jQuery 中的 $('.element')一样使用.$refs 可以在 vue.JS 实例内部和外部访问. 但是, 它们不是数据属性, 因此不是反应性的.
在浏览器中进行模板检查时, 它们根本不会显示, 因为它不是 HTML 属性; 它只是 vue 模板属性.
演示
如果你从一开始就关注这篇文章, 你应该下载了 starter 项目并在 vs 代码上打开它. 打开 "组件" 文件夹并将其复制到 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. 这是非常重要的注意, 以免得到未定义的返回. 您可以访问被引用元素的每个可能属性, 包括模板中的元素.
让我们试着记录一些我们可能感兴趣的属性. 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: {
- submit(){
- this.counter++;
- console.log(this.$refs.input)
- }
- }
这里的输入是您先前在元素中创建的引用名称(ref="input"). 它可以是你选择的任何名字.
显示输入值
要显示 HTML 元素输入值(在用户界面的文本框中键入的字符串), 请进入 submit 方法并将代码更改为:
- methods: {
- submit(){
- this.counter++;
- console.log(this.$refs.input.value)
- }
- }
这将准确显示您键入的字符串, 这表明与原始 JavaScript 和 jQuery 也可以实现的查询选择相似.
显示元素的 url
可以在其中找到元素的网页也是可以与 vue ref 一起显示的许多内容之一. 进入 submit 方法并将代码更改为:
- methods: {
- submit(){
- this.counter++;
- console.log(this.$refs.input.baseURI)
- }
- }
您还可以通过返回的对象信息访问 ref 并使用 ref 进行日志记录.
处理条件
JS refs 也可以用于在 dom 中输出多个元素的元素内部, 如使用 v-for 指令的条件语句. refs 在调用时返回一个项数组, 而不是对象. 为了说明这一点, 创建一个简单的列表, 如下所示:
- <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>
在开发服务器中再次运行时, 它将如下所示:
您可以在 https://github.com/viclotana/vue-refs 上找到本教程的完整代码.
结论
这篇文章向您介绍了在 Vue.JS 中引用 DOM 中的 HTML 元素. 现在, 您可以通过所有元素属性 (例如值, 子节点, 数据属性, 甚至是容纳该元素的基本 URL) 访问和记录这些元素.
来源: http://www.css88.com/web/vue-js/13378.html