表单中双向绑定指令的使用

......
 <script>
     /*
        input   textarea    checkbox--单个checkbox时绑定的值只能是true/false,多个checkbox时可以用v-model存储对应的内容，同时每个input框还应写对应的value值

    　　　radio时使用字符串存储对应的值

            multiple---多选

         使用checkbox时，true和false的值可以通过true-value和false-value重置

         修饰符：
         v-model.lazy ---会将及时的事件反应变成blur事件触发后才会改变的行为，节约事件触发成本，性能会更高
         v-model.number---感知到input框中变化时，在向对应的变量存值之前，会先将input框中的内容转为number类型，进行类型转换
         v-model.trim ----在向对应变量存值之前，会先将input框前后的空格去掉，不会去除掉字符串中间的空格
      */
    const app = Vue.createApp({
         template:`
           <div>
              {{content}}
              {{message}}
              {{single}}
              <input v-model='content'/>
              <button @click='handleBtnClick(2,$event)'>新增</button>
              <textarea v-model='content'/>
              a<input type='checkbox' v-model='message' value='a'/>
              b<input type='checkbox' v-model='message' value='b'/>
              c<input type='checkbox' v-model='message' value='c'/>
              11<input type='radio' v-model='single' value='11'/>
              22<input type='radio' v-model='single' value='22'/>
           </div>
           {{selectValue}}
           <select v-model="selectValue" multiple>
              <option v-for="item in options" :value='item.value'>{{item.text}}</option>
           </select>
           {{show}}
           <input type='checkbox' v-model='show' true-value='true~~' false-value='false~~~~~~~~'/>
         `,
         data(){
             return{
                 show:'true~~',
                 content:'test vue world',
                 message:[],
                 single:'',
                 selectValue: [],
                 /* value可以处理成想要的格式 */
                 options:[
                    {
                         text:'A',
                         value:{value:'A'}
                     } ,
                     {
                         text:'B',
                         value:{value:'B'}
                     }, {
                         text:'C',
                         value:{value:'C'}
                     }
                 ]
             }
         }
     })
    /* 注意：使用组件时需要先注册完组件再将该vue实例挂载到root元素上 */
     /* vm代表的就是vue应用的根组件
        vm获取根节点上数据，调用data时，data前加一个$,操作vm时，数据改变，视图也会自动发生改变
        如果该数据是根数据，也可以直接vm. 调用
        */
     const vm =app.mount('#root')
     //app.unmount()//让vue失效
 </script>
......