關於這本書

這是一本教你怎麼透過舊有的jQuery框架思維，轉去寫 Vue.js 2

我們最常用jQuery做什麼？

1. 抓Dom
2. 給值/取值
3. AJAX

Vue.js 2 VS jQuery 有那些差別

在說差別之前，我們要先了解到設計模式裡面，有一個叫做“觀察者模式 Observer Pattern“

意思就是說，但我的資源有任何變動之後，我才要怎樣怎樣的一種設計模式

好比以下jQuery的範例

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

$('input#mobile').bind('change', function() {
    $('div#display').text($(this).val());
});

以上範例中，我們針對 id="mobile" 這個input欄位進行監聽，當裡面的數值有任何變動之時，就將變數的值寫到 id="display" 的div元件去

jQuery是針對 "Dom本身" 去做監聽為主，Vue.js 2才不管你Dom是什麼，Vue.js 2 底下，一切皆是變數，只要你變數有變，Vue.js 2 就會跟著反應

好比我們可以參照 Vue.js 2 的改寫範例

<div id="js-example-app">
    <input type="text" v-model="mobile" value="" />
    <div>{{ mobile }}</div>
</div>

new Vue ({
    el: '#js-example-app", /** 綁定要作用的DOM範圍 **/
    data: { /** 各綁定變數的初始值 **/
        mobile: '' /** 與 v-model = ”mobile“ 與樣版 {{mobile}} 做綁定 **/
    }
});

透過以上範例，只要綁定 v-model="mobile" 的input value有變動之時，使用相同變數的 也會跟著變動