Vue表单双向绑定
什么是双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
在表单中使用双向数据绑定
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
-
单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
// v-model：绑定资源
<input type="text" v-model="message">
// 取出数据
<p>{{message}}</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
message: "hello Vue"
}
})
</script>
</body>
</html>
在输入框输入数据，下面的标签内容也会跟着发生变化：
-
多行文本
<div id="app"> 多行文本：<textarea v-model="message"></textarea> 多行文本是：{{message}} </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 实现与Model双向绑定，动态更新视图 var vm = new Vue({ el:"#app", data: { message : "" } }); </script>
-
单复选框
<div id="app"> 单复选框： <input type="checkbox" id="checkbox" v-model="checked"> {{checked}} </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 实现与Model双向绑定，动态更新视图 var vm = new Vue({ el:"#app", data: { checked : false } }); </script>
<div id="app"> 下拉框： <select v-model="selected"> <!--<option disabled value="">请选择</option>--> <option>A</option> <option>B</option> <option>C</option> </select> <span>选中的值: {{ selected }}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 实现与Model双向绑定，动态更新视图 var vm = new Vue({ el:"#app", data: { selected : false } }); </script>
注意：如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
第一个Vue 组件
注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件,格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<zhangzhixi></zhangzhixi>
</div>
<script type="text/javascript">
// 定义Vue组件
Vue.component(
// 组件名称
"zhangzhixi", {
// 组件模板
template: "<li>Hello World!</li>"
})
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
说明：
- Vue.component()：注册组件
- zhangzhixi：自定义组件的名字
- template：组件的模板
使用 props 属性传递参数：
像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用 props 属性了！
注意：默认规则下 props 属性里的值不能为大写；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<!--组件：传递给组件中的值props-->
<zhangzhixi v-for="array in arrays" v-bind:zhixi="array">
</zhangzhixi>
</div>
<script type="text/javascript">
// 定义Vue组件
Vue.component(
// 组件名称
"zhangzhixi",
{
// "prop"表示组件属性名称
props: ['zhixi'],
// 组件的模板
template: '<li>{{zhixi}}</li>'
})
var app = new Vue({
el: '#app',
data: {
arrays: [
"抽烟",
"喝酒",
"烫头"
]
}
})
</script>
</body>
</html>
说明：
v-for="array in arrays"：遍历Vue实例中定义的名为 arrays的数组，并创建同等数量的组件v-bind:zhixi="array"：将遍历的array项绑定到组件中props定义的名为zhixi属性上；
