1. v-model双向绑定是由数据劫持以及发布订阅【观察者模式】实现的，这篇随笔暂时不讲解原理，作为个人小复习.
v-model可以由另一种方式实现：v-bind动态绑定value，配合v-on:input使用，利用event.target.value获取输入框的值，
当输入框的值改变时将其传给Vue实例data中的message.
2. 修饰符
【1】lazy：将v-model默认input事件触发，改为change事件触发，可在用户输入完毕后再改变值
【2】number：将输入的值转换为Number类型
【3】trim：将自动过滤用户输入的首尾空白字符
3. demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy.trim="message">
<p>{{message}}</p>
<!-- v-model的另外一种实现方式 -->
<!--<input type="text" @input="console" :value="message">-->
<!--<p>{{message}}</p>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: ''
}
},
methods: {
console(e) {
this.message = e.target.value;
}
}
})
</script>
</body>
</html>