Usage interpolation expression and Vue tag attributes

<!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>
    <script src="./lib/vue.js"></script>
    <style>
        [v-cloak] { 
            the display : none ; 
            } 
    </ style > 
</ head > 

< body > 
    < div ID = "App" > 
        ! <- using the v-cloak to solve {{msg}} scintillation interpolation expression problem (preventing flicker before taking out the data MSG) -> 

        <-! similarity between v-cloak and v-text effect, can express msg, but there are differences -> 
        < P v-cloak > MSG} {} { </ P > <-! SUMMARY v-cloak tab will all show, even though the additional data before and after the interpolation expression are also shown -> 
        < H4 V-text = "MSG" > </h4> ! <- v-only display text msg, among other things if you add tags will be overwritten msg; v-text does not flicker -> 
        ! <- v-HTML data is the data msg2 is converted to the html page -> 
        < div V-html = "Msg2" > </ div > 
        <-! V instruction is provided for the bind-binding properties, that is, if the value of a given title is v-bind value is not required, if it is a variable, 
        you need to bind the v-bind to display variable; you can also add a variable expression -> 
        < the INPUT of the type = "the button" value = "button" v-bind : title = "MyTitle + '123'" > 
        < INPUT type = "button" value = "button" : title = "MyTitle + '123 ' " > <! - shorthand v-bind is:-> 
        <-! V-ON time to provide binding mechanism (such as clicking a button to trigger popups, mouse over the button to trigger popups) -> 
        < the INPUT of the type = "the Button" value = "button" v-ON : the Click = "Show" > 
        < the INPUT of the type = "the button" value = "button" @mouseover = "Show" > <-! shorthand v-on is @ -> 
    </ div > 
    < Script > 
        var vm = new new Vue ({ 
            EL: " #app " , 
            Data:{
                msg:"123" , 
                Msg2: " <h1> I am a big label, I am, I am proud </ h1> " , 
                MyTitle: " This is a custom title " 
            }, 
            methods: { // This attribute defines the methods Vue all available methods 
                Show: function () { 
                    Alert ( " Hello " ) 
                } 
            } 
        }) 
    </ Script > 
</ body > 
</ HTML >
Usage interpolation expression and Vue tag attributes

Guess you like
