1、v-bind

  • We have successfully created the first Vue application ! It looks very similar to rendering a string template , however Vue A lot of work has been done behind the scenes . Now the data and DOM It's been linked , Everything is responsive . We manipulate object properties on the console , The interface can be updated in real time !

  • We can also use v-bind To bind element properties !

  • Code up

    <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><!--view layer , Templates --><div id="app"><span v-bind:title="message"> Hover for a few seconds to see the prompt information of dynamic binding here !  </span></div><!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model: data */data:{message: ' Page load on  ' + new Date().toLocaleString()}});</script></body></html>
  • What you see v-bind And so on are called instructions . Instructions are prefixed with v To show that they are Vue Special features provided . You may have guessed that , They're going to be rendering DOM Apply special responsive behavior here , The directive means :“ This element node's title Features and Vue Example of message Attributes are consistent ”.

  • If you open the browser again JavaScript Console , Input vm.message=‘ New news ’, You'll see the binding again title Characteristic HTML It has been updated .

2、v-if, v-else

What is a conditional statement , I don't need to explain it , Here are two attributes !

  • v-if

  • v-else

  • Code up

    <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><!--view layer , Templates --><div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1></div><!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model: data */data:{ok: true}});</script></body></html>

test :
1. Run... On a browser , Open console !
2. Input at the console vm.ok=false And then go back , You will find that the content displayed in the browser will directly become NO
   notes : Use v-* Attribute binding data does not need to be wrapped in curly braces

3、v-else-if

  • v-if

  • v-else-if

  • v-else

  • notes :=== Three equal signs in JS Is absolutely equal to ( That is, data and type should be equal ) Code up :

    <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><!--view layer , Templates --><div id="app"><h1 v-if="type==='A'">A</h1><h1 v-else-if="type==='B'">B</h1><h1 v-else-if="type==='C'">C</h1><h1 v-else>D</h1></div><!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model: data */data:{type: 'A'}});</script></body></html>

4、v-for

  • v-for

    <div id="app"><li v-for="(item,index) in items">{{item.message}}---{{index}}</li></div>
  • notes :items It's an array ,item Is an alias for an array element iteration . We learned later Thymeleaf The syntax of the template engine is very similar to this one !

  • Code up :

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--view layer , Templates --><div id="app"><li v-for="(item,index) in items">{{item.message}}---{{index}}</li></div><!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model: data */data:{items:[{message:'Java'},{message:' front end '},{message:' Operation and maintenance '}]}});</script></body></html>
  • test : Input at the console vm.items.push({message:' Back end '}), Try appending a piece of data , You will find that the content displayed in the browser will add a back end .

    There may be a mistake :Uncaught SyntaxError: Invalid or unexpected token

    Just type the order yourself , There may be illegal characters in the past .

5、v-on Monitoring events

  • Incidents Vue Events 、 And some of the events on the front page itself ! We have click yes vue Events , Can be bound to Vue Medium methods Method events in !

  • Code up :

    <!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><button v-on:click="sayHi"> Am I </button></div><script src="../js/vue.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{message:'Hello World'},methods:{sayHi:function(event){//'this' Point to the current in the method Vue example alert(this.message);}}});</script></body></html>
  • Click test
    Vue There are also some basic ways to use it , If you need it, you can follow the official documents , Because we've seen almost all of these basic instructions , By knowing one method you will know all ! Master the way of learning !