<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
<br>
<input type="text" v-model="msg">
<!-- v-model原理->
需求-> 使用vue学过的知识实现v-model的效果(假设没有v-model)
1. 学过哪些知识->复习
2. v-model效果
2.1 运行文件->value的值就是msg的初始值
2.2 当进行UI操作(输入新值)->value变化->msg=最新的value
> 补充: js有事件->当input值变化时 触发
@input事件
@onchange事件 -->
<!-- v-model是vue提供的简化写法->语法糖 -->
{{msg}}
<br>
<input type="text" :value="msg" @input="msg=$event.target.value">
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
msg: "abc"
},
methods: {
fn(e) {
// console.log(e);
// msg=最新的value
// 给msg赋值->修改msg->获取msg->js代码获取data中msg->this.msg
// 最新的value-> 获取input标签->获取当前事件->获取事件对象e
console.log(this);
this.msg = e.target.value;
}
}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/divtab/p/10940240.html