Vue 中的 ref 属性详解

我们先来读一下vue的官方文档

我们来分析官方文档
首先ref的引用是相当于一个DOM节点（如果是子组件则指向的是其实例），而且是一个string类型的值。
通俗的将就类似于原生js用document.getElementById("#id")
但是只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个ref的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。
说了这么多那么如何具体使用呢？
首先尝试普通DOM元素

<div id="app"><input type="text" value="HelloWorld" alt="captcha"  ref="text"><button @click="changeText">change word</button></div>

这是一段特别简单的html中加input和button代码
目的是运用ref属性点击按钮更改input中的文字。

我们在标签中加入ref属性

var app = new Vue({ el: '#app',data: {},//添加一个方法methods:{//改变文字changeText () {this.$refs.text.value = 'Hello Vue!'}}
});

网页初始时input现实的文字是HelloWorld

当点击change word按钮时，input中的文字发生变化

那么刚才代码中的this.$refs是什么呢？

通俗的将就是搜集所有的ref的一个对象。通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素，并对其进行操作。

其实组件中的子组件的ref原理也类似，只是指向的不是原组件而是组件的实例。
用法和普通DOM元素一样。

Vue 中的 ref 属性详解相关推荐

keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
vue中的ref属性
vue中的ref属性使用vue开发时经常会用到ref属性,ref属性有什么作用呢?我刚开始用的时候发现这个属性有点鸡肋,总是感觉可有可无,但是随着不断的使用vue,慢慢地发现它的作用还是挺重要的 ...
Vue中process.env.NODE_ENV详解
一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件,发现一行,甚是费解. process.env.NODE_ENV 查阅资料后,发现 ...
vue中通过ref属性来获取dom的引用
ref属性可以用来获取dom的引用,它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 <div id=&quo ...
【CSDN软件工程师能力认证学习精选】Vue 中的事件处理机制详解
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录一.Render 的资料简介 ...
Vue中created和mounted详解
目录一.生命周期概念二.浏览器渲染过程三.生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段四.使用场景五.常见相关问题 ...
Vue中keep-alive的使用详解
1.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁. 2.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 3.使用方 ...
android中xml tools属性详解
第一部分安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

Vue 中的 ref 属性详解

Vue 中的 ref 属性详解

网页初始时input现实的文字是HelloWorld

当点击change word按钮时，input中的文字发生变化

那么刚才代码中的this.$refs是什么呢？

Vue 中的 ref 属性详解相关推荐

最新文章

热门文章