特殊的ref和el

本文介绍了Vue实例的两个特殊属性:`el`和`ref`。`el`用于获取与Vue实例关联的DOM元素,`data`提供Vue实例的数据对象。`options`可以访问自定义属性,例如`methods`。而`refs`则用于获取页面中具有`ref`属性的DOM元素,如果有多个,只会返回最后一个。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

属性:
vm. e l 获 取 V u e 实 例 关 联 的 D O M 元 素 ; v m . el 获取Vue实例关联的DOM元素; vm. elVueDOMvm.data
获取Vue实例的data选项(对象)
vm. o p t i o n s 获 取 V u e 实 例 的 自 定 义 属 性 ( 如 v m . options 获取Vue实例的自定义属性(如vm. optionsVuevm.options.methods,获取Vue实例的自定义属性methods)
vm. r e f s 获 取 页 面 中 所 有 含 有 r e f 属 性 的 D O M 元 素 ( 如 v m . refs 获取页面中所有含有ref属性的DOM元素(如vm. refsrefDOMvm.refs.hello,获取页面中含有属性ref = “hello”的DOM元素,如果有多个元素,那么只返回最后一个)
Js代码
var app = new Vue({
el:"#container",
data:{
msg:“hello,2018!”
},
address:“长安西路”
})
console.log(app.KaTeX parse error: Expected 'EOF', got '#' at position 26: …实例的关联DOM元素,在这里是#̲container conso…data);
返回Vue实例的数据对象data,在这里就是对象{msg:”hello,2018“}
console.log(app. o p t i o n s . a d d r e s s ) ; 返 回 V u e 实 例 的 自 定 义 属 性 a d d r e s s , 在 这 里 是 自 定 义 属 性 a d d r e s s c o n s o l e . l o g ( a p p . options.address); 返回Vue实例的自定义属性address,在这里是自定义属性address console.log(app. options.address);Vueaddressaddressconsole.log(app.refs.hello)
返回含有属性ref = hello的DOM元素(如果多个元素都含有这样的属性,只返回最后一个)

呵呵 1{{msg}}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值