vue.js基礎(chǔ)筆記（一）！＞琶痢０泶！

Vue.js是什么铸鹰？

Vue.js（讀音 /vju?/癌别，類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是蹋笼，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)展姐。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手剖毯，還便于與第三方庫(kù)或既有項(xiàng)目整合圾笨。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)逊谋，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)擂达。

Vue.js的目的

Vue.js的產(chǎn)生核心是為了解決如下三個(gè)問(wèn)題：
- 解決數(shù)據(jù)綁定的問(wèn)題；
- Vue.js框架生產(chǎn)的主要目的是為了開(kāi)發(fā)大興單頁(yè)面應(yīng)用（SPA：Single Page Application）Angular.js中對(duì)PC端支持的比較良好胶滋，但是對(duì)移動(dòng)端支持就一般板鬓。而Vue.js主要支持移動(dòng)端悲敷，也支持PC端。
- 它還支持組件化俭令。也就是可以將頁(yè)面封裝成若干個(gè)組件后德，采用積木式編程，這樣是頁(yè)面的復(fù)用度達(dá)到最高（支持組件化）抄腔。

Vue.js特性

MVVM模式
- M: model 業(yè)務(wù)模型瓢湃，用處：處理數(shù)據(jù)，提供數(shù)據(jù)
- V: view 用戶界面妓柜、用戶視圖
業(yè)務(wù)模型model中的數(shù)據(jù)發(fā)生改變的時(shí)候箱季，用戶視圖view也隨之變化。用戶視圖view改變的時(shí)候棍掐，業(yè)務(wù)模型model中的數(shù)據(jù)也可以發(fā)生改變藏雏。
- 組件化
- 指令系統(tǒng)
- Vue.js 2.0開(kāi)始支持虛擬DOM（Vue.js 1.0 是操作的真是DOM，而不是虛擬DOM）虛擬DOM可以提升頁(yè)面的刷新速度作煌。

一掘殴、起步

1、v-model(綁定數(shù)據(jù))
2粟誓、v-for（循環(huán)）
3奏寨、v-on（綁定事件）
4、data（數(shù)據(jù)）
5鹰服、methods（方法）
6病瞳、$index（索引）

二、概述

1悲酷、data（綁定 DOM 文本到數(shù)據(jù)）
2套菜、v-if（不滿足條件的話則不會(huì)出現(xiàn)在dom中）
3、v-show（不滿足條件设易，則樣式會(huì)設(shè)置成隱藏 display:none;）
4逗柴、組件:

<div id="app3">
    <app-nav></app-nav>                     <!--導(dǎo)航-->
    <app-view>
       <app-sidebar></app-sidebar>         <!--側(cè)邊欄-->
       <app-content></app-content>         <!--展示內(nèi)容-->
    </app-view>
</div>
<script type="text/javascript">
 var vm2=new Vue({
    el:"#app2",
    data:data2
});
</script>

三、Vue實(shí)例

1顿肺、構(gòu)造器：Vue.extend
2戏溺、數(shù)據(jù)屬性：vm.a
3、實(shí)例屬性和方法：
　1）vm.$el
　2）vm.$data
　3）vm.$watch
　4）實(shí)例生命周期：

 var vm4 = new Vue({
        el:".box",
        data:{
            a:"聲明周期"
        },
        beforeCreate(){
            console.log("組件創(chuàng)建之前")
        },
        created(){
            console.log("組件創(chuàng)建之后")
        },
        beforeMount(){
            console.log("組件掛載之前")
        },
        mounted(){
            console.log("組件掛載之后")
        },
        beforeUpdata(){
            console.log("組件更新之前")
        },
        updata(){
           console.log("組件更新完畢")
        },
        beforeDestroy(){
            console.log("組件銷毀之前")
        },
        destroyed(){
        console.log("組件銷毀之后")
        },
    })

四屠尊、數(shù)據(jù)綁定語(yǔ)法

1旷祸、文本插值：

    <span>Message:{{ msg }}</span>                       //每當(dāng)這個(gè)屬性變化時(shí)它也會(huì)更新
    <span v-once>This will never change:{{ msg }}</span> //一次性綁定

2、純 HTML：

    <div v-html="rawHtml"></div>                         
//大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本，為了輸出真正的 HTML ，
需使用 v-html 指令来候，你不能使用 v-html 來(lái)復(fù)合局部模板饭聚，
組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元

3嫌吠、屬性：

    <div v-bind:id="dynamicId"></div>

4止潘、綁定表達(dá)式：

    {{ number + 1 }}
    {{ ok ? ‘YES‘ : ‘NO‘ }}
    {{ message.split(‘‘).reverse().join(‘‘) }}
    一個(gè)限制是每個(gè)綁定只能包含單個(gè)表達(dá)式，因此下面的語(yǔ)句是無(wú)效的：
    {{ var a = 1 }}                                     //這是一個(gè)語(yǔ)句辫诅，不是一個(gè)表達(dá)式
    {{ if (ok) { return message } }}                    //流程控制也不可以凭戴，可改用三元表達(dá)式

5、過(guò)濾器：

    {{ message | capitalize }}                          //這個(gè)過(guò)濾器其實(shí)只是一個(gè) JavaScript 函數(shù)炕矮，返回大寫(xiě)化的值
    {{ message | filterA | filterB }}                   //過(guò)濾器可以串聯(lián)
    {{ message | filterA ‘a(chǎn)rg1‘ arg2 }}                 //過(guò)濾器也可以接受參數(shù)：第一個(gè)參數(shù)—為過(guò)濾器函數(shù)么夫，帶引號(hào)的參數(shù)—為字符串，不帶引號(hào)的參數(shù)—按表達(dá)式計(jì)算

6肤视、指令：職責(zé)是—當(dāng)其表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到 DOM 上

    <p v-if="greeting">Hello!</p>                       //v-if 指令將根據(jù)表達(dá)式 greeting 值的真假刪除/插入 <p> 元素

7档痪、參數(shù)：

    <a v-bind:href="url"></a>                           //v-bind 指令，用于響應(yīng)地更新 HTML 特性邢滑，用特性插值 href="{{url}}" 可獲得同樣的結(jié)果腐螟，但實(shí)際上它也是在內(nèi)部特性插值，轉(zhuǎn)為 v-bind 綁定
    <a v-on:click="doSomething"></a>                    //v-on 指令困后，用于監(jiān)聽(tīng) DOM 事件乐纸，參數(shù)是被監(jiān)聽(tīng)的事件的名字

8、修飾符：以半角句號(hào) . 開(kāi)始的特殊后綴摇予，表示指令應(yīng)當(dāng)以特殊方式綁定

<a v-bind:href.literal="/a/b/c"></a>

9汽绢、縮寫(xiě)：

   <a v-bind:href="url"></a>                            //完整語(yǔ)法
   <a :href="url"></a>                                  //縮寫(xiě)
   <a v-on:click="doSomething"></a>                     //完整語(yǔ)法
   <a @click="doSomething"></a>                         //縮寫(xiě)

五、class與style綁定（數(shù)據(jù)綁定在data上）

1侧戴、綁定class
　1）對(duì)象語(yǔ)法

  <div id="box" v-bind:class="{ ‘class-a‘: isA, ‘class-b‘: isB }"></div>
  <div id="box2" v-bind:class="classObject"></div>

2）數(shù)組語(yǔ)法

<div id="box3" v-bind:class="[classA,classB]"></div>
    <div id="box4" v-bind:class="[classA,isB?classB:‘‘]"></div>
    <div id="box5" v-bind:class="[classA,{classB:isB,classC:isC}]"></div>  <!--當(dāng)有多個(gè)條件 class 時(shí)宁昭，在 1.0.19+ 中，可以在數(shù)組語(yǔ)法中使用對(duì)象語(yǔ)法

2酗宋、綁定內(nèi)聯(lián)樣式style
　1）對(duì)象語(yǔ)法

    <div id="box6" v-bind:style="{color:activeColor,fontSize:fontSize+‘px‘}"></div>
    <div id="box7" v-bind:style="styleObject"></div>