v-model 语法糖 理解

前言：面试的时候，面试官说希望我们能不局限于知道怎么用，而是去了解为什么要用，怎么去实现，所以想来研究一下这个语法糖.

https://www.yuque.com/littlelane/vue/iqevua

一、首先是v-model作用

• v-model主要作用是可以实现在表单 、 及 标签元素上创建双向数据绑定。

二、初步改造v-model

    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script>
        //全局组件
        Vue.component('bindData1', {
            template: `
                <div>
                    <p>this is bindData1 component!</p>
                    <button @click="handleChange">change input value</button>
                    <input type="text" :value="inputValue" @change="handleInputChange" />
                    <p>input 中的值为：{{inputValue}}</p>
                </div>
            `,
            data(){
                return {
                    inputValue: 'hello'
                }
            },
            methods:{
                handleChange() {
                    this.inputValue = 'I have changed';
                },

                //改变input的值
                handleInputChange(e) {
                    this.inputValue = e.target.value;
                }
            }

        });
        new Vue({
            el: '#app',
            template: `
                    <div>
                        <bindData1/>
                    </div>
                `
        })
    </script>

与v-model不同的是，在input中我用v-bind绑定了inputValue的值…，绑定了change事件。存在不足的是，需要回车p中的inputValue才会发生变化.

理解v-model

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

• v-model 在不同的 HTML 标签上使用会监控不同的属性和抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；

• checkbox 和 radio 使用 checked 属性和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

自定义组件 v-model

<div id="app"></div>
<base-checkbox v-model="lovingVal"></base-checkbox>

<script>
    //这里的 lovingVue 的值将会传入这个名为 checked 的 prop。
    // 同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。
    Vue.component('base-checkbox',{
        template:`
            <input type="checkbox" v-bind:checked = "checked" v-on:change = "$emit('change',$event.target.checked)"/>
        `,
        model:{
            prop:'checked',
            event:'change'
        },
        props:{
            checked:Boolean
        }
    })
    new Vue({
        el:'#app',
        template:`
            <div>
                <base-checkbox/>
            </div>     `
    </script>

需要注意的是仍然需要在props中声明checked

v-model修饰符

.lazy

双向数据绑定的特性是：当 input 标签显示的值实时变化时，也会实时的触发 input 标签上的 input 事件，在每次 input 事件触发后将输入框的值与数据实时进行同步。 在一些特殊的需求和场景下，你可能希望数据同步不是实时同步而是在触发 change 事件的时候进行数据同步,可以添加 lazy 修饰符进行处理，使用的示例如下：

<input v-model.lazy="msg" >

.number

在表单中处理输入验证必须是数字时，可以在 v-model 上加上 number 修饰符，将用户输入的值自动转换成数字类型。

.trim

对于用户在表单标签中输入的字符串，去除首尾的空白字符，使用trim 修饰符。

<input v-model.trim="msg">