1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </Script > 10 </ head > . 11 12 is < body > 13 is < div ID = "App" > 14 < H4 > {{MSG}} </ H4 > 15 <-! V data can only achieve the bind-way tie set, automatically bound from M to V, can not realize two-way data binding -> 16 <-! <INPUT type = "text" the bind-V: value = "MSG" style = "width: 100%"> -> . 17 18 is <! - using the v-model instructions, data bidirectionally Model and data form element binding -> 19 <!- Note: v-model can only be used in form elements -> 20 <-!Common form elements: INPUT (Radio, text, address, ...... In Email) SELECT TextArea CheckBox -> 21 is < INPUT type = "text" value = "MSG" style = "width: 100%;" V -model = "MSG" > 22 is </ div > 23 is 24 25 < Script > 26 is // Create Vue instance, to give the ViewModel 27 var VM = new new Vue ({ 28 EL: ' #app ' , 29 Data: { 30 MSG:'They are good students, love to knock the code, love of learning and thinking, is simply perfect, no flaws! ' 31 is }, 32 Methods: {} 33 is }); 34 is </ Script > 35 </ body > 36 </ HTML >