Vue - v-model原理

作者: ElricTang | 来源:发表于2019-10-25 10:26 被阅读0次

vue学习-基础，事件和数据交互
03 Vue 通信中的 v-model
v-model原理
Vue之v-model
vue中的v-model原理，与组件自定义v-model
vue双向数据绑定原理
前端高频面试题-VUE部分
Vue3的v-model以及传值
vue表单
Vue - v-model原理

v-model相当于一个自定义指令，通过事件监听和属性绑定实现双向数据绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src='./node_modules/vue/dist/vue.js'></script>
        <script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
    </head>
    <body>
        <div id='app'>
            <input :value="msg" @input="msg = $event.target.value" />
            <span>{{msg}}</span>
            <button @click="change">改变msg</button>
        </div>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'',
                },
                methods:{
                    change(){
                        this.msg = 'hello'
                    }
                }
            })
        </script>
    </body>
</html>

1. 使用:value绑定msg到input上
1. 使用@input监听输入事件，当输入时把输入的内容又赋值给msg

总结：

data -> view : 通过v-bind实现数据绑定
view -> data : 通过oninput监听输入并修改data

扩展：在子组件中实现v-model

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src='./node_modules/vue/dist/vue.js'></script>
        <script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
    </head>
    <body>
        <div id='app'>
            <myModel :value="msg" @input="change"></myModel>
            <span>{{msg}}</span>
            <button @click="msg='default'">修改data</button>
        </div>
        <script>
            let myModel = {
                template:`<div>
                    <input 
                    :value="value" 
                    @input="$emit('input',$event.target.value)">
                    </input>
                    </div>`,
                props:['value']
            }
            var vm=new Vue({
                el:'#app',
                components:{
                    mymodel:myModel
                },
                data:{
                    msg:'',
                },
                methods:{
                    change(val){
                        this.msg = val;
                    }
                }
            })
        </script>
    </body>
</html>