Vue实例的常用属性 Vue实例常用方法
创始人
2024-05-30 11:42:10
0

vm.$ el和 vm.$ data

在new Vue()实例中经常设置el,data选项,data选项里面又可以定义很多属性(常称为数据属性),Vue提供了一些有用的实例属性与方法,它们都有前缀$,以便与用户定义的属性相区别。

使用Vue实例属性vm.$ el可以获取到Vue实例挂载的DOM元素,返回的是一个DOM对象,获取DOM元素后可以为它设置样式等。

使用 vm.$ data 可获取到Vue实例的data选项数据对象,返回的是一个对象。

{{msg}}

在这里插入图片描述

可以看到我们获取了两个属性,一个是这个DOM元素对象,另一个是Vue实例中的data对象

我们可以改变这个DOM元素的样式:

        vm.$el.style.color = "red"vm.$el.style.backgroundColor = "yellow"

在这里插入图片描述
提问:
上例中的vm可以改为this吗?
回答:
不可以,在new Vue()内部才可以使用this。



vm.$ options 和 vm.$refs

前面也学过如下选项的设置:el 、data 、methods 、computed 、watch、 钩子函数等。此外也可以自定义一些选项,如简单属性或办法,然后通过vm.$ options获取自定义选项。当然,vm.$ options也可以获取默认选项值,只不过el、data等有更加简单的获取方式。

Vue采用的是Virtual DOM(虚拟DOM树)的做法渲染页面,如果直接操作DOM,很容易产生实际网页与Vue产生的Virtual DOM 不同步的问题,这里就可以使用ref来获取页面的DOM元素。

vm.$ refs属性可以用来获取页面中所有具有ref属性的元素,返回的是DOM元素集合的对象。


{{msg}}

你好

这是我写的vue程序

这段代码通过vm.$ options 可以在外部访问到Vue实例中的methods属性

在这里插入图片描述
可以通过该语句执行Vue实例中的show方法
methods可省略

vm.$options.methods.show()

我们在打印以下vm.$ refs属性

console.log(vm.$refs)

在这里插入图片描述

发现获取到了DOM元素。

我们也可以更改DOM元素内容的样式,但用的是我们自己在元素标签内自定义的属性,

vm.$refs.hello.style.color = "yellow"

在这里插入图片描述



Vue实例常用方法

与Vue实例生命周期相关的方法

1、vm.$ mount()
vm.$ mount()用来实现手动挂载vm实例到某个DOM元素上。

{{msg}}

上述代码也可以写成这样

{{msg}}

2、vm.$ nextTick()

vm.$ nextTick(callback)在DOM元素更新完成之后再执行此回调函数,一般是在修改数据之后使用该方法,以便获得更新后的DOM元素。

{{msg}}

标题:{{name}}

运行之后:
在这里插入图片描述
在这里插入图片描述
我们通过vm属性尝试改变张三

vm.name = "李四"

在这里插入图片描述
在这里插入图片描述
可以看到页面中的李四被渲染上去了,但是vm.$ refs.title.textContent属性的值依然是张三。

这是因为DOM还没更新完成。Vue实现响应式并不是数据发生改变之后DOM立即发生变化,需要按照一定的策略进行DOM更新,会需要一定的时间,而执行完vm.name = “李四”,之后立即执行console.log(vm.$ refs.title)代码,这个执行速度很快,比DOM更新要快,即下面语句先执行了,然后才更新的DOM,所以控制台显示的还是未更新前的。

那么如何做可以让 console.log(vm.$ refs.title.textContent)在DOM更新完成之后再执行呢?
使用vm.$ nextTick(callback)方法。该方法里面有一个回调函数,这个回调函数会等到DOM更新之后再执行。

    
{{msg}}

标题:{{name}}

在这里插入图片描述

这次输出的值变为李四了。

为对象添加和删除属性的方法

  • 1、vm.$ set()

vm.$ set(object,key,value)的作用是为对象添加属性key,并给定属性值value。

 var vm = new Vue({el: "#app",data: {user: {id: 1001,name: "jack"}}})

下面更新新属性和添加属性

    

{{user.name}}

{{user.age}}

在这里插入图片描述
点击修改属性

在这里插入图片描述
点击添加属性:
在这里插入图片描述
输出的user对象多了一个age属性 值为我们设置的19

在这里插入图片描述

可以页面中并没有渲染出来
也就是说使用这种方式添加属性并不是响应式的,可以使用vm.$ set方法实现响应,代码如下:

vm.$set(this.user,"age","19")
        var vm = new Vue({el: "#app",data: {user: {id: 1001,name: "jack"}},methods: {update() {this.user.name = "xiaofu"},add() {this.$set(this.user, "age", 19)console.log(this.user)}}})

在这里插入图片描述

成功渲染

注意:
这里的vm.$ set 中的vm可以换成this,写在new Vue()内部即可。

另外,vm.$ set是全局Vue.set 的别名,即可以用Vue.set来实现。

  • 2、vm.$ delete()

vm.$ delete(object,key)的作用是删除object对象的属性的key。

    

{{user.name}}

{{user.age}}

在这里插入图片描述

点击删除属性:
在这里插入图片描述
19不见了,我们看看this.user

在这里插入图片描述
age属性被删除了。

相关内容

热门资讯

市值首次站上4万亿美元后,英伟... 英伟达的供应链遍布全球,在中国台湾,墨西哥、越南等多个国家及地区都有生产基地及市场。为了与中国市场保...
投资者提问:董秘你好,我觉得深... 投资者提问:董秘你好,我觉得深蓝和阿维塔产品都非常不错,但公司需要一个资深营销总监,把现在的销售团队...
特朗普遭未遂刺杀案:美特勤局6... 据美国广播公司(ABC)10日报道,一名美国官员证实,因在去年针对当时的总统候选人特朗普的未遂刺杀案...
拓斯达拟为润阳世纪光伏提供不超... 2025年7月11日,广东拓斯达科技股份有限公司发布关于向客户提供融资租赁回购担保的公告,拟为江苏润...
中国第一家保险公司的保单原来在... 转自:上观新闻今年的7月8日是第13个全国保险公众宣传日,由上海市保险学会、上海市保险同业公会联合策...
防溺水“压力山大”,南昌为何仍... 转自:半月谈 #南昌免费开放两滩七湾天然泳场# 【防溺水...
汽车行业今日净流出资金26.7... 沪指7月11日上涨0.01%,申万所属行业中,今日上涨的有19个,涨幅居前的行业为非银金融、钢铁,涨...
联合国设立“世界马日” 向人... 中新网北京7月11日电 据联合国新闻官网消息,今年的7月11日是联合国大会通过投票设立的首个“世界马...
Mhy20250711油脂晚评... (转自:南京玛合雅)一、【市场关注】1、北京时间7月10日(周四)中午12:30,马来西亚棕榈油局M...
25股股东户数连降 筹码持续集... 投资者可以在交易所互动平台上通过提问方式了解部分公司更及时(每月10日、20日、月末)的股东户数信息...