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

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.