第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

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

   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Document</title>
     <!--1.导入Vue的包-->
     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
   </head>

   <body>
     <div id="app">
         <h4>{{msg}}</h4>
         <!-- v-bind只能实现数据的单向绑定，从M 自动绑定到 V，无法实现数据的双向绑定 -->
         <!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->

         <!-- 使用 v-model 指令，可以实现 表单元素 和 Model 中数据的双向数据绑定 -->
         <!-- 注意：v-model 只能运用在 表单元素中 -->
         <!-- 常见的表单元素： input(radio,text,address,email......)  select  checkbox  textarea -->
         <input type="text" value="msg" style="width: 100%;" v-model="msg">
     </div>

     <script>
        // 创建 Vue 实例，得到 ViewModel
       var vm =  new Vue({
         el:'#app',
         data:{
           msg:'大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
         },
         methods:{}
       });
     </script>
   </body>
 </html>