11_05_第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】
原创
©著作权归作者所有：来自51CTO博客作者狂野小白兔的原创作品，请联系作者获取转载授权，否则将追究法律责任
Vue：表单双绑，组件
1. 什么是双向数据绑定
- 全局性数据流使用单项（vuex），方便跟踪；局部性数据流使用双向(UI控件)，简单易操作。
2. 在表单中使用双向数据绑定
v-model:它能轻松实现表单输入和应用状态之间的双向绑定
<!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">
<p>{{message}}</p>
<input type="text" v-model="message">
</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 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
-
<!--<option disabled value="">请选择</option>-->
