v-if = 'expression'
v-else-if = "expression"
v-else = "expression"
It is suitable for scenes with low switching frequency
Features: DOM elements not displayed are removed directly
When the above three are used together, the results shall not be interrupted
v-show = "expression"
It is suitable for scenes with high switching frequency
Features: DOM elements that are not displayed are not removed, but are only hidden with style (display:none)
Difference between v-if and v-show: v-if elements may not be available, but v-show elements must be available
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>conditional rendering </title> <script src="../js/vue.js"></script> </head> <body> <!-- container --> <div id="root"> <!-- conditional rendering --> <h2>conditional rendering </h2> <hr> <h3 v-show='show'>hello briup!</h3> <!-- v-if --> <!-- <h3 v-if='1==2'>Hello, JEP</h3> <h3 v-else-if='1==2'>Hello tom</h3> <h3 v-else>Hello terry</h3> --> <h3 v-if='1==1'>Hello, JEP</h3> <h3 v-if='1==1'>Hello tom</h3> <h3 v-if='1==1'>Hello terry</h3> </div> </body> <script> const vm=new Vue({ el:'#root', data:{ show:true } }) </script> </html>List rendering
v-for="(item,index) in xxx" :key="yyy"
Used to display list data
You can traverse arrays, objects, strings, and times
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List rendering</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- List rendering --> <h1>List rendering--Personnel information(Traversal of array)</h1> <ul> <!-- <li>Zhang san12</li> <li>Li si13</li> <li>Wang wu14</li> --> <li v-for='p in persons' :key='p.id'>{}--{}</li> </ul> <!-- List rendering --> <h1>List rendering--Car information(Traversal of objects)</h1> <ul> <li v-for='p,index,a,b in cars' :key='index'>{}--{}--{}-{}</li> </ul> <!-- String traversal --> <h2>String traversal</h2> <ul> <li v-for='(char,index) in str'>{}---{}</li> </ul> <!-- Traversal of times --> <h2>Traversal of times</h2> <ul> <li v-for='(item,index) in 5'>{}---{}</li> </ul> </div> </body> <script> new Vue({ el:'#app', data:{ persons:[ , , , ], cars:{ name:'audi', price:'70w', color:'black' }, str:'hello', }, }) </script> </html>Other rendering
v-text renders text content to its node
Difference from interpolation syntax: v-text will replace the content in the node, } will not
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-test</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>hello,{}</h2> <!-- v-text Will replace (overwrite) the original content --> <h2 v-text='name'>hello,</h2> </div> </body> <script> new Vue({ el:'#app', data:{ name:'briup' } }) </script> </html>
v-html renders HTML to its node
The difference between v-text and v-text is that v-text does not parse the contents, and v-html parses the contents
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-html</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>hello,{}</h2> <!-- v-html Will be resolved by html Generated content --> <h2 v-html='name'>hello,</h2> </div> </body> <script> new Vue({ el:'#app', data:{ name:'<h3>hello briup</h3>' } }) </script> </html>
V-once the node where v-once is located is regarded as static content after the first dynamic rendering
Subsequent data changes will not update the structure of v-once, and can be used to optimize performance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-once</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2 v-once>this is old {}</h2> <h2>this is {}</h2> <button @click='n++'>click n add one-tenth</button> <button @click='n--'>click n Minus one</button> </div> </body> <script> new Vue({ el:'#app', data:{ n:0 }, }) </script> </html>
life cycleAlias: lifecycle callback function, lifecycle function, hook function
Vue calls some special named functions for us at critical moments
The name of the lifecycle function cannot be changed, but the specific content of the function is written by the programmer according to the requirements
this in the lifecycle function points to the vm or component instance object
Four stages and eight processes1. Create
beforeCreate before instance creation
The data in data cannot be accessed through vm. The method in methods
Created after instance creation
You can access the data in data and the methods in methods through vm
2. Mount
The pre mount template is more complete than that one, but has not been mounted to the page
After mounting, the compilation is completed and mounted to the page
3. Update
data and page are out of sync before update
data and page synchronization after update
4. Destruction
vm.$destroy() must be manually triggered before destruction
After destruction
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue life cycle</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>this is {}</h2> <button @click='add'>Click plus one</button> <button @click='bye'>Destroy instance</button> </div> </body> <script> new Vue({ el: '#app', // template: '<div> // <h2>this is {}</h2> // < button @ Click ='add '> click Add one < / button > // </div>', data: { n: 1 }, methods: { // Click plus one add() { this.n++ }, bye(){ this.$destroy() } }, //Before instance creation is completed beforeCreate() { console.log('beforecreate'); // console.log(this.n);//undefined // this.add()//not a function }, // Instance creation completed created() { console.log('created'); // console.log(this.n); // this.add(); // debugger / / the page has not been parsed yet }, // The template has been compiled but not mounted to the page beforeMount() { console.log('beforeMount'); // debugger / / the page has not been parsed }, //data,methods and real DOM are also loaded, compiled and mounted on the page mounted() { console.log('mounted'); console.log(this.n); // debugger }, // Before data update, data and page are out of sync beforeUpdate() { console.log('beforeUpdate'); }, // After the data is updated, the data and page are synchronized updated() { console.log('updated'); // debugger }, // vm.$destroy() must be manually triggered before destruction beforeDestroy() { console.log('beforeDestroy') console.log(this.n); // debugger }, // After destruction destroyed() { console.log('destroyed') }, }) </script> </html>