11_05_第六阶段：大前端进阶||07-Vue详解||P7：Vue双向绑定【观看狂神随笔】

本文详细介绍了Vue.js中的双向数据绑定原理和在表单中的应用，包括单行文本、多行文本、单复选框和下拉框的实现方式。通过v-model指令，可以轻松实现UI控件与应用状态之间的双向绑定，简化了表单数据的管理和更新。同时，文章提醒在使用下拉框时，为了确保在iOS设备上的用户体验，建议提供一个默认禁用选项。

Vue：表单双绑，组件

1. 什么是双向数据绑定

在这里插入图片描述

全局性数据流使用单项（vuex），方便跟踪；局部性数据流使用双向(UI控件)，简单易操作。

2. 在表单中使用双向数据绑定

在这里插入图片描述
v-model:它能轻松实现表单输入和应用状态之间的双向绑定

单行文本：<input>

<!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>

多行文本：<textarea>

<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>

下拉框：<select>

<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 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。