v-model 粗略解析

v-model 粗略解析

v-model是什么？

• 双向数据绑定，可以从data流向页面，也可以从页面流向data
• 通常用于表单收集，v-model 默认绑定 value 值
• 书写形式： v-model:value="" 或 v-model

v-model原理是什么？

• v-model本质是一个语法糖。
• 靠v-bind绑定数据
• oninput数据传递

v-model实现代码

<div id="app">
        < <!-- 用e的话在事件名后不需要加上()括号 -->
        我是e方法 <input type="text" :value="val" @input="change">
        <br>
        <!-- 用event的话需要在事件名后加上()括号 -->
        我是event方法 <input type="text" :value="val" @input="change-event()" placeholder="我是event">
        <h1>{{val}}</h1>
</div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { val: "我是实现原理" }
        },
        methods:{
        	change(e){
        		console.log(e);
        		this.val=e.target.value;
        	},
        	change-event(){
        		console.log(event);
        		this.val=event.target.value;
        	},
        }  
    })

e和event的区别

• 当定义函数()时，接收e，当为形参
• e自身是某个事件带有的方法；event是window带有的方法
• e = window.event 兼容

• 失联

最后编辑时间 2024，03，13；11：10