如何在Vue.js中使用引用访问您的应用程序DOM

2020年12月30日11:15:57 发表评论 34 次浏览

本文概述

Vue.js是由创建的渐进式JavaScript框架埃文·尤和Vue核心团队, 来自230多个开源社区爱好者。 Vue被超过870, 000个项目使用, 并已加注星标在GitHub上有140, 000次。这是一个易于访问的核心库, 仅专注于视图层。它还具有庞大的支持库生态系统, 可帮助你轻松构建响应式Web体验。

在这篇文章中, 将向你介绍在以下组件中引用HTML元素的方法:Vue.js.

先决条件

这篇文章适合使用Vue的开发人员的各个阶段-包括初学者。在阅读本文之前, 你应该已经具备一些先决条件。

你将需要以下内容:

  • Node.js10.x版或更高版本。通过运行验证你的版本节点-v在你的终端/命令提示符下
  • npm6.7以上
  • 代码编辑器;我强烈推荐Visual Studio Code
  • 最新版本的Vue, 已全局安装在你的计算机上
  • 你的计算机上已安装Vue CLI 3.0。为此, 请先使用以下命令卸载旧的CLI版本:npm卸载-g vue-cli, 然后使用安装新的npm install -g @ vue / cli
  • 下载一个Vue入门项目
  • 解压缩下载的项目, 进入它并运行npm安装使所有依赖关系保持最新

什么是裁判?

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

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

为什么裁判很重要?

ref属性对于使DOM元素(包括在其中)可以作为父元素的键进行选择至关重要, $ ref属性。因此, 例如, 将ref属性放在输入元素中, 会将父DOM节点公开为this。$ refs.input, 或者你可以说this.refs [" input"].

通过在特定元素的引用上定义方法, 可以轻松地操作DOM元素。一个很好的例子是使用这个:

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

这样, 引用就可以像document.querySelector('。element')在JavaScript或$('。element')在jQuery中。的$ refs可以在Vue.js实例内部和外部进行访问。但是, 它们不是数据属性, 因此它们不是反应性的。

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

我们为制作了一个自定义演示.
不完全是。点击这里查看.

如何在Vue.js中使用引用访问您的应用程序DOM1

演示版

如果你从一开始就遵循了这篇文章, 那么你应该已经下载了starter项目并在VS Code上打开了它。打开组件文件夹并将其复制到测试值文件:

<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引用的了解, 它们返回一个对象, 但是从未定义的响应来看, 出了点问题。将以下代码复制到测试值文件:

<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>

运行此程序并对其进行检查时, 你会注意到它现在返回一个对象:

检查test.vue

快速浏览一下代码块将揭示正确的语法:在模板内部被称为参考, 但是当我们在Vue实例中引用它时, 它称为$ refs。注意这一点非常重要, 以免返回未定义的返回值。你可以访问引用元素的每个可能的属性, 包括模板中的元素。

让我们尝试记录一些我们可能感兴趣的属性。你的测试值文件应为:

<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 ="输入")。它可以是你选择的任何名称。

显示输入值

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

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

这将精确地显示你键入的字符串, 这表明与原始JavaScript和jQuery也可以实现的查询选择相似。

显示元素的URL

可以在其中找到该元素的网页也是Vue参考可以显示的许多内容之一。进入提交方法, 并将代码更改为此:

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

从返回的对象的信息中, 你还可以使用ref访问和记录其他许多内容。

处理条件

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

<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>

当你在开发服务器中再次运行它时, 它将如下所示:

带条件的App预览

你可以找到本教程的完整代码在GitHub上.

准确了解Vue应用中的DOM用户的操作方式

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了你网站上发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式–免费开始监控.

总结

这篇文章向你介绍了在Vue.js中引用DOM中的HTML元素。现在, 你可以通过所有元素属性(例如值, 子节点, 数据属性, 甚至是容纳该元素的基本URL)访问和记录这些元素。

还向你介绍了实现此目标的方法。重要的是要注意, 在初始化Vue实例并渲染组件之后, 将填充ref, 因此不建议在计算属性中使用ref, 因为它具有直接操作子节点的能力。骇客入侵!

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: