vue interpolation expression, v-text, v-html, v-cloak, v-bind, v-on

Parse

Interpolation expressions: {} {}

v-html: parsing labeled statement

v-cloak: the use of v-cloak can solve the problem of flicker interpolation expression

v-text: v-text default is no flicker problem, v-text elements will be covered in the original content, but just substitute your own interpolation expression of this placeholder will not empty the entire contents of the elements

v-bind: Vue attribute binding mechanism provided abbreviations are:

v-on: Vue event binding mechanism provided by the acronym @

 

Second, examples

< Body > 
  < div ID = "App" > 
    <-! Using v-cloak interpolation expression can solve the problem of flicker -> 
    < P v-cloak > ++++++++ MSG {} {} - --------- </ P > 
    < H4 V-text = "MSG" > ================== </ H4 > 
    <-! default v-text is not flashing problem -> 
    <-! v-text elements will be covered in the original content, but just substitute your own interpolation expression of this placeholder will not empty the entire contents of the elements - > 

    < div > {{}} Msg2 </ div > 
    <div v-text="msg2"> </ Div > 
    < div V-HTML = "Msg2" > 1212112 </ div > 

    <-! V the bind-: Vue is provided instructions for the binding property -> 
    < INPUT type = "Button " value =" button " V the bind-: title =" MyTitle + '123' " > 
    <-! Note: v-bind: instructions may be abbreviated as: to be bound properties -> 
    ! <- V- bind, you can write a legal JS expression -> 

    <-! Vue is available in v-on: the event binding mechanism -> 
    < the INPUT of the type = "the button" value = "button" :title="mytitle + '123'" v-on:click= "Alert ( 'Hello')" > 


    < INPUT type = "Button" value = "button" @click = "Show" > 
  </ div > 


  < Script the src = "./ lib / VUE-2.4.0.js" > </ Script > 

  < Script > 
    var VM =  new new Vue ({ 
      EL: ' #app ' , 
      Data: { 
        MSG: ' 123 ' , 
        Msg2: ' <h1 of> ha, is a big I H1, I am, I pride </ h1>',
        mytitle: ' This is a title of their definition ' 
      }, 
      methods: { // This attribute defines the methods currently available methods all instances Vue 
        Show: function () { 
          Alert ( ' the Hello ' ) 
        } 
      } 
    }) 
  </ Script > 
< / body >