Vuejs learning notes (2) -- attributes, event binding, ajax, vuejs learning notes

Source: Internet
Author: User

Vuejs learning notes (2) -- attributes, event binding, ajax, vuejs learning notes
Attribute

V-Similar to ng-repeat in angular, it is used to repeatedly generate html fragments;

<Ul id = "box"> <li v-for = "(v, I) in list ">{{ v }}</li> </ul> <script> var vm = new Vue ({el: '# box ', // The corresponding element selector or the variable data pointing to the element: {// data list: [, 3]}); </script>

It can also be written in this form v-for = 'v in list'. Duplicate data can also be in the js object format.

 

V-showLike ng-show in angular, if the value is true, it is displayed. If the value is false, it is hidden (display: none ).

V-modelLike ng-model in angular, it is mainly used for binding input element values.

V-bind:Used to bind property values;

 <script> var vm = new Vue ({el: '# box ', // corresponding element selector or variable data: {// data class: ['class1', 'class2'], // src: 'img/1.png '}}); </script>

Here, the class data can also be in the form of {'class1': true, 'class2': false}, the key value in the object is the class name, and the value is true, this class name is applied, otherwise, vice versa;
It can also be a string 'class1 '.

V-bind: short form, such as v-bind: class can be written as: class, v-bind: src can be written as: src, it is recommended to use short form.

Event binding

In vuejs, bind events in the form of v-on: click = "fn:

<Input type = "button" v-on: click = "add ()"> // <input type = "reset" v-on: click = "username = '000000'"> // it can also be a js statement <input type = "button" @ click = "add ($ event) "> // @ click is short for v-on: click. <input type =" text "@ click is recommended. stop = "add ($ event)"> //. stop indicates that the bubble is blocked <input type = "text" @ click. prevent = "add ($ event)"> //. prevent indicates the default behavior <input type = "text" @ keydown. up = "add ($ event)"> //. up corresponds to the keyboard up key <input type = "text" @ keydown. left = "add ($ event)"> //. left corresponds to the left Key of the keyboard
<Input type = "text" @ keydown.13 = "add ($ event)"> // enter key for. 13

<Script> var vm = new Vue ({el: '# box', // The element selector or the variable data: {// data username: 'vuejs '},
Methods: {// Method for storing events
Add: function (e ){}
}}); </Script>

Vue provides multiple types of event binding, which cannot be done without your imagination.

Ajax

Vue itself does not encapsulate the ajax module, we can use the vue plug-in vue-resource.js for data interaction; of course, you can also use jquery

The vue-resource.js API is similar to jquery's ajax, easy to use:

<script src="vue.js"></script><script src="vue-resource.js"></script>

<Script> var vm = new Vue ({el: '# box', // The element selector or the variable data: {// data username: 'vuejs '},
Methods: {// Method for storing events
Get: function (e ){
This. $ http. get ('url'). then (
Function (result) {console. log ('success')}, // callback function for successful requests
Function (result) {console. log ('fail ')} // The callback function when a failure occurs.
)
}
}}); </Script>

$ Http. get () returns the promise object. Promise (1)

$ Http also supports post (), jsonp (), and other cross-origin methods.

 

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.