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属性被删除了。

相关内容

热门资讯

掘出尘烟深处的人性   ▌汪泉《青烟》杜万青 著 作家出版社  一缕青烟从祁连山深处飘逸而出,那青烟的下面是晚清至民国时...
中信银行焕新发布“小天元”企业...   在数字经济成为国家核心竞争力的战略背景下,中央金融工作会议将“数字金融”列为“五篇大文章”核心要...
中粮资本涨2.98%,成交额1... 7月11日,中粮资本涨2.98%,成交额19.32亿元,换手率6.29%,总市值310.59亿元。异...
智慧农业涨0.31%,成交额1... 7月11日,智慧农业涨0.31%,成交额1.46亿元,换手率3.20%,总市值46.45亿元。异动分...
华星创业涨0.58%,成交额7... 7月11日,华星创业涨0.58%,成交额7994.56万元,换手率2.69%,总市值35.16亿元。...
星空卫视的海贼王 星空卫视的海贼王星空卫视的动漫现在还播放国语版的海贼王吗?? 我只知道现在就播放到380集 后面就没...
赛轮轮胎跌0.15%,成交额3... 7月11日,赛轮轮胎跌0.15%,成交额3.57亿元,换手率0.81%,总市值438.63亿元。异动...
安道麦A涨0.67%,成交额3... 7月11日,安道麦A涨0.67%,成交额3789.80万元,换手率0.23%,总市值174.97亿元...
金钼股份涨2.60%,成交额4... 7月11日,金钼股份涨2.60%,成交额4.50亿元,换手率1.22%,总市值368.80亿元。异动...
仙琚制药涨0.74%,成交额1... 7月11日,仙琚制药涨0.74%,成交额1.61亿元,换手率1.72%,总市值94.17亿元。异动分...