Vuejs Learning Notes (1)--attributes, event bindings, Ajax

Property

v-for is similar to ng-repeat in angular, which is used to generate HTML fragments repeatedly;

<ul id= "box" >       <li vfor = "(V, i) in list" >{{v}}</li></ul><script>    var New Vue ({        ' #box ',              //corresponding element selector or a variable pointing to an element        data: {                  //Data            list: [+/-]        }    }); </script>

Can also be written in this form v-for= ' V in list ', duplicate data can also be JS object format.

The v-show is the same as the ng-show in angular, and the value is true to show that false is hidden (display:none).

V-model , like Ng-model in angular, is primarily used for binding input element values.

v-bind: used to bind attribute values;

<script>    varnew  Vue ({         ' #box ',              //  the corresponding element selector or the variable that points to the element        data: {                  //  data            class: [' Class1 ', ' Class2 '],//             ' Img/1.png '        }    }); </script>

The class data here can also be the object form of {' Class1 ': true, ' Class2 ': false}, the object's key value is the class name, value is true to apply this class name, otherwise;
It can also be the string ' class1 '.

V-bind: Shorthand forms, such as V-bind:class can be written as: class, V-BIND:SRC can be written as: SRC, recommended to use shorthand.

Event Bindings

Bind an event in Vuejs using v-on:click= "FN ()":

<input type= "button" v-on:click= "Add ()" >              //<input type= "reset" v-on:click= "Username= ' 123 '" >   // It can also be a JS statement <input type= "button" @click = "Add ($event)" >           //@click is a shorthand for v-on:click, it is recommended to use <input type= "text" @ click.stop= "Add ($event)" >        //. Stop to prevent bubbling <input type= "text" @click. prevent= "Add ($event)" >     //. Prevent represents the default behavior <input type= "text" @keydown. up= "Add ($event)" >        //. Up corresponds to keyboard up key <input type= "text" @ Keydown.left= "Add ($event)" >     //. Left corresponding keyboard left key

<input type= "Text" @keydown. 13= "Add ($event)" >       //. 13 corresponding to the ENTER key

<script>    var vm = new Vue ({        el: ' #box ',              //corresponding element selector or a variable that points to an element        data: {                  //Data            Username: ' Vuejs '        },
        Methods: {              //store event corresponding method
Add:function (e) {}
}    });</script>

Vue provides multiple forms of event binding that no one could do, only you could not imagine.

Ajax

The Vue itself does not encapsulate the Ajax module, and we can use Vue's plug-in vue-resource.js to do the data interaction, and of course we can use jquery

The Vue-resource.js API is similar to jquery's Ajax, and is easy to get started with:

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

<script>    var vm = new Vue ({        el: ' #box ',              //corresponding element selector or a variable pointing to the element        data: {                  //Data            Username: ' Vuejs '        },
        Methods: {              //store event corresponding method
Get:function (e) {
          this. $http. Get (' URLs '). Then (
　　　　　　　　    function (Result) {Console.log (' success ')},  //Request Successful callback function
function (Result) {Console.log (' fail ')}     //Failure callback
)
          }
}    });</script>

$http. Get () returns the Promise object. Plain English explanation promise (I.)

$http also supports post (), JSONP () cross-domain methods.

Vuejs Learning Notes (1)--attributes, event bindings, Ajax