Vue：表单双绑、组件

vue一大精髓就是双向绑定

vue.js是一个mvvm框架，即数据的双向绑定，即当数据发生变化时的时候，视图也就发生变化，当视图发生变化时，数据也会同步变化

双向绑定是对于UI控件来说的，非UI控件不会涉及到数据的双向绑定

以input标签举例

<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
    <br>
    男：<input type="radio" name="sex"   value="男" v-model="xingbie">
    女：<input type="radio" name="sex"   value="女" v-model="xingbie">
    <br>
    选中了谁：{{xingbie}}

</div>

<!--    到入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({

        el:"#app", //绑定id
        data:{
            message:"hello vue!",  //内容
            xingbie:""
        },
        methods:{

        }
    });

</script>

结果

其中 输入框中的value与message进行了绑定

而单选框中的value与xingbie进行了绑定

双向绑定用到的指令是v-model=""

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

注意，在绑定单选框与复选框时，当你绑定单个，那绑定的为是否选中的布尔值

当你绑定多个复选框时，你绑定的是一个数组，

当你绑定的是多个单选框时，绑定的是value值

单选框：

    男：<input type="radio" name="sex"   value="男" v-model="xingbie">
    女：<input type="radio" name="sex"   value="女" v-model="xingbie">
    <br>
    选中了谁：{{xingbie}}

复选框：

    <input type="checkbox" name="work" value="医生" v-model="work1"> 医生
    <input type="checkbox" name="work" value="护士" v-model="work1"> 护士
    <input type="checkbox" name="work" value="司机"   v-model="work1"> 司机
    <input type="checkbox" name="work" value="狗蛋"   v-model="work1"> 狗蛋
    <br>
    选中了谁：{{work1}}

vue

    var vm = new Vue({

        el:"#app", //绑定id
        data:{
            message:"hello vue!",  //内容
            xingbie:"",
            work1:[],
        },
        methods:{

        }
    });

结果