Vue：4.表单双绑、组件

4.表单双绑、组件

什么是双向数据绑定

数据双向绑定: 即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

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

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

• 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
• 它会根据控件类型自动选取正确的方法来更新元素。
• v-model它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

单行文本

<div id="app">
    <!--目标：输入框的值和{}取值动态绑定，实时相同（使用v-model绑定message）-->
    输入的文本：<input type="text" v-model="message">{{message}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: " "
        }
    });
</script>

多行文本

<div id="vue">
    多行文本：<textarea v-model="message"></textarea>{{message}}
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: "Hello Textarea"
        }
    });
</script>

单复选框

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

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue2',
        data: {
            checked: false
        }
    });
</script>

多复选框

<div id="vue3">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue3',
        data: {
            checkedNames: []
        }
    });
</script>

单选按钮

<div id="vue4">
    单选按钮：
    <input type="radio" name="sex" value="男" v-model="checkTest">男
    <input type="radio" name="sex" value="女" v-model="checkTest">女
    <span>选中的值: {{ checkTest }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue4',
        data: {
            checkTest: ''
        }
    });
</script>

下拉框

<div id="vue5">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option> <!--预留项-->
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值: {{ selected }}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue5',
        data: {
            selected: ''
        }
    });
</script>

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

什么是组件

• 组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
• 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
  

第一个 Vue 组件

注意：在实际开发中，并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了理解什么是组件。

使用 Vue.component() 方法注册组件,格式如下：

<div id="app">
    <my-test></my-test> <!--3.调用自定义的组件-->
</div>

<script>
    // 1.先注册组件
    //Vue.component()注册一个vue组件,名叫test
    Vue.component("my-test", {
        template: "<li>Hello</li>"
    });

    // 2.再实例化 Vue
    var vm = new Vue({
        el: "#app"
    });
</script>

说明：

• Vue.component(“组件名”， {对象})； 注册组件
• my-test：自定义组件的名字
• template：组件的模板

使用 props 属性传递参数

上面那样用组件没有任何意义，如果要传递参数到组件里，此时就要使用 props 属性了！
注意：默认规则下 props 属性里的值不能为大写；

<div id="vue">
    <!-- v-bind不仅可以绑定标签属性，还可以绑定组件值，通过父子组件propes通信-->
    <test v-for="item in items" v-bind:liu="item"></test>
</div>

<script>
    Vue.component("test", {
        props: ["liu"],
        template: "<li>{{liu}}</li>"
    });

    var vm = new Vue({
        el: "#vue",
        data: {
            items:["JavaEE", "JavaSE", "JavaME"]
        }
    });
</script>

页面显示结果：

• JavaEE
• JavaSE
• JavaME

说明：

• v-for="item in items"：遍历 Vue实例中定义的名为 items 的数组，并创建同等数量的组件。
• v-bind:liu="item"：将遍历的 item 项，绑定到组件中 props 定义的名为 liu 属性上；= 号左边的 liu 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值。

赏

失败是成功之母

支付宝

微信