Vue- basis (a)

A common instruction in .Vue

　　What are the instructions?

　　Instruction is that some pages and data for more convenient operation provided vue,

　　Instruction data is to drive the DOM are simplified operation DOM

　　Common commands

　　v-text / v-html: internal label assignment for:

　　　　Difference between the two: v-text can not be parsed html .v-html tag html tags may parse

　　v-if / v-else-if / v-else: determining whether a condition for

　　v-show: determining whether a condition for Show / Hide

　　　　Difference between the two: v-show is set to hide the label displa essence: none, and v-if the label is hidden Zhushidiao

　　v-for: navigating the object or array

 

.Vue two-way data flow in a two-way data flow, and event binding

　　1. The way data flow ==> also called a one-way data binding, to change the impression that the memory page change, js code running in memory, change the html page

　　　　Using v-bind command,

<input v-bind:value="name" v-bind:class="name">

　　2. The bi-directional data flow ==> two-way data binding, to change the value of the input page, and can affect memory Js code name of the variable, the same memory JS change the value of the name, it will affect the page re-rendering the latest value

　　　　V-model using the instruction: Note: v-model element has to only the attribute value

<input v-model="name" v-bind:class="name">

　　3. Event Binding:

　　　v-on: event name = "expression || function" can be abbreviated to @ event name = "function name expression ||"

 

III. Listener properties computed and computing watch

　　When the method of the object being monitored is changed, the listener will trigger or computing properties

　　Both of comparison:

　　　　individual listening watch, monitor plurality computed,

　　Precautions:

　　　　When the watch is listening complex data types, such as when an array of objects, you need to do deep listening (deep: true)

Watch: { 
　　// attribute being monitored
    msg:{
        Trades (val) {
           if(val.text=='love'){
              alert(val.text)
              }
             },
    Deep: to true // turn on the depth of listening 
          }
}