Home > Developer > JavaScript
Calculation attribute usage in vue and vue instance method example, vue instance
This article describes how to use vue computing attributes and how to use vue instances:
Calculation attribute
Expressions in templates are very convenient, but they are only used for simple operations. The template is used to describe the view structure. Adding too many logic in the template will make the template too heavy and difficult to maintain. This is why Vue. js limits the binding expression to one. If more than one expression logic is required, the calculation attribute should be used.
Vue calculation attributes
When we want to return the attribute value based on the execution result of one end of the Business Code, we can use the computing attribute computed,
The calculation attribute is a result function, including the get and set methods and get methods. The return value must be returned.
<Script src = "lib/vue. js "> </script> <body> <div id =" box "> a =>{{ a} B =>{{ B }}</div> </ body> <script> var vm = new Vue ({el: '# box', data: {a: 1}, computed: {B: function () {// Business Code return this. a + 1 ;}});/** if you cannot directly change the attribute value, you need to call the set Method for attribute calculation **/document. onclick = function () {vm. B = 3 ;}; </script>
Set/get Method for attribute calculation:
<Script src = "lib/vue. js "> </script> <body> <div id =" box "> a =>{{ a} B =>{{ B }}</div> </ body> <script> var vm = new Vue ({el: '# box', data: {a: 1}, computed: {B: {get: function () {return this. a + 1 ;}, set: function (val) {this. a = val ;}}});/** if you cannot directly change the attribute value, you need to call the set Method for attribute calculation **/document. onclick = function () {vm. B = 3; // The set Method of the computing attribute is called by default}; </script>
Simple vue instance method
Vm is the name of the created vue Instance Object
Vm. $ el-> is the element
Vm. $ data-> is data
Vm. $ mount-> mount a vue object to a Node object
For example:
var vm2 = new Vue({ data:{}, methods:{} }).$mount('#box');
Equivalent:
var vm2 = new Vue({ el:'#box', data:{}, methods:{} });
Vm. $ options-> get custom attributes, custom methods
Vue instances can customize attributes and Methods. $ options is required for calling. For example:
Var vm2 = new Vue ({aa: '1', // custom attribute show: function () {alert (1) ;}, el: '# box', data: {}, methods :{}}); vm2. $ options. show (); console. log (vm2. $ options. aa );
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 for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
