v-model的原理

洛2024-03-23 0:34

v-model 粗略解析

v-model是什么？

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

v-model原理是什么？

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

v-model实现代码

html 复制代码

<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>

javascript 复制代码

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