Table of contents
1. Vue instance methods and instance data
2. Instance methods and events
3. Instance methods and life cycle
foreword
Before understanding the common instance methods of Vue, we should first understand its commonly used instance attributes. What are the Vue instance attributes that you can learn about? The editor lists the properties of several commonly used Vue instances here. Everyone can learn together.
- get mounted element --vm.$el
- Get an object of initialization options for the instance --vm.$options
- Get the observed data object --vm.$data
- An object that can hold all DOM elements and component instances registered with the ref attribute
1. Vue instance methods and instance data
1、vm.$set
This instance method is another name for the Vue.set method. Its function is to add properties. Because vue has no way to detect ordinary new function properties, we can make vue detect it by using the vm.$set method.
2、vm.$delete
This method is also an alias for the vue and delete methods. Its function is to delete the attributes of the object. Vue deletes attributes through this method, which can be detected.
3、vm.$watch
This instance method is used to observe the change of an expression or a function calculation result in the instance. If there is a change, the function will be called back. The callback function will get the new value and the old value of the parameters.
We can understand this part through a code example:
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">删除</button>
<h3>你想要的东西：{
{goods.name}}</h3>
价格：<input type="text" v-model.number="price"></br>
数量：<input type="number" v-model="count"></br>
总和：<input type="text" v-model="total"></br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
goods:{},
price:0,
count:1,
total:0
},
});
function addName(){
Vue.set(vm.goods,'name','漫画书');
};
function deleteName(){
if(vm.goods.name){
vm.$delete(vm.goods,'name');
}
}
vm.$watch('price',function(newVal,oldVal){
return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
return this.total = newVal*this.price;
})
</script>
</body>
</html>operation result:
Each time the "Add" button is pressed, the "comic book" in {{goods.name}} will be displayed, and when "Delete" is pressed, { {goods.name}} will be displayed as empty; when When price and quantity change, the total price also changes.
2. Instance methods and events
1、vm.$on
This instance method can be used to listen to custom events in the vue instance. These events are triggered by vm.$emit, and the callback function will receive all the additional parameters of the incoming time-triggered function.
2、vm. $emit
This instance method triggers the event on the current instance, and the additional parameters are passed to the listener for function callback.
3、vm.$once
The function of this instance method is to listen to a custom event, but it can only be triggered once. Once triggered, the listener will be overflowed.
4、vm.$off
The function of this instance method is to remove a custom listener.
Let's take a look through the code:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<button @click="zengjia">增加</button>
{
{num}}
<button onclick="jianshao()">减少</button>
<button onclick="off()">解除减少操作事件</button>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:100
},
methods:{
zengjia:function(){
this.num++;
}
}
});
vm.$on("reduce",function(step){
vm.num =step;
});
function jianshao(){
vm.$emit("reduce",2);
}
function off(){
vm.$off("reduce");
}
</script>
</body>
</html>Running result: Every time you click the "Reduce" button, the value will decrease; when you click "Remove the decrease operation event", the value will not change after clicking the decrease button.
3. Instance methods and life cycle
1、vm.$mount
The function of this instance method is: if the instance does not receive the el option, it will be in the "unmounted" state, because there is no DOM element associated with it. Manual mounts can be performed using this mount method.
2、vm.$destroy
This instance method is primarily used to completely destroy an instance, clear connections to other instances, and dismiss all directives and event listeners.
3、vm.$nextTick
The callback function in this instance method can be delayed until the DOM is updated, but if the DOM event is performed by the created hook function in the vue life cycle, it must be placed in the callback function of .nextTick. You can use .nextTick immediately after the data changes, so that the callback function can be called after the DOM update is complete.
We understand it through code examples:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<h2 ref="first">{
{first}}</h2>
<h3 ref="secnd">{
{second}}</h3>
<input type="text" v-model="msg">
<p>{
{msg}}</p>
<button onclick="destroy()">销毁</button>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let vm = new Vue({
data:{
msg:"看到你就烦",
first:'1',
second:'2',
},
});
vm.$mount('#app');
vm.first = '丘比特';
vm.second = vm.$refs.first.textContent;
console.log(vm.second);
Vue.nextTick(function(){
vm.second = vm.$refs.first.textContent;
console.log(vm.second);
})
function destroy(){
vm.$destroy();
}
</script>
</body>
</html>Running results: We can see that the console console is 'Cupid', and the value of executing vm.$nextTick is the value in msg -- 'It's annoying to see you', and the page will also be updated synchronously. When you click 'Destroy', and then write the value, text, etc. in the text box, it has been destroyed and will not be updated.
