Vue01 - two-way data binding

<! DOCTYPE HTML > 
< HTML > 
< head > 
    < title > two-way data binding Vue --- </ title > 
</ head > 
< body > 
    < div the above mentioned id = "App" > 
        < the INPUT of the type = "text" name = "" v-Model = "name" placeholder = "your name" > 
        < h1 > Hello! {name}} { </ h1 of > 
    </ div >

    = "text / JavaScript" the src = "https://unpkg.com/vue/dist/vue.min.js" > </ Script > 
    < Script type = "text / JavaScript" > 
        var mydata = { 
            name: ' mydata original value ' 
        } 

        // initialize instance created Vue 
        var App =  new new Vue ({
             // select DOM elements to be operated to mount Vue example 
            EL: ' #app ' ,
             // way binding achieved by v-model data 
            Data: mydata 
        }) 

        the console.log (the app.name)

        the app.name =  ' modified app values ' ; 
        the console.log ( ' print mydata values: ' + mydata.name) 

        mydata.name =  ' modified mydata value ' ; 
        the console.log ( ' value of the print app: ' + the app.name)
         / * 
        output: 
        app01.html: 26 is the original value mydata 
        app01.html: 29 print mydata value: the value of the modified app 
        app01.html: 32 print the value of the app: mydata modified value 
         * / 

    </ Script > 
</ body > 
</ HTML >