H5W3
当前位置:H5W3 > HTML5 > 正文

如何理解Vue.js中的ref及$ref,$

1.vue官方文档

首先我们来看一下vue官方是怎么解释的

好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

2.ref以及$ref

通过 ref 标注 DOM 元素

 // 在 DOM 元素上通过 ref 属性标注,属性名称自定义
<div ref="info">hello</div>

通过 $refs 获取 DOM 元素

// 通过 Vue 实例的 $refs 获取标记 ref 属性的元素
let info = this.$refs.info.innerhtml
console.log(info) // hello

所以说ref和$refs其实就是用来获取/操作DOM元素的,类似于jQuery中的$(‘.xx’)

3.$是什么?

Vue官方文档的解释

看完文档的介绍,里面有这么一句话

除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

我的理解是$就是内部函数的一种特殊命名方式,表示这个属性或者方法存在于 Vue 实例的原型上,然后在外部可以使用$去调用
例如:

var num = {a:1}
var vm =new Vue({
el:'#app',
data:num
})
console.log(vm.$data);

如何理解Vue.js中的ref及$ref,$

使用$data,就可以调用vue实例中data这个属性

来自:https://www.cnblogs.com/mingo233/archive/2020/08/21/13522072.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9596

未经允许不得转载:H5W3 » 如何理解Vue.js中的ref及$ref,$

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址