v-model雙向綁定

v-model主要是用於input，select，textarea，component的數據的雙向綁定

v-model修飾符：.lazy- 取代input監聽change事件 .number- 輸入字符串轉爲數字 .trim- 輸入首尾空格過濾

v-model語法糖

<input type="text" v-model="msg">

//等同於

<input  v-bind:value="msg" v-on:input="msg=$even.target.value">

v-model的原理Object.definePropertype()

 <div>
        輸入:<input type="text" id="put"> 同步展現：
        <span id="show"></span>
    </div>
    <script>
        var obj = {};
        Object.defineProperty(obj, 'put', {
            get: function() {
                return obj
            },
            set: function(newVal) {
                document.getElementById("put").value = newVal
                document.getElementById("show").innerHTML = newVal
            }
        })
        document.getElementById("put").addEventListener("keyup", function(event) {
            obj.put = event.target.value
        })
    </script>