ciya68

Vue 实例常用的属性和方法

发布时间: 2022.06.15
阅读量: 65
分享:

一、Vue实例常用属性

1.1、vm.$ el、vm.$ data

问题:

在 new Vue 实例时我们经常设置 el、data 选项,data 选项里面又可以定义很多属性(常称为数据属性),那么能不能获取到 el所挂载的 dom 元素,能不能获取 data 对象呢?


答案:

可以。因为 Vue 实例提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。


作用:

通过 Vue 实例属性 vm.$el 即可获取到 Vue 实例挂载到的 dom元素,返回的是一个 dom 对象,如 div,拿到 dom 元素后我们可以为它设置样式之类的。

通过 Vue 实例属性 vm.$data 即可获取到 Vue 实例 data 选项数据对象,返回的是一个对象。


总结:

vm.$el是使用另一种方式来挂载dom元素

vm.$data是获取data中的对象,使用vm.$data.xxx来获取

image.png


结果

image.png


注意:上面 vm 改为 this 可以吗?
不可以,在 new Vue 内部才可以用this


1.2、vm.$ options、vm.$refs

作用:

至今我们在 new Vue 实例时学过如下选项的设置:el、data、methods、computed、watch、钩子函数等(后续还会学一些)。此外,也可以自定义一些选项,可以是简单属性也可以是方法,然后可以通过 vm.$options 获取自定义选项,当然 vm.$options 也可以获取默认选项值【只不过 el、data 上面有更简单获取方式】。


总结:

vm.$options是获取vue元素下面的选项(el、data、methods等),且选项是可以自己定义的。

vm.$refs是用来获取dom元素的,用vue的思想使用数据驱动来获取dom元素。


在使用 JS/Jquery 获取页面的 DOM 元素时,我们一般是根据id、class、标签、属性等其它标识来获取到页面上的 DOM 元素。可以说,我们很难抛弃 Jquery 的一个重大原因,就是当我们需要获取到页面上的 DOM 元素时,使用 Jquery 的 API 相比于原生的 JS代码,简单到极致。

js原生代码获取dom

document.getElementById(‘id’).value => $(‘#id’).val()

这种直接操纵 DOM 元素的方式,与我们使用 Vue 的初衷不符,虽然能达成效果,但是却不提倡(因为 Vue采用 Virtual DOM 的做法渲染网页,如果我们直接操作 DOM,很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题),这里我们就可以使用 ref 来获取页面上的 DOM 元素


vm.$refs 属性用来获取页面中所有具有 ref 属性的元素【因此要先设置 ref 属性】,返回的是 dom 元素集合对象。

image.png

先会弹出一个 “1111”的对话框,然后结果如下图。

image.png



二、vm.$ mount()、vm.$nextTick() (Vue 实例常用方法 ——生命周期)

2.1、vm.$mount()

作用:

用来实现手动挂载 vm 实例到哪个 dom 元素上


总结:

该方法是手动用另一种方式来挂载元素。

vue.$mount()

也可以省略vue直接在vue实例后面.$mount()

image.png因此上面vue代码可以写成如下:

image.png


2.2、vm.$nextTick()

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


总结:该方法是可以控制在执行vm.$nextTick()后在刷新dom元素,因为该方法是在修改元素的值和渲染dom元素的值之间的方法,可以在修改元素的值后但渲染dom元素之前进行一系列的操作。


image.png


运行结果:

image.png


分析:

上面改变 name 的值,DOM 中显示出来的是修改后的值,但是发现后面打印输出的 textContent 取到的仍然是前面的张三,原因如下:

dom 还没更新完成,Vue 实现响应式并不是数据发生改变之后dom 立即变化,需要按照一定的策略进行 dom 更新,需要一定的时间,而下面的代码立即执行(执行完上面的更新语句,立即执行下面的代码,这个速度很快的,比 dom 更新要快的,即是下面语句先执行了,然后才更新 dom 的),所以还是未更新前的。


那么如何做可以让 console.log(vm.$refs.title.textContent)在

dom 更新完成之后再执行呢?

使用 vm.$nextTick(callback)方法,该方法里面是一个回调函数,回调函数就会等到 dom 更新之后再执行

image.png


结果

image.png



三、vm.$ set()、 vm.$delete()(Vue 实例常用方法——为对象添加和删除属性)

总结:

vm.$set(this.user,‘age’,28)

改为可以

this.user.age=28;

但是这样添加属性,你会发现对象里面是有了属性 age,但是在页面里面没有显示出来 age,也就是说这种添加属性不是响应式的(即时同步数据),要响应式的就需要采用 vm.$set,一添加数据页面上有的话就会立马显示。


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

vm.$delete(this.user,‘age’)

且可以使用全局的来代替,如下:

Vue.delete(this.user,‘age’)


3.1、vm.$set

作用:

vm.$set(object,key,value)——为对象添加属性:为对象添加属性 key,并给定属性值 value

image.png


image.png


注意:属性名 age 外单引号不能少。当然可以是双引

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

vm.$set(this.user,‘age’,28)

代码又可以改为下面的代码:

Vue.set(this.user,‘age’,22);

Vue.set是全局的 set 方法,写法前面是Vue,后面的 set前没有$符号


3.2、 vm.$delete

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

image.png


另外,vm.$delete 是全局 Vue.delete 的别名,即可以用
Vue.deletet 来实现也可以用下面的代码来实现
Vue.delete(this.user,‘age’)

分享到微信朋友圈 ×

Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号 Copyright © 2016 ciya. Inc. All rights reserved