4.Vue双向绑定

1.什么是双向数据绑定

　　Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

　　值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2.v-model

　　 v-model  指令在表单  <input> 、 <textarea>  及  <select>  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

　　注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

　　语法： v-model="vue中需要展示的内容"

单行文本：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层模块-->
 <div id="vue">
     单行文本：<input type="text" v-model="message" value="hello" />&nbsp;&nbsp;单行文本是：{{message}}
 </div>

 <!--导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '#vue',
         data: {
             message: "第一个Vue项目"
         },

     });
 </script>
 </body>
 </html>

多行文本：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层模块-->
 <div id="vue">
     多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是：{{message}}

 </div>

 <!--导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '#vue',
         data: {
             message: "第一个Vue项目"
         },

     });
 </script>
 </body>
 </html>

单选按钮：

　　注：v-model中绑定的属性的值必须与标签的value属性相同。

　　v-model中的sex：”男“  === input中的value=”男“相同

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层模块-->
 <div id="vue">
     单选按钮：
     <input type="radio" id="one" value="One" v-model="picked">
     <label for="one">One</label>
     <input type="radio" id="two" value="Two" v-model="picked">
     <label for="two">Two</label>
     <span>选中的值: {{ picked }}</span>
 </div>

 <!--导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '#vue',
         data: {
             picked: "One"

         },

     });
 </script>
 </body>
 </html>

补充知识：

　　html的label标签的for属性绑定对应于input标签的id属性，用于聚焦的功能

　　当点击label标签时，就相当于点击了input标签让内容发生改变。

     <input type="radio" id="one" value="One" v-model="picked">
     <label for="one">One</label>
     <input type="radio" id="two" value="Two" v-model="picked">
     <label for="two">Two</label>　

复选框：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层模块-->
 <div id="vue">

     复选框：
     <input type="checkbox" id="checkbox" v-model="checked">
     &nbsp;&nbsp;
     <label for="checkbox">{{ checked }}</label>
 </div>

 <!--导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '#vue',
         data: {
             // message: "第一个Vue项目"
             checked: true
         },

     });
 </script>
 </body>
 </html>

下拉框：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层模块-->
 <div id="vue">
     下拉框：
     <select v-model="selected">
         <option disabled value="">请选择</option>
         <option>A</option>
         <option>B</option>
         <option>C</option>
     </select>
     <span>选中的值: {{ selected }}</span>
 </div>

 <!--导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '#vue',
         data: {
             selected: ''
         },

     });
 </script>
 </body>
 </html>

　　注意：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。