2016年，總結篇續如何從 JQ 轉到 VueJS 開發（一）

VueJs 入門級學習。基於Vue 1.x 的版本，因為 2.X 不適合新手作為入門來學習。放棄JQ 可能是你在 2016 年聽到的最多的一句話，並不是說JQ 不好。只是現在有了更好更效率的框架了。 ...

接著 2016 年的總結，我們來看看 2016年國內最火且沒有之一的前端MVVM 框架 VueJs

雖然到寫文章的這個時間點，VueJs已經發佈了 2.1.x 了，但是對於很多 Vuejs 的初學者來講，我建議還是從 VueJs 1.x 的最後一個版本開始看。

畢竟如果你掌握了 1.X 那麼你在學習 2.X 的時候，可能只需要一天時間，就能掌握，真的是一天教會你 VueJs 感覺不要太爽噢~

不要問我為什麼，還是那句話，你試過就知道。

這次就不過多的廢話了，畢竟深V 說 “你能不能深入點，再深入點...”

-------------------------------------------------------------假裝有分割線------------------------------------------------------------------

入門以及如何使用 vueJS（對，沒錯。就是入門以及如何使用）

那麼我們來思考一個問題，學習一款框架。什麼樣的程度才算是入門，以及學習一門框架的方式方法。（每個人可能都不一樣，但是我們還是要總結一下）

從一個陌生的框架。比如之前的 JQ 的學習進程應該是這樣的。

在沒有構建的基礎上，先是引入這個庫，然後開始照著文檔開始寫最簡單的 DEMO =》嘗試著把文檔中介紹的大部分的API 都自己寫一遍 =》實際的項目中去應用發現坑 =》解決遇到的坑 =》最後在提升原理層面

這裡我推薦兩個做JQ 源碼解析不錯的博客

分別是艾倫 Aaron 、 ChokCoco

在通過大量時間去去做 JQ 的源碼解析，一方面能夠提升你在 JS 語言的理解，加深對 JS 語法、閉包、繼承等多方面的提升，另外一方面也加深了你對 JQ 的理解。所以好處多多

後續，也會出JQ 源碼分析的文章（希望站在巨人的肩膀上可以看的更遠）

-------------------------------------------------------------假裝有分割線------------------------------------------------------------------

這裡講完了我們熟悉的 JQ 這個庫的學習曲線。那麼我們開始思考一下 Vue 這個框架，應該如何下手呢？

總結一個模式吧，任何一款框架的學習，一定是一邊手寫 DEMO 一邊看文檔 API =》加入構建 =》項目應用 =》發現坑 =》查找 issues 解決坑

當然這些環節中發現坑和解決坑的過程一定是艱難的。渡過了這個時期，剩下的就是手到擒來。基本框架以內的問題，均能夠去解決。

那麼下麵，我就介紹一些入門級 API （指令或者方法）

1.1 關於 vueJS 系統自帶常規指令的用法

1 ： v-show

    <div v-show="true">
        this is true 
    </div>

原理：類似我們在使用 JQ 時候的時候控制 DOM 顯示隱藏的 display：none / block
因為在還沒有看 Vue 的源碼的前提下，我們可以通過改變屬性值來查看 View 層的變化
這裡就是動態的給對應的 Dom 添加了一個 style 的 display 的樣式

2 ： v-if (v-else)

    <div v-if="true">
        this is A ( true ) 
    </div>

    <div v-else>
        this is B ( fasle) 
    </div>

原理：類似我們在使用 JQ 時候的時候動態的添加/刪除 DOM

eg： var Dom = $(" <div title='香蕉'>香蕉</div >")  body.append(Dom)  /  Dom .remove()

熟悉 JQ 的同學應該很容易就可以查看到其中的原理了。是不是很簡單

3 ： v-for

    <div>
        <ul>
            <li v-for='item in items'> 
                {{item.name}} 
                <span>{{item.age}}</span>
            </li>
        </ul>
    </div>

    new Vue({
        el: 'body',
        data: {
            items: [
                {name: 'zhangsan', age: 21},
                {name: 'lisi', age: 22},
                {name: 'wangwu', age: 23},
                {name: 'zhaoliu', age: 24}
            ]
        }
    })

註一： *** v-for 的 render 效果如下***

    <div>
        <ul>
            <li> zhangsan <span>21</span> </li>
            <li> lisi <span>22</span> </li>
            <li> wangwu <span>23</span> </li>
            <li> zhaoliu <span>24</span> </li>
        </ul>
    </div>

這個 v-for 如果沒有接觸過上篇文章中提到過的 TP 這類MVC 框架開發的同學，可能稍微難以理解一點。
那這裡我們還是拿 JQ 的例子來說吧
在 JQ 開發中，我們常常會用字元串拼接的方式來解決 ajax 返回數據的顯示。如果ajax返回一個數組的話，
我們就會在返回的時候用 for 迴圈來生成我們最後想要是字元串然後再 append 到對應的節點位置。
但是在 vue 中就不存在字元串拼接，那樣看著辣眼睛的代碼啦是不是很清爽的感覺啊

4 ： v-bind

    <div>
        <span v-bind='isA'></span>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA'
        }
    })

註一： ***v-bind 的 render 效果如下***

    <div>
        <span>this is dataA</span>
    </div>

註二： v-bind 同樣也可以直接用鬍子標簽替換

    <div>
        <span> {{isA}} </span>
    </div>

這裡我們同樣用JQ 的例子來解釋為什麼會是這樣子的

在JQ 中如果，我們需要動態的去展示一個屬性值的話，我們首先需要獲取節點 $ =》然後再生成拼接之後的字元串 =》然後再 append 到對應的節點位置 =》屬性值發生改變 =》我們又需要改變一下我們拼接是字元串 =》再 append 到對應的節點位置

但是在 Vue 中就會簡單很多。如上圖。當 data 對象中屬性值發生改變，vue 實例化過程會給其屬性均添加 getter setter 方法去監聽其值的改變，最後反應在視圖上。根本不需要我們手動去改任何東西

5 ： v-bind: class

    <div v-bind:class="{'active': isActive}">
        <span> {{isA}} </span>
    </div>

    // 這裡是css文件
    .active{
        color: red;
    }

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true
        }
    })

註一： ***v-bind:class 的 render 效果如下***

    <div class="active">
        <span> this is dataA </span>
    </div>

註二： v-bind:class 同樣也可以直接用 : class 簡寫

    <div :class="{'active': isActive}">
        <span> {{isA}} </span>
    </div>

這裡是動態的給節點添加 / 刪除 Class 樣式。在JQ 中我們通常是先獲取節點 $ =》再 $.addClass('xxx'); => 刪除的話 $.removeClass('xxx')
啊，長時間的寫 Vue 再讓我去寫JQ 好難受啊啊啊啊啊

6 ： v-bind:style

>  註一： ***v-bind:style 的用法同 v-class  類似***

    <div v-bind:style="{ color: isColorA, fontSize: fontSize + 'px'}">
        <span> this is dataA </span>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20
        }
    })

註二： ***v-bind:style 的 render 效果如下***

    <div style="color: blue; font-size: 20px;">
        <span> this is dataA </span>
    </div>

註三： v-bind:style 可以簡寫如下

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
    </div>

這裡是動態的給節點添加 / 刪除 Class 或 style 樣式。在JQ 中我們通常是先獲取節點 $ =》添加樣式的話 $.css('height': "20px") => 刪除樣式 $.removeAttr("style")
難受。

7 ： v-bind : href

>  註一： ***v-bind : href 的用法同 v-class  類似***

    <div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
        <a v-bind:href="hrefUrl"> this is a link </a>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20,
            hrefUrl: 'http://h5.runjiaoyu.com.cn'
        }
    })

 註二： ***v-bind : href 的 render 效果如下***

    <div style="color: blue; font-size: 20px;">
        <span> this is dataA </span>
        <a href='http://h5.runjiaoyu.com.cn'></a>
    </div>

註三： ***v-bind : href 可以 簡寫如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
    </div>

註四： ***v-bind : href  同樣也可以可以 簡寫如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
        <a href={{hrefUrl}}> this is a link </a>
    </div>

同樣當我們同JQ 去改變某個 a 標簽的 href 的值的時候，首先獲取a標簽節點 $ =》改變它的值 $.attr('href', 'www.xxx.com');
繼續難受。

8 ： v-click

    <div v-bind:style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
        <a href={{hrefUrl}}> this is a link </a>
        <button v-click='toDo($index)'> click Me </button>
        <button v-click='nextToDo($event)'> click Me </button>
    </div>

    new Vue({
        el: 'body',
        data: {
            isA: 'this is dataA',
            isActive: true,
            isColorA: blue,
            fontSize: 20,
            hrefUrl: 'http://h5.runjiaoyu.com.cn'
        },
        methods: {
            toDo: function() {
                // to do something
            },
            nextToDo: function(e) {
                console.log(e.target)
                // to do something else 
            }
        }
    })

註一： ***v-click   可以 簡寫如下 ***

    <div :style="{{ color: isColorA, fontSize: fontSize + 'px'}}">
        <span> this is dataA </span>
        <button @click='toDo'> click Me </button>
        <button @click='nextToDo'> click Me </button>       
    </div>

在 JQ 中我們去給節點綁定方法，首先肯定是獲取節點 $ =》然後 $.addEventsListener('click', func) / $.on('click', func)。這類閉包寫多了，代碼異常難看，講真。
不信你看看上面的 Vue 的代碼。

1.1.2 關於 vueJS 、 avalon 、 Knockout 等 MVVM 標簽渲染原理解讀

    var greeting = 'my name is $(name),age $(age)';
    var result = greeting.render({name:'XiaoMing',age:11});
    console.log(result); // my name is XiaoMing,age 11

我們給出一個 render 的方法實現以上需求
代碼如下：

String.prototype.render = function (obj) {
    var str = this, reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\$\\('+ v +'\\)', 'g');
        str = str.replace(reg, obj[v]);
    });

    return str;
}

var greeting = 'my name is $(name),age $(age)';
var result = greeting.render({name:'XiaoMing',age:11});
console.log(result); // my name is XiaoMing,age 11

最後再提一點體積。 JQ 現在是 100K 左右， Vue 最小 30K 左右。
Vue 看起來就像是一個靈活的小猴子呀。

此章節到此結束文檔已歸置 github

可能這個時候又有同學要問了，卧槽，不是說好了要介紹 Vue 的入門麽？

為什麼你的入門裡面，基本上都是講的用法什麼的，對於我這個一無所知的我來說很難理解啊。

記住Vue 作者尤雨溪曾經說過的一句話，如果學習Vue 通過看文檔都不能學會，那就是 Vue 的錯。

2016年，總結篇 續 如何從 JQ 轉到 VueJS 開發（一）

入門以及如何使用 vueJS（對，沒錯。就是 入門以及如何使用）