抓DOM

雖然在 Vue.js 2 底下，一切只看變數不看 DOM ，但我一開始 Vue.js 2 就是不太熟，有沒有什麼 jQuery 的做法呢？

這是 jQuery 綁定 id="run" 按鈕之後，將 id="mobile" 的 input 欄位的值，給 id="display" 的div之後，將 id="display" 的 div 中文字透過Alert輸出的方式

<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();
    $('div#display').text(mobile);
    alert($('div#display').text());
});

這是 Vue.js 2 的做法，流程與 jQuery 一模一樣

<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 **/
            alert('display');
        }
    }
});