1. Vue.js（讀音 /vju?/, 類(lèi)似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。
2. Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。
3. Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。
4. Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
   ————————VueJS————————

個(gè)人總結(jié)：關(guān)注數(shù)據(jù)，數(shù)據(jù)驅(qū)動(dòng)頁(yè)面

基本套路

1.使用<script>引用Vue.js文件。

2.body或div#appName，設(shè)置Vue的控制區(qū)域，與angular中ng-app一樣。

<element id='appName'> 
    comtent
</element>

%注意：Vue2.0中最好不要綁到body元素上。

3.在body內(nèi)添加script，或獨(dú)立的js文件。常用固定套路如下：

<script>
     var vm = new Vue({
           el: '#appName',        # (1)
           data: {                # (2)
                  name: 'Allen',
                  age: 18,
                  artical: {
                       title: 'Welcome',
                       content: 'Hello world!'
                   },
                   jobs: ['engineer', 'assistant', 'teacher']
            }，
            methods: {            # (3)
                    functionName: function(){
                           alert(this.artical.title)
                    }
            },
            ready: function() {   # (4)
                   return this.functionName()
            }，
            computed: {            # (5)
                    something: function(){
                             return otherthing
            }
      })
#(1)Vue所控制的區(qū)域
#(2)數(shù)據(jù)，可在appName范圍內(nèi)通過(guò){{}}語(yǔ)法引用, data可以是任意類(lèi)型
#(3)可選，Vue方法都放置在methods內(nèi)，形式如上
#(4)可選，在頁(yè)面加載完成時(shí)，調(diào)用ready函數(shù)。
#(5)可選，動(dòng)態(tài)計(jì)算，其函數(shù)必須有返回值?？稍谛枰牡胤街苯右煤瘮?shù)名{{something}}
</script>

> %注意：Vue版本1和2在appName的位置有所不同，Vue2不再支持綁定到body以及html

4.在HTML中使用{{ varName }} 方式引用data內(nèi)的數(shù)據(jù)，如：

        <div>
            {{name}}
            {{article.title}}
            {{ jobs[0] }}
        </div>

5.指令v-model，進(jìn)行數(shù)據(jù)綁定，在控制區(qū)域內(nèi)使用，如：

<!-- 在input輸入框內(nèi)輸入數(shù)據(jù)，會(huì)在p內(nèi)實(shí)時(shí)顯示 -->
        <div class="vModel">
            <input v-model="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>
        </div>

%注意：?jiǎn)渭兊倪@種方式，在Vue2版本下并未實(shí)現(xiàn)，Vue1版本支持。message必須在data內(nèi)才有效。

6.指令v-for，對(duì)可迭代對(duì)象進(jìn)行遍歷，array object string number如：

        <div class="vFor">
            <span v-for='item in jobs'>{{item}}</span>
            <span v-for='(key, value) in artical'>{{key}}:{{value}}</span>
        </div>

> %注意：指令也是擴(kuò)展了HTML屬性，與Angular是一樣的

7. 事件綁定使用v-on: eventHandler='doSomething', 如：

<!--  如果a有初始值，那么在點(diǎn)擊時(shí)，a就會(huì)改變當(dāng)前值 -->
        <button v-on:click='a+=1'>{{a}}</button>

    doSomething也可以是一個(gè)函數(shù)的調(diào)用，通常用法也是這樣的
> %注意：如果想直接改變style樣式的屬性值，需要將style放置在appName的范圍之內(nèi)才能起作用

8.數(shù)據(jù)遍歷的幾種形式：

______一定要注意參數(shù)的順序:

<!-- 遍歷數(shù)組內(nèi)的項(xiàng) -->
<div v-for='item in array'>{{item}}</div>

<!-- 遍歷數(shù)組內(nèi)的項(xiàng), 索引值index是第二個(gè)參數(shù)，Vue2.0 -->          
<div v-for='(item, index) in array'>{{index}} : {{item}}</div>

<!-- 遍歷對(duì)象內(nèi)的鍵和值 -->            
<div v-for='(key, value) in object'>{{key}} : {{value}}</div>
            
<!-- 遍歷對(duì)象內(nèi)的值 -->
<div v-for='value in object'>{{value}}</div>
            
<!-- 遍歷對(duì)象內(nèi)的值和鍵，已及第三個(gè)參數(shù)作為索引值 -->
<div v-for='(value, key, index) in object'>{{key}} : {{value}}:{{index}}</div>

<!-- 整數(shù)迭代     -->     
<div v-for='n in 10'>{{ n = n * 2 }}</div>

9.computed可用于制作過(guò)濾器：

#可用于過(guò)濾掉身高小于等于10的人，在相應(yīng)出直接使用biggerThan即可。        
        computed: {
            biggerThan: function() {
                var men = function(height){
                    return height > 10
                }

                return this.array.filter(men)
            }
        }
        

10.Vue.js沒(méi)有ajax方法，可用如下方法替代：

    # 原生JS的XHR
    # jQuery庫(kù)的ajax方法
    # fetch方法（以后可能會(huì)替代AJAX）
    # 及其他

總結(jié)：

使用上述介紹，使用localStorage來(lái)保存數(shù)據(jù)，可以做一個(gè)TODOlist的單頁(yè)應(yīng)用了。還蠻有意思的。