实例属性

  • vm.$el
  • vm.$data
  • vm.options
  • vm.$refs
  • vm.$root

vm.$el

该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM

<body>
<div id="app">
    <h4>你好,这是四级标题</h4>
    <p>这是一个段落,我什么都不想说</p>
</div>
<button onclick="getEl()">获得el选项的DOM元素</button>
<script>
    var vm = new Vue({
        el:'#app'
    })
    function getEl(){
        console.log(vm.$el);//获得DOM元素
        vm.$el.style.color='red';//设置字体颜色
    }
</script>
</body>

vm.$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
即可以访问data选项中的数据。

<button onclick="getData()">vm.$data获得数据值</button>
data:{
    msg:'你好你好',
    arr:['what','are','you','doing','?']
}
function getData(){
    console.log(vm.$data.msg);
    console.log(vm.$data.arr.join(' '));
}

获得msg属性,获得arr数组,并通过join生成字符串。

vm.$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处。:

var vm = new Vue({
    el:'#app',
    data:{
        msg:'你好你好',
        arr:['what','are','you','doing','?']
    },
    name:'小小陈先森',
    user:{name:'小小陈先森',age:18,sex:'男'},
    show(){
            console.log(this.user.sex);
    }
})

console.log(vm.$options.name);
console.log(vm.$options.user.age);
console.log(vm.$options.show());

这个自定义属性,就是跟data选项同级,定义的属性或方法函数。通过$options可以操作调用。

vm.$refs

返回持有注册过 ref 特性 的所有 DOM 元素和组件实例,该类型为Object,且只读。
因为有好多ref,所以通过.名称获得组件实例。

<input type="text" ref="name" value="this is text"/>
<p ref="hello">HelloWorld</p>

console.log(vm.$refs.hello);
vm.$refs.name.value='whats';//.style.color='red';

Vue实例中不需要任何设置,只要持有ref属性的元素在根节点元素中即可。

vm.$root

当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

console.log(vm.$root);

若果只有这个一个vm实例,那么么vm.$root将返回自己,返回自己,直接相当于vm。

其他几个实例属性,将在讲解组件的时候介绍,而且组件很重要。

实例方法(数据操作)

vm.$watch

语法:

vm.$watch( expOrFn, callback, [options] )

观察Vue实例变化中的一个表达式或计算属性函数。监视某个属性,如果被更该,将执行回调函数。
表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

  • 第一个参数为表达式或计算属性函数,也可以是一个属性。
  • 第二个参数为,触发的回调函数
  • 第三个参数为,可添加的选项
    <input type="text" v-model="msg">
    data:{
    msg:'你好你好'
    }
    vm.$watch('msg',function(newVal,oldVal){
    console.log('新值为:' + newVal + ',旧值为:' +oldVal);
    });

    你可以把第一个参数设置为计算属性函数。

    vm.$watch(
        function(){
            return Number(this.a) +Number(this.b);
        },
        function(newVal,oldVal){
            console.log('新值为:' + newVal + ',旧值为:' +oldVal);
        }
    );

    另外vm.$watch返回一个取消观察函数,用来停止触发回调:

    var unwatch = vm.$watch('a', cb)
    // 之后取消观察
    unwatch()

    一旦执行unwatch()函数,就不会触发回调,且不再监视它。

    [options]可选参数,可以放值deep:true,用来深度监视。
    immediate:true,立即以表达式的当前值触发回调。
    另外vm.$watch方法与实例的watch选项具有相同的作用。

vm.$set

语法:

vm.$set( target, key, value )

参数:

  • {Object | Array} target
  • {string | number} key
  • {any} value
    设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新
    示例:

    data:{
    user:{
        id:1001,
            name:'tom'
        }
    }
    
    //通过普通方式为对象添加属性时vue无法实时监视到
    this.user.age=25;
    //通过vue实例的$set方法为对象添加属性,可以实时监视
    this.$set(this.user,'age',18); 
    //通过全局API方式设置,全局API在后面介绍
    Vue.set(this.user,'age',22);

    注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象

vm.$delete

语法:

Vue.delete( target, key )

参数:

  • {Object | Array} target
  • {string | number} key/index

    仅在 2.2.0+ 版本中支持 Array + index 用法。

删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。

//使用js的方式无效
delete this.user.age; 
//使用vm.$delete
vm.$delete(this.user,'name');
//使用全局API的方式
Vue.delete(this.user,'age');

目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

实例方法(事件操作)

vm.$on,vm.$emit

语法:

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
语法:

vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。
示例:

<div id="app">
    <p v-on:click="test($event,'123')">自定义事件</p>
</div>
methods:{
    test(event,num){
        vm.$emit('test',num);
    }
}

vm.$on('test',function(num){
    console.log('已监听,并执行回调函数');
    console.log('获得的值为:' + num);
});

当单击p标签文字时,将触发自定义的单击事件test,我们可以在test函数里进行单击后的操作。
通过vm.$on监听这个自定义的test事件,可以执行回调函数,但是它需要通过vm.$emit方法来触发,第一个参数为自定义事件名,第二个参数为附加参数。

vm.$emit方法在父子组件中也用于子组件向上传递数据。

vm.$once

语法:

vm.$once( event, callback )

监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
示例:

<button v-on:mouseover="mouseover">只执行一次监听</button>

methods:{
    mouseover(){
        console.log('移动到了此节点')
        vm.$emit('mouseover');//可随时,在任何处触发.
    }
}

vm.$once('mouseover',function(){
    console.log('已监听,并执行回调函数');
});

通过测试发现,第一次触碰按钮,将打印“移动到了此节点”,“已监听,并执行回调函数”,但是,等第二次在触碰则只打印“移动到了此节点”。将不会在调用监听的回调函数,因为它已不再被监听。

vm.$off

语法:

vm.$off( [event, callback] )

移除自定义事件监听器。

  • 如果没有提供参数,则移除所有的事件监听器;
  • 如果只提供了事件,则移除该事件所有的监听器;
  • 如果同时提供了事件与回调,则只移除这个回调的监听器。

实例方法(生命周期)

vm.$mount

语法:

vm.$mount( [elementOrSelector] )

如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
这个方法返回实例自身,因而可以链式调用其它实例方法。
示例:

vm.$mount('#app');
//或
var vm=new Vue({
    data:{
        msg:'小小陈先森',
        name:'tom'
    }
}).$mount('#app');

查看Vue实例生命周期

vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM。
举个小例子:

<p ref="thisP">{{name}}</p>

data:{
    name:'小小陈先森'
}
//js代码
vm.name='Tom';
console.log(vm.$refs.thisP.textContent);

如果你没有添加最后一行的.textContent,那么你执行起来也没什么数据的错误。
设置为“Tom”值,console.log依然为“Tom”。如果你加上.textContent或的其内容。
你会发现,虽然设置了值为“Tom”,但打印控制台在依然为“小小陈先森”。
原因:
就如,该函数的介绍所说,当实例渲染加载完毕后显示Tom,但因为Vue数据更新后,需要渲染视图,所以需要等待这块DOM更新后才能显示出新值,而js代码执行较快,而直接通过.$refs获得了内容,没等得及DOM加载渲染完毕。
而此方法就是来处理它的。
代码:

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

将其放在回调函数里,等DOM执行完后,在执行回调函数。这样就额可以了。

vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子函数。

在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。