本文是我在学习过程中记录学习的点点滴滴，仅仅为了学完之后巩固一下，日后忘记了也可以方便快速的复习。

Vue 实例常用的属性和方法

前言
一、Vue实例常用属性
- 1.1、vm.$ el、vm.$ data
- 1.2、vm.$ options、vm.$refs
二、vm.$ mount()、vm.$nextTick() （Vue 实例常用方法 ——生命周期）
- 2.1、vm.$mount（）
- 2.2、vm.$nextTick()
三、vm.$ set()、 vm.$delete()（Vue 实例常用方法——为对象添加和删除属性)
- 3.1、vm.$set
- 3.2、 vm.$delete

前言

今天主要学习的是关于 Vue 实例的常用属性 vm.$el、vm.$data、vm.$options、vm.$refs和Vue 实例的常用方法 vm.$mount（）、vm.$nextTick()、vm.$set()、 vm.$delete()

一、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来获取

<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({el: "#app", data: {//data 常规存储数据
msg:"welcome to vue"
}
})
//vm.$el 获取 vm 实例关联的元素/选择器，是一个 dom 对象，就是上面的 div
console.log(vm.$el);
//拿到 dom 元素，我们可以做些事情，比如设置样式
vm.$el.style.color="red";
vm.$el.style.backgroundColor="blue"
//vm.$data 获取数据对象 data
console.log(vm.$data);
//vm.$data.msg 就可以拿到 data 里面的 msg 属性值，只不过是有下面更简单的方法 vm.msg
console.log(vm.$data.msg);
//vm.属性名 获取 data 中的属性(不是在上面的 dom 中获取，上面 dom 获取直接{{msg}}即可)
console.log(vm.msg);
</script>

结果：

注意：上面 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 元素集合对象。

<div id="app">
{{msg}}
<h2 ref='hello'>你好</h2>
<p ref='world'>小豆子学堂欢迎您</p>
</div>
<script>
var vm = new Vue({el: "#app", data: {//data 常规存储数据
msg:"welcome to vue"
}, methods: {show12(){alert("1111")
}
}, //也可以自定义一些 Vue 选项，然后通过 vm.$options 获取自定义选项
name:'zhangsan', age:28, show:function(){console.log('自定义选项 show 方法')
}
})
console.log(vm.$options.methods)
vm.$options.methods.show12()
//vm.$options 获取自定义选项
console.log(vm.$options.name);
console.log(vm.$options.age);
vm.$options.show();//获取的执行 show 方法结果
//使用 Vue 基本不需要去根据 id、class 获取某个 dom 元素，但是某些时候可能也有需要，原生的 js 或者 jquery 就是通过 id、class或者元素标签去获取
//vm.refs 获取页面中所有具有 ref 属性的元素,返回的是 dom 元素集合对象console.log(vm.$refs);
//获取 ref 属性值为 hello 的 dom 对象
console.log(vm.$refs.hello);
//拿到 dom 元素后，就可以做些操作，比如下面设置 dom 元素的文字颜色
vm.$refs.hello.style.color='blue' </script>

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

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

2.1、vm.$mount（）

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

总结：
该方法是手动用另一种方式来挂载元素。
vue.$mount()
也可以省略vue直接在vue实例后面.$mount()

<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({// el: "#app", data: {//data 常规存储数据
msg:"welcome to vue"
}
})
/* vue 实例方法 */
//vm.$mount（）用来实现手动挂载 vm 实例。如上面是通过 el: "#app"告知挂载到 app 元素上，如果注释掉该句，则可以通过下面手动挂载
vm.$mount('#app')
</script>

因此上面vue代码可以写成如下：

<scrpt>
new Vue({
data: {
msg: 'welcome to vue' }
}).$mount('#app')
</script>

2.2、vm.$nextTick()

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

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

<div id="app">
{{msg}}
<h1 ref='title'>标题：{{name}}</h1>
</div>
<script>
var vm = new Vue({data: {msg: 'welcome to vue', name: '张三', }
}).$mount('#app')
vm.name='李四' console.log(vm.$refs.title) //得到的是具有 ref 属性且属性值为title 的 dom 元素<h1></h1>
console.log(vm.$refs.title.textContent)//取得 dom 元素 h1的文本内容
</script>

运行结果：

分析：
上面改变 name 的值，DOM 中显示出来的是修改后的值，但是发现后面打印输出的 textContent 取到的仍然是前面的张三，原因如下：
dom 还没更新完成，Vue 实现响应式并不是数据发生改变之后dom 立即变化，需要按照一定的策略进行 dom 更新，需要一定的时间，而下面的代码立即执行（执行完上面的更新语句，立即执行下面的代码，这个速度很快的，比 dom 更新要快的，即是下面语句先执行了，然后才更新 dom 的），所以还是未更新前的。

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

<div id="app">
{{msg}}
<h1 ref='title'>标题：{{name}}</h1>
</div>
<script>
var vm = new Vue({data: {msg: 'welcome to vue', name: '张三', }
}).$mount('#app')
vm.name='李四' console.log(vm.$refs.title) //得到的是具有 ref 属性且属性值为title 的 dom 元素<h1></h1>
console.log(vm.$refs.title.textContent)//取得 dom 元素 h1 的文本内容
vm.$nextTick(function(){console.log(vm.$refs.title.textContent);
})
</script>

结果：

三、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

<div id="app">
<button @click='update'>修改属性</button>
<button @click='add'>添加属性</button>
<hr />
<h1>{{user.name}}</h1>
<h1>{{user.age}}</h1>
</div>
<script>
var vm=new Vue({el:'#app', data:{user:{id:1001, name:'jack' }
},methods:{update(){this.user.name='徐照兴' },
add(){vm.$set(this.user,'age',28)
console.log(this.user);
}
}
})
</script>

结果：

注意：属性名 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

<div id="app">
<button @click='update'>修改属性</button>
<button @click='add'>添加属性</button>
<button @click='deleteage'>删除属性</button>
<hr />
<h1>{{user.name}}</h1>
<h1>{{user.age}}</h1>
</div>
<script>
var vm=new Vue({el:'#app', data:{user:{id:1001, name:'jack' }
},methods:{update(){this.user.name='徐照兴' },add(){if(this.user.age){ //age 属性存在加+1
this.user.age++;
}
else
{Vue.set(this.user,'age',22);
}
},deleteage(){if(this.user.age)
{//delete this.user.age //这种写法无效
vm.$delete(this.user,'age')
}
}
}
})
</script>

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

Vue 实例常用的属性和方法相关推荐

python类中的属性分为类属性和实例属性两种_python从入门到大神---1、初始化实例、类属性、方法...
python从入门到大神---1.初始化实例.类属性.方法一.总结一句话总结: 方法不加括号是代码段:感觉python方法和js,php很类似,不加括号是代码段,加括号变成方法,比如f,f() 1 ...
ListBox控件—列表控件--常用的属性和方法
ListBox控件-列表控件 --常用的属性和方法 Items: public ObjectCollection Items {get; } 摘要: 该属性使用户可以获取当前存储在ListBox中的项 ...
08-数组中常用的属性及方法
08-数组中常用的属性及方法创建: 使用 JavaScript 关键词 new 使用数组文本创建 //数组中的方法: toString() 把数组转换为数组值(逗号分隔)的字符串. join() 方 ...
dom对象常用的属性和方法有哪些？
dom对象常用的属性和方法有哪些? 一.总结一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...
JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题
JavaScript学习(六十六)-字符串对象常用的属性和方法总结以及数组元素的排序问题学习内容一.数组去重问题二.二维数组的定义三.二维数组的元素操作四.二维数组的遍历五.关联数组六. ...
JavaScript学习（三十三）—事件对象常用的属性和方法
JavaScript学习(三十三)-事件对象常用的属性和方法 (一).type属性 <style>#box {width: 200px;height:
JavaScript学习（六）—location对象常用的属性和方法
JavaScript学习(六)-location对象常用的属性和方法一.location对象作用:location是window对象的一个属性,本身也是对象类型,它的作用是用来获取文档对象的相关信 ...
Vue项目中background-image属性设置方法
vue项目中background-image属性设置方法方式一:直接访问在vue-cli项目中的放在public目录下的资源会被直接复制,不会经过webpack的打包处理. <span cl ...
FileStream常用的属性和方法：
对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanW ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...

Vue 实例常用的属性和方法

Vue 实例常用的属性和方法

前言

一、Vue实例常用属性

1.1、vm.$ el、vm.$ data

1.2、vm.$ options、vm.$refs

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

2.1、vm.$mount（）

2.2、vm.$nextTick()

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

3.1、vm.$set

3.2、 vm.$delete

Vue 实例常用的属性和方法相关推荐

最新文章

热门文章