vue实例的常用属性和方法

常用属性

vm.$el

可以获取到Vue实例挂载的DOM元素，返回的是一个DOM对象。获取DOM元素之后可以为它设置样式等。

vm.$data

可以获取到Vue实例的data选项数据对象，返回的是一个对象。

<div id="app">
{{msg}}
</div>
<script>
 var vm=new Vue({
     el:"#app",
     data:{
         msg:"welcome"
     }
 })
 //vm.$el获取vm实例关联的元素/选择器，是一个DOM对象，就是上面的div
    console.log(vm.$el);
 //获取DOM元素，可以设置样式等
 vm.$el.style.color="red";
 vm.$el.style.background="blue";
</script>

vm.$options

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

vm.$refs

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

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

常用方法

vm.$mount()

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

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

vm.$nextTick()

vm.$nextTick(callback) 在 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>

运行结果：DOM中显示出来的是修改后的值，但是后面输出的textContent获取的仍然是前面的张三，原因就是DOM还没更新完成。dom 还没更新完成，Vue 实现响应式并不是数据发生改变之后dom 立即变化，需要按照一定的策略进行 dom 更新，需要一定的时间，而下面的代码立即执行。

vm.$nextTick(function(){
console.log(vm.$refs.title.textContent);
})

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

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='jingyu' },
            add(){
                vm.$set(this.user,'age',19)
                console.log(this.user);
            }
        }
    })
</script>

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='jingyu' },add(){
                if(this.user.age){ //age 属性存在加+1
                    this.user.age++;
                }
                else
                {
                    Vue.set(this.user,'age',28);
                }
            },deleteage(){
                if(this.user.age)
                {
//delete this.user.age //这种写法无效
                    vm.$delete(this.user,'age')
                }
            }
        }
    })
</script>