Vue- ref属性

ref属性

被用来给元素或者子组件注册引用信息(id的替代者)

通过案例来演示_ref属性

1 编写案例

如图:有一个按钮,点击按钮可以输出dom元素

备注:虽然vue不用我们亲自操作dom,但是有的特殊的情况下就要亲自操作dom

Vue- ref属性_第1张图片

页面就是这个样子的

Vue- ref属性_第2张图片

2 传统操作dom

如果使用传统的方式,给属性一个id,再使用document,getElementById是可以操作的,但是这些代码,本身就不应该出现在vue中,这里我应该给h1id属性的,但是给错了,问题不大

Vue- ref属性_第3张图片

虽然可以实现,但是不推荐

Vue- ref属性_第4张图片

3 vue的ref属性

原生的html喜欢给元素id标识,在vue中有类似的办法,不过不是使用id而是ref

这里面我给h1标签一个ref属性,然后单击的时候输出vc,可以看到里面有一个$refs属性,里面就死定义的ref属性

Vue- ref属性_第5张图片

既然已经找到了refs,那么就可以使用$refs编写了

Vue- ref属性_第6张图片

也是可以正常拿到dom元素的

Vue- ref属性_第7张图片

4 细节问题

组件标签ref属性

上面我是给h1标签加了ref属性,h1属性html标签,但是如果想给school标签加ref呢?school可是组件标签

我们测试下

Vue- ref属性_第8张图片

发现如果给组件标签加了ref,得到的就是这个组件的vc实例对象

Vue- ref属性_第9张图片

组件标签id属性

但是如果给组件标签id标识,并且通过dom获取id,获取到的就不是vc实例对象了

Vue- ref属性_第10张图片

观察发现得到的是实例的根容器

Vue- ref属性_第11张图片

5 ref属性总结

1 被用来给元素或者子组件注册引用信息(id的替代者)

2 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)

3 使用方式:

打标识:

获取:this.$refs.xxx

你可能感兴趣的:(Vue,vue.js,javascript,前端)