取值/給值

這是 jQuery 的取值/給值方式

<div id="js-example-app">
    <input type="text" id="mobile" value="" />
    <input type="button" id="run" value="確認" />
    <div id="display"></div>
</div>

$('input#run').click(function() {
    let mobile = $('input#mobile').val();
    $('input#mobile').val('0987987987');
});

這是 Vue.js 2 的取值與給值方式

<div id="js-example-app">
    <input type="text" v-model="mobile" value="" />
    <input type="button" v-on:click="runButtonOnClick" value="確認" />
    <div ref="display"> {{ mobile }} </div>
</div>

new Vue ({
    el: '#js-example-app', /** 綁定要作用的DOM範圍 **/
    data: { /** 各綁定變數的初始值 **/
        mobile: '' /** 與 v-model = ”mobile“ 與樣版 {{mobile}} 做綁定 **/
    },
    methods: { /** 用到的事件通通寫在這 **/
        runButtonOnClick: function() { /** v-on:click="runButtonOnClick" 綁定的事件實作 **/
            let display = this.$refs.display.innerText; /** 透過 this.$refs 來抓 ref="display" 的 DOM **/
            this.mobile = '0987987987';
        }
    }
});

備忘

1. 只要你在 DOM 中 v-model="xxx" 與樣版中 有給到的變數，記得一律要在data中給予初始值做宣告，不然會發生Error
2. 取用與寫入變數一律用this.xxx