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>