Vue property is bound v-bing v-on event bindings

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* [v-cloak] {
       display: none; 
    }*/
  </style > 
</ head > 

<! - 1. How to define a basic code structure Vue -> 
<! - 2-interpolation text expressions and V    -> 
<! - 3. V-Cloak - > 
<! - 4. HTML-V -> 
<-! 5. the V-binding properties of the bind mechanism Vue abbreviations are provided: -> 
<! - event 6. v-on Vue bindings provided mechanism abbreviation @ -> 

< body > 
  < div ID = "App" > 
    <-! using v-cloak interpolation expression to solve the problem of scintillation -> 
    < P v-cloak > {MSG} {} - -------- </ P >
    <h4 v-text = "MSG" > ================== </ H4 > 
    <-! default v-text is no flicker problem -> 

    < div > { Msg2}} { </ div > 
    < div V-text = "Msg2" > </ div > 
    <-! V-text element overwrites the original contents, the contents will not as a pattern to parse HTML 
      but v- cloak interpolation expression will replace its placeholder, not empty the entire contents of the element -> 
    <! - content v-html elements and will clear the content as HTML tags to parse -> 
    < div ID = 'Hdmi' V-HTML = "Msg2" > 1,212,112 </div>

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

    < the INPUT of the type = "the button" value = "button" @click = "Show" > 
    <the INPUT of the type = "the Button" : value = " 'Click increment' + sz"@click = "the Add" : title = "sz" > 
    <-! Vue is available in v-on: the event binding mechanism -> 
    <-! <the INPUT of the type = "the Button" value = "button": title = "MyTitle + '123'" V-ON: the Click = "Alert ( 'Hello')"> -> 
    <-! Note: v-on: instructions may be abbreviated to @click -> 
    <-! Note: v-on: instruction can support multiple binding events -> 
  </ div > 


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

  < Script > 
    var vm =  new new VUE ({ 
      EL:'#app',
      data: {
        msg: ' 123 ' , 
        msg2: ' <h1> Haha, I was a big H1, I am, I am proud </ h1> ' , 
        MyTitle: ' This is a key that title own definition of ' , 
        mytitle1: ' This is a key name is to write ' , 
        SZ: . 1 
      }, 
      methods: { // this attribute defines the methods currently available methods all instances Vue 
        Show: function () { 
          Alert ( ' the Hello ' ) 
        }, 
        the Add: function ( ) {
           the this .sz + =  . 1
        }
      }
    })
  </script>
</body>

</html>
Vue property is bound v-bing v-on event bindings

Guess you like
