Vue2.0笔记——Vue常用实例属性，实例方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0笔记——Vue常用实例属性，实例方法相关的知识，希望对你有一定的参考价值。

实例属性
  • 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 指令以数据驱动的方式控制子组件的生命周期。

以上是关于Vue2.0笔记——Vue常用实例属性，实例方法的主要内容，如果未能解决你的问题，请参考以下文章

Vue2.0 第四季第1节 实例入门-实例属性

vue2.0学习笔记之生命周期

Vue2.0笔记——Vue实例

Vue2.0笔记——常用指令

Vue2.0笔记——组件3

vue2.0学习-实例和内置组件