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