The vue instruction is prefixed with v-.

V-bind One-way data binding

To display data in HTML, you can also use the V-bind directive in VUE in addition to the interpolation {{}}.

. . <body> <div id="app"> <! -- V-bind directive --> <h1 V-bind :title="message"> {{content}} </h1> </div> <script SRC ="vue.min.js"></script> <script> new Vue({el: '#app', data: {content: 'I am the title ', message:' page loaded '+ new Date().tolocaleString ()}}) </script> </body>... .Copy the code

Hover over the title and you can see that the message data in data is displayed. This is what v-bind:title=”message” does.

V-bind can also be used as a shorthand, with a colon:.

<! -- Short form of v-bind: colon (:) --> <h1 :title="message"> {{content}} </h1>Copy the code

Ii. V-model two-way data binding

V-bind is a one-way binding that takes the data from the data element to display. Two-way binding, however, can not only take the data of the data to display on the page, but also modify the data in the data when changing the page value. See the examples:

. . <body> <div id="app"> <! <input type="text" V-bind :value=" searchmap. keyWord"><br> <! <input type="text" V-model =" searchmap. keyWord"> <p>{{searchmap. keyWord}}</p> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { searchMap:{ keyWord: 'Bidirectional binding'}}}) </script> </body>... .Copy the code



You can see that we have both of the input fieldsdataIn thesearchMap.keyWordIs displayed"Bidirectional binding".

At this time, first modify the value of the input box above, this is one-way binding, after modification, find the input box to getdataIn thesearchMap.keyWord. There are still"Bidirectional binding".



Then, change the value of the following input field, which is bidirectional binding, and change the value of the unidirectional binding input field.dataIn thesearchMap.keyWordThe value of is modified.

3. V-on binding events

The V-ON directive can bind events, such as click.

. . <body> <div id="app"> <! <input type="text" v-model=" searchmap.keyword "> <! -- the v-on directive binds the event, click specifies the event type to bind, <button V-on :click="search()"> query </button> </div> <script SRC ="vue.min.js"></script> <script> new Vue({ el: '#app', data: { searchMap:{ keyWord: 'click the query button triggers the click event'}}, the methods: {search () {the console. The log (' triggers the click event ')}}}) < / script > < / body >... .Copy the code

The query button is bound to the click eventv-on:click="search()"The search() method in vue is called when the button is clicked.

Console. log(' trigger click event '), browser F12 view console, you can see the output.



V-on is short for@:

<! - v - on the directive shorthand @ - > < button @ click = "search ()" > query < / button >Copy the code

4. Modifiers.

The modifier is a half-angle period. A specified special suffix used to indicate that an instruction should be bound in a particular way. For example, the.prevent decorator tells the V-ON directive to call onSubmitForm() for the raised event rather than perform a submit, which prevents the event from behaving as it should by default.

<body> <div id="app"> <form action="save" v-on:submit.prevent="onSubmitForm"> <input type="text" id="name" V-model ="user.username"></input> <button type="submit"> </form> </div> <script SRC ="vue.min.js"></script> <script> new vue ({el: '#app', data: { user: {} }, methods: {onSubmitForm() {if (this.user.username) {console.log(' execute custom method ')} else {alert(' please enter username ')}}}}) </script> </body>Copy the code

Click the save button to see the effect.



The actual use is not much, understand good.

V – IF conditional instruction

It’s just an if else, but it’s inside the page. For example, the page to write a judgment, tick, untick when the display of different content:

. . <body> <div id="app"> <input type="checkbox" V-model =" OK "> Check whether <! -- v:if conditional instruction: And v - else, v - else - if - > < h1 v - if = > "ok" when check the show < / h1 > < h1 v - else > when you don't check the show < / h1 > < / div > < script SRC = "vue. Min. Js" > < / script > <script> new Vue({ el: '#app', data: { ok: false } }) </script> </body> ... .Copy the code

When not checked,

When checked,

V -show conditional instruction

V-show does the same as v-if above.

<h1 V-show =" OK "> Show when checked </h1> <h1 V-show ="! Ok "> show </h1> when uncheckedCopy the code

The difference is that V-if has a higher switching overhead, while V-show has a higher initial rendering overhead. If you need to switch very frequently, use V-show. It is better to use V-if if conditions rarely change at run time.

V -for list loop instruction

The for loop is pretty familiar, and it’s going to be the same here, where you can loop through a list, loop through all the elements in the list. You can also add index, the index of the element, if you want, starting at 0.

For example, if there are three objects in the uselist, you can use the for loop to retrieve the values of any of the fields in the list.

. . <body> <div id="app"> <table> <! -- <tr v-for="item in userList"></tr> --> <tr v-for="(user, index) in userList"> <td>{{index}}</td> <td>{{user.id}}</td> <td>{{user.username}}</td> <td>{{user.age}}</td> </tr> </table> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { userList: [ { id: 1, the username: 'big week, age: 38}, {id: 2, the username:' fat hong, age: 28}, {id: 3, the username: 'xiaomao, age: 18 } ] } }) </script> </body> ... .Copy the code



Four columns correspond to each otherIndex, ID, username, age.