vue系列：vue的常用属性和方法
vue系列：vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()
好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习
文章目录
- vue系列：vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()
- 前言
- 一、 vm.$ el、vm.$ data
- 二、vm.$ options、vm.$ refs
- 三、vm.$ mount()、vm.$ nextTick（）
-
- 1、vm.$ mount()
- 2、vm.$ nextTick（）
- 四、vm.$ set() vm.$ delete()
-
- 1、vm.$ set（）添加属性
- 2、vm.$ delete（）删除属性
- 总结
前言
前面我么已经学完了vue的基础内容，接下来学的是中级进阶实战内容，今天我们先来了解一下vue实例中常用的属性和方法。
一、 vm.$ el、vm.$ data
注意：这里$ 符号和el、data 中间都是没有空格的
作用：
通过Vue 实例属性 vm.$ el 即可获取到 Vue 实例挂载到的 dom元素，返回的是一个 dom 对象通过 Vue 实例属性 vm.$ data 即可获取到 Vue 实例 data 选项数据对象，返回的是一个对象。
<body>
<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>
body>
二、vm.$ options、vm.$ refs
注意：这里$ 符号和options、refs 中间都是没有空格的
可以通过 vm.$ options 获取自定义选项,当然 vm.$options也可以获取默认选项值(只不过 el、data 上面有更简单获取方式)
vm.$ refs 属性用来获取页面中所有具有 ref 属性的元素(因此要先设置 ref 属性),返回的是 dom 元素集合对象
<body>
<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"
},
//也可以自定义一些 Vue 选项，然后通过 vm.$options 获取自定义选项
name:"zhangsan",
age:28,
show:function(){
console.log("自定义show方法")
},
methods:{
show12(){
alert("111")
}
},
watch:{
},
computed:{
}
})
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>
三、vm.$ mount()、vm.$ nextTick（）
1、vm.$ mount()
用来实现手动挂载 vm 实例到哪个 dom 元素上
<body>
<div id="app">
{{msg}}
div>
<script>
var vm=new Vue({
// el:"#app",
data:{
msg:"welcome to vue"
},
}).$mount("#app")
script>
相当于把el:“#app”,注释掉，然后在vm后面加上.$ mount (“#app”)
2、vm.$ nextTick（）
vm.$ nextTick(callback) 在 dom 更新完成之后再执行此回调函数，一般是在修改数据之后使用该方法，以便获取更新后的 dom。
<body>
<div id="app">
{{msg}}
<h1 ref="title">标题：{{name}}h1>
div>
<script>
var vm=new Vue({
// el:"#app",
data:{
msg:"welcome to vue",
name:"zhangsan"
},
}).$mount("#app")
vm.name='李四'
console.log(vm.$refs.title)
vm.$nextTick(function(){
console.log(vm.$refs.title.textContent)
})
script>
body>
四、vm.$ set() vm.$ delete()
1、vm.$ set（）添加属性
vm.$ set(object，key，value)——为对象添加属性：为对象添加属性 key，并给定属性值 value
<body>
<div id="app">
<button @click='update'>修改属性button>
<button @click='add'>添加属性button>
<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(){
// this.user.age=28
//vm.$set 是全局 Vue.set 的别名，即是可以用 Vue.set 来实现。Vue.set 是全局的 set 方法，写法前面是Vue，后面的 set 前没有$符号
// this.$set(this.user,'age',28)
//第 1 次单击添加属性，显示 age 为 22，后面每单击一次加 1
if(this.user.age){//age 属性存在加+1
this.user.age++
}
else
{
Vue.set(this.user,'age',22)
}
console.log(this.user)
}
},
}).$mount("#app")
script>
body>
2、vm.$ delete（）删除属性
vm.$ delete(object,key)作用：删除对象属性：删除 object 对象的属性 key。
<body>
<div id="app">
<button @click='update'>修改属性button>
<button @click='add'>添加属性button>
<button @click='deleteage'>删除属性button>
<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(){
// this.user.age=28
// this.$set(this.user,'age',28)
if(this.user.age){
this.user.age++
}
else
{
Vue.set(this.user,'age',22)
}
console.log(this.user)
},
deleteage(){
// delete this.user.age
// vm.$delete(this.user,'age')
Vue.delete(this.user,'age')
console.log(this.user)
}
},
}).$mount("#app")
script>
body>
vm.$set 是全局 Vue.set 的别名，即是可以用 Vue.set 来实现. vm.$delete 是全局 Vue.delete 的别名，即可以用Vue.deletet 来实现
总结
以上是本人的学习笔记，为了方便日后回顾，也可供大家参考，如果有错误的地方，还请各位指出。谢谢！！！