This article introduces the use of vue computing attributes and examples of vue instances. It is shared with you, as follows:
Calculate properties
Expressions are very convenient in templates, but they are actually only used for simple operations. The template is to describe the structure of the view. Putting too much logic into a template can make the template too heavy and difficult to maintain. This is why binding expressions are restricted to one expression. If more than one expression is required, computed properties should be used.
vue compute attributes
When we want to return the value of the attribute based on the execution result of one end of the business code, we can use the computed attribute to compute.
Computation attributes are a function with results, with a get method and a set method, a get method, a return value must have a return value.
<script src="lib/"></script>
<body>
<div >
a = >{{a}}
b = > {{b}}
</div>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function () {
//Business code return +1;
}
}
});
/**If you can't directly change the value of the attribute, you need to call the set method of the calculation attribute**/
= function(){
= 3;
};
</script>
Set/get method for calculating properties:
<script src="lib/"></script>
<body>
<div >
a = >{{a}}
b = > {{b}}
</div>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function () {
return +1;
},
set:function(val){
= val;
}
}
}
});
/**If you can't directly change the value of the attribute, you need to call the set method of the calculation attribute**/
= function(){
= 3;
//The set method of computed attributes is called by default };
</script>
Easy way to vue instance
vm is the name of the created vue instance object
vm.$el -> is the element
vm.$data -> is data
vm.$mount -> Mount the vue object on the node object
For example:
var vm2 = new Vue({
data:{},
methods:{}
}).$mount('#box');
Equivalent to:
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});
vm.$options -> Get custom properties, custom methods
Vue instances can customize properties and methods. If you need to call it, you need to call $options, as shown below:
var vm2 = new Vue({
aa:'1',//Custom properties show:function () {
alert(1);
},
el:'#box',
data:{},
methods:{}
});
vm2.$();
(vm2.$);
vm.$destroy -> Destroy object
vm.$log(); -> View the current data status
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.