Calculation attribute usage in vue and vue instance method example, vue instance

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.