1, What are instructions?

In vue, the instruction starts with v -, which is a special custom inter line attribute. The expected value of the instruction attribute is an expression. The responsibility of the instruction is to apply some behaviors to the DOM accordingly when the value of the expression changes. Only v-for is outside a class, followed by an expression.

An instruction can receive a parameter, which is represented by a colon after the instruction name. For example:

<a v-bind:href="url">vue Official website</a>

After the instruction is added, the url will be parsed as a variable.

2, Common instructions

2.1. v-model bidirectional data binding

The v-model instruction can be used to create bidirectional data bindings on input, textarea, and select elements. It will automatically select the correct method to update the element according to the control type.

Usage syntax: < input type = "text" V-model = "MSG" / >

<!-- modify input Values in, labels p The element content changes accordingly -->
<input v-model="content"/><p>{{ content }}</p>

data () {
 return {
  content: 'I am bidirectional data binding, and can have default values',
 }
}

2.2. v-for list rendering

Function: render a data into a list with the help of v-for.

Usage syntax: < Li V-for = "item in list" ></li>

Where list is the source data array and item is the alias of the array element being iterated.

<!-- Use example -->
<ul>
 <li v-for="item in list" :key="item.id">{{item.girl}}</li>
</ul>

data(){
 return{
  list:[
   { id:'1' , girl:'tearful'},
   { id:'2' , girl:'Hastily'}
  ]
 }
})

2.3 v-bind dynamic binding attribute

Function: used to dynamically bind attributes. When the attribute value changes, keep the page data or style up-to-date in time.

Usage syntax: < div bind: attribute = "variable" > < / div >

<!-- change url The picture address and the pictures in the web page will also be updated in real time -->
<img v-bind:src="url" alt="">

data () {
 return {
  url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
 }
}

2.4. v-on binding events

Function: bind event listening to elements. After triggering an event, execute the corresponding function in methods. It can be abbreviated as @.

Usage syntax: < div v-on: Click = "fun" > < / div > or < div @ Click = "fun" > < / div >

<!-- Click the button and the debugger will print out vue -->
<button @click="print">click,Print vue</button>

methods:{
 print(){
  console.log('vue')
 }
}

Note: when using the above v-on, no parameters are passed, so the parentheses after the method can be omitted.

When v-on passes parameters, parentheses must be added as follows.

<!-- Click the button and the debugger will print out vue -->
<button v-for="item in list" @click="print(item)">click{{item}}</button>

data () {
 return {
  list:[ 'one', 'two', 'three' ]
 }
},
methods:{
 print(item){
  console.log('click',item)
 }
}

This is a traversal button group. When clicked, the current element content will be printed.

2.5,v-if / v-else-if / v-else

Function: control the display and hiding of elements according to logical judgment.

Usage syntax: < div V-IF = "Boolean | expression" > < / div >

Note: v-if / v-else-if / v-else use the same syntax, but v-else-if and v-else must be used together with v-if and cannot be used alone.

<!-- modify show The content of the element will also change -->
<div >
 <span v-if="show">really</span>
 <span v-else>false</span>
</div>

data () {
 return {
  show:true,
 }
}

2.6,v-show / v-hide

Function: controls the display and hiding of elements.

Use syntax:

<div v-show=" boolean|expression " ></div> //Displays when the expression is true
<div v-hide=" boolean|expression " ></div> //Hide when expression is true

<div >
 <span v-show="show">really</span>
 <span v-hide="show">false</span>
</div>

data () {
 return {
  show:true,
 }
}

2.7 v-html parsing HTML tags

2.8. When v-once enters the page, it is rendered only once and will not be rendered again

2.9 v-cloak flicker prevention

2.10. v-pre outputs the elements inside the label in situ

2.11 v-text parsing text

3, The difference between v-if and v-show

Same point: it controls the hiding and display of elements.

difference:

• v-if is conditional rendering. When the conditions are met, node elements will be rendered, including event binding. If the conditions are not met, nodes will not be rendered, including events. However, v-show hides the display of nodes with the help of display:none. Its contents and events always exist.
• When v-if switches back and forth, the browser needs to render constantly, which consumes performance, so the cost is very high. However, v-show only hides the display, so the cost is low.
• v-show needs to render all pages during page initialization, which is relatively expensive compared with v-if.
• According to the characteristics of v-if, it is suitable for accelerating the rendering speed of initialization. v-show is suitable for frequent switching scenarios.