關於這本書

這是一本教你怎麼透過舊有的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有變動之時,使用相同變數的 也會跟著變動

results matching ""

    No results matching ""