本文详细介绍了如何在Vue.js中使用refs引用组件中的HTML元素，包括其重要性、使用方法以及如何通过refs访问和操作DOM元素的属性。通过示例代码，展示了如何获取元素的值、基础URL等信息，并讨论了在条件语句中使用refs的情况。
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安装新版本
解压缩下载的项目，导航到它，并运行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文件中：
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。这是非常重要的注意，以免得到未定义的返回。您可以访问被引用元素的每个可能属性，包括模板中的元素。
让我们试着记录一些我们可能感兴趣的属性。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: {
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在调用时返回一个项数组，而不是对象。为了说明这一点，创建一个简单的列表，如下所示：
I am car number {{car}}
View refs
export default {
name: 'Test',
data(){
return {
}
},
methods: {
submit(){
console.log(this.$refs)
}
}
}
在开发服务器中再次运行时，它将如下所示：
您可以在github上找到本教程的完整代码。
结论
这篇文章向您介绍了在Vue.js中引用DOM中的HTML元素。现在，您可以通过所有元素属性(例如值，子节点，数据属性，甚至是容纳该元素的基本URL)访问和记录这些元素。
扫一扫
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
