1,v-bind
We have successfully created the first Vue application! It looks very similar to rendering a string template, but Vue does a lot of work behind it. Now that the data and DOM have been associated, everything is responsive. We operate object properties on the console, and the interface can be updated in real time!
we can also use v-bind to bind element attributes!
<!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, template--> <div id="app"> <span v-bind:title="message"> Hover for a few seconds to view the prompt information of dynamic binding here! </span> </div> <!--1.Import Vue.js--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", /*Model: data*/ data:{ message: 'Page loaded on ' + new Date().toLocaleString() } }); </script> </body> </html>
The v-bind you see is called an instruction. Instructions are prefixed with V to indicate that they are a special feature provided by Vue. As you may have guessed, they will apply special responsive behavior on the rendered DOM. Here, the instruction means: "keep the title attribute of this element node consistent with the message attribute of Vue instance".
if you open the JavaScript console of the browser again and enter app, message = 'new message', you will see that the HTML bound with the title feature has been updated again.
2,v-if， v-else
What is a conditional judgment statement? I don't need to explain it. The following two properties!
- v-if
- v-else
<!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, template--> <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/[email protected]/dist/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", /*Model: data*/ data:{ type: true } }); </script> </body> </html>
Test:
1. Run on the browser and open the console!
2. Enter vm.ok=false on the console and press enter. You will find that the content displayed in the browser will directly change to NO
note: data binding using v - * attribute does not need to be wrapped in double curly braces
v-else-if
- v-if
- v-else-if
- v-else
note: = = = the three equal signs in JS represent the code on absolute equal (that is, the data and type must be equal):
<!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, template--> <div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else-if="type==='D'">D</h1> <h1 v-else>C</h1> </div> <!--1.Import Vue.js--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", /*Model: data*/ data:{ type: 'A' } }); </script> </body> </html>
3,v-for
- v-for
Format description
note: items is an array, and item is the alias of array element iteration. The syntax of the Thymeleaf template engine we learned later is very similar to this!
upper Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view Layer, template--> <div id="app"> <li v-for="(item,index) in items"> {}---{} </li> </div> <!--1.Import Vue.js--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", /*Model: data*/ data:{ items:[ , , ] } }); </script> </body> </html>
Test: enter vm.items.push() on the console and try to add a piece of data. You will find that a crazy God says O & M will be added to the content displayed in the browser
v-on
v-on listening events
emsp; Events include Vue events and some events of the front-end page itself! click here is the event of Vue, which can be bound to the method event in methods in Vue!
upper Code:
<!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">Point me</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' points to the current Vue instance in the method alert(this.message); } } }); </script> </body> </html>
Click test
Vue also has some basic usage methods. If you need it, you can follow the official documents, because we have almost seen these basic instructions, which are all accessible! Master the way of learning!