初識(shí)vue

1. 想讓Vue工作码党，就必須創(chuàng)建一個(gè)Vue實(shí)例，且要傳入一個(gè)配置對(duì)象

2. root容器里的代碼依然符合html規(guī)范，只不過(guò)混入了一些特殊的Vue語(yǔ)法

3. root容器里的代碼被稱(chēng)為【Vue模板】

4. 容器與實(shí)例一一對(duì)應(yīng)

5. 真實(shí)開(kāi)發(fā)中只有一個(gè)Vue實(shí)例,并且會(huì)配合著組件一起使用;

6. {{xxx}}中的xxx要寫(xiě)js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性;

7. 一旦data中的數(shù)據(jù)發(fā)生改變，那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新;

準(zhǔn)備容器：

<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

創(chuàng)建實(shí)例：

const x = new Vue({
    el:'#root',
    data:{
        name:'whatev'
}
})

• el用于指定當(dāng)前Vue實(shí)例為哪個(gè)容器服務(wù)倡鲸，值通常為css選擇器字符串

• data中用于存儲(chǔ)數(shù)據(jù),數(shù)據(jù)供el所指定的容器去使用。

vue模板語(yǔ)法

1. 插值語(yǔ)法

功能:用于解析標(biāo)簽體內(nèi)容黄娘。

寫(xiě)法:{{xxx}}峭状，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性逼争。

2. 指令語(yǔ)法

功能:用于解析標(biāo)簽（包括:標(biāo)簽屬性优床、標(biāo)簽體內(nèi)容、綁定事件.....) 誓焦。

舉例:v-bind:href="xxx”或簡(jiǎn)寫(xiě)為:href="xxx",xxx同樣要寫(xiě)js表達(dá)式羔巢，

且可以直接讀取到data中的所有屬性。

數(shù)據(jù)綁定

1.單向綁定(v-bind)

可簡(jiǎn)寫(xiě)為:

數(shù)據(jù)只能從data流向頁(yè)面。

2.雙向綁定(v-model)

數(shù)據(jù)不僅能從data流向頁(yè)面竿秆，還可以從頁(yè)面流向data启摄。

1. 雙向綁定一般都應(yīng)用在表單類(lèi)元素上(如:input、select等)

2. v-model:value可以簡(jiǎn)寫(xiě)為v-model幽钢，因?yàn)?code>v-model默認(rèn)收集的就是value值歉备。

   語(yǔ)法：v-model=""

data與el的兩種寫(xiě)法

el的2種寫(xiě)法

1. new Vue時(shí)配置el屬性。

   new Vue({
     el: '#app', // 相當(dāng)于.$mount('app')
     router,
     components: { App },
     template: '<App/>'
     }
   })
   

2. 先創(chuàng)建Vue實(shí)例匪燕，隨后再通過(guò)vm.$mount( ' #root')指定el的值蕾羊。

data的2種寫(xiě)法

1. 對(duì)象式

   data:{
       message: '此時(shí)data為對(duì)象'
     }
   

2. 函數(shù)式

   data(){
       return{
           message: '此時(shí)data為函數(shù)'
       }
     }
   

如何選擇

`data`必須使用函數(shù)式，否則會(huì)報(bào)錯(cuò)帽驯。

重要原則

由Vue管理的函數(shù)龟再，一定不要寫(xiě)箭頭函數(shù)，一旦寫(xiě)了箭頭函數(shù)尼变，this就不再是Vue實(shí)例了利凑。

數(shù)據(jù)代理

Object.defineProperty()

Object.defineProperty(){
    enumerable:true，//控制屬性是否可以枚舉,默認(rèn)值是false
    writable:true,//控制屬性是否可以被修改,默認(rèn)值是false
    configurable:true //控制屬性是否可以被刪除嫌术，默認(rèn)值是false
    get(){}
    set(value){}

事件處理

事件的基本使用

1. v-on指令

可簡(jiǎn)寫(xiě)為@

使用v-on:xxx或@xxx綁定事件,其中xxx是事件名

綁定事件的時(shí)候:@xxx="yyy" yyy可以寫(xiě)一些簡(jiǎn)單的語(yǔ)句

2. 事件的回調(diào)需要配置在methods對(duì)象中哀澈，最終會(huì)在vm上;
3. methods中配置的函數(shù),不要用箭頭函數(shù)! 否則this就不是vm了
4. methods中配置的函數(shù)，都是被Vue所管理的函數(shù)度气，this的指向是vm 或組件實(shí)例對(duì)象
5. @click="demo”和@click="demo($event)”效果一致割按，但后者可以傳參

BUT！

BUUUUUUUUUT!

許多事件處理邏輯會(huì)更為復(fù)雜磷籍，所以直接把 JavaScript 代碼寫(xiě)在 v-on 指令中是不可行的适荣。

事件處理方法

事件修飾符prevent,stop,once等

1.prevent

v-on:xxx.prevent=xxx ，阻止默認(rèn)事件（常用）

例如form表單中的summit提交按鈕院领，會(huì)自己提交和跳轉(zhuǎn)束凑，prevent直接不讓提交了，也不跳轉(zhuǎn)栅盲，只是執(zhí)行自己命名的函數(shù)

<form 
      v-on:submit.prevent="alert('who')"
      action="first_submit"
      method="get"
      accept-charset="utf-8"
      >
        first_submit
        get
        <input type="submit" name="">
    </form>

2.stop

v-on:xxx.stop=xxx，阻止事件冒泡（常用）

<div 
     v-on:click='alert("1")'
     style="width: 100%;height: 45px;background-color: black;"
     >
            <div 
                 v-on:click="alert('2')"
                 style='width: 80%;margin-left: 10%;background-color: white;'
                 >
                123
            </div>
</div>

此時(shí)點(diǎn)擊子級(jí)的div废恋，會(huì)先彈出2谈秫，再?gòu)棾?

<div 
     v-on:click.capture='alert("1")'
     style="width: 100%;height: 45px;background-color: black;"
     >
            <div 
                 v-on:click="alert('2')"
                 style='width: 80%;margin-left: 10%;background-color: white;'
                 >
                123
            </div>
</div>

點(diǎn)擊子級(jí)的div，此時(shí)的執(zhí)行結(jié)果是鱼鼓，先彈出1拟烫，再?gòu)棾?（capture的作用）

<div 
     v-on:click.capture.stop='alert("1")'
     style="width: 100%;height: 45px;background-color: black;"
     >
            <div 
                 v-on:click="alert('2')"
                 style='width: 80%;margin-left: 10%;background-color: white;'
                 >
                123
            </div>
</div>

點(diǎn)擊子級(jí)的div，此時(shí)的執(zhí)行結(jié)果是只會(huì)彈出1（capture決定的執(zhí)行順序）迄本，不會(huì)執(zhí)行alert(‘2’)

<div 
     v-on:click='alert("1")'
     style="width: 100%;height: 45px;background-color: black;"
     >
            <div 
                 v-on:click.stop="alert('2')"
                 style='width: 80%;margin-left: 10%;background-color: white;'
                 >
                123
            </div>
</div>

這樣就只會(huì)彈出2硕淑，不會(huì)彈出1 了
總之，stop就是你自己執(zhí)行你的就好了，別去打擾別人

3.once

v-on:xxx.once 置媳，事件只觸發(fā)一次（常用）

4.capture

v-on=xxx.capture 于樟，使用事件的捕獲模式;

5.self

v-on=xxx.self ，只有event.target是當(dāng)前操作的元素是才觸發(fā)事件;

6.passive

v-on=xxx.passive 拇囊，事件的默認(rèn)行為立即執(zhí)行迂曲，無(wú)需等待事件回調(diào)執(zhí)行完畢;

鍵盤(pán)事件

1. Vue中常用的按鍵別名:

• 回車(chē)=>enter
• 刪除=>delete(捕獲“刪除”和“退格”鍵)
• 退出=>esc
• 空格=>space
• 換行=>tab 特殊，必須配合keydown使用
• 上 => up
• 下=>down
• 左=>left
• 右=> right

<template>
<!--  todo頭部輸入框-->
  <div class="todo-header">
<!--    待辦事項(xiàng)輸入框-->
<!--敲擊回車(chē)后完成待辦事項(xiàng)的添加-->
    <input
      type="text"
      placeholder="往我這填要干的事寥袭，填完以后按回車(chē)"
      autofocus="autofocus"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

2. Vue未提供別名的按鍵路捧，可以使用按鍵原始的key值去綁定

   注意要轉(zhuǎn)為kebab-case（短橫線命名)

3. 系統(tǒng)修飾鍵（用法特殊）: ctrl、alt传黄、 shift杰扫、 meta

• 配合keyup使用:按下修飾鍵的同時(shí)，再按下其他鍵膘掰，隨后釋放其他鍵章姓，事件才被觸發(fā)。

• 配合keydown使用:正常觸發(fā)事件炭序。

4. 也可以使用keyCode去指定具體的按鍵(不推薦)
5. Vue.config.keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名

計(jì)算屬性與監(jiān)聽(tīng)

計(jì)算屬性computed

• 要顯示的數(shù)據(jù)不存在啤覆，要通過(guò)計(jì)算得來(lái)。
• 在computed 對(duì)象中定義計(jì)算屬性惭聂。
• 在頁(yè)面中使用{{方法名}}來(lái)顯示計(jì)算的結(jié)果窗声。

1. 定義

   要用的屬性不存在，要通過(guò)已有屬性計(jì)算得來(lái)辜纲。

2. 原理

   底層借助了0bjcet.defineproperty方法提供的getter和setter（見(jiàn)下方get和set）

3. get函數(shù)什么時(shí)候執(zhí)行?
   (1). 初次讀取時(shí)會(huì)執(zhí)行一次笨觅。
   (2). 當(dāng)依賴(lài)的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用。

4. 優(yōu)勢(shì)

   與methods實(shí)現(xiàn)相比耕腾，內(nèi)部有緩存機(jī)制（復(fù)用）见剩，效率更高，調(diào)試方便

5. 備注

   1. 計(jì)算屬性最終會(huì)出現(xiàn)在vm上扫俺，直接讀取使用即可苍苞。
   2. 如果計(jì)算屬性要被修改，那必須寫(xiě)set函數(shù)去響應(yīng)修改狼纬，且set中要引起計(jì)算時(shí)依賴(lài)的數(shù)據(jù)發(fā)生

get()

• 當(dāng)有人讀取fullName時(shí)羹呵，get()就會(huì)被調(diào)用，且返回值就作為fullName的值
• get()調(diào)用的時(shí)期
  1. 初次讀取fullName時(shí)疗琉。
  2. 所依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)冈欢。

set(value)

• set方法的目的是設(shè)置值 所以必要有一個(gè)參數(shù)用來(lái)傳值
• 當(dāng)fullName被修改時(shí)，set(value)被調(diào)用

監(jiān)視屬性-watch

• 通過(guò)vm對(duì)象的$watch()或 watch配置來(lái)監(jiān)視指定的屬性
• 當(dāng)屬性變化時(shí)盈简，回調(diào)函數(shù)自動(dòng)調(diào)用凑耻，在函數(shù)內(nèi)部進(jìn)行計(jì)算

1. 當(dāng)被監(jiān)視的屬性變化時(shí),回調(diào)函數(shù)自動(dòng)調(diào)用,進(jìn)行相關(guān)操作

2. 監(jiān)視的屬性必須存在,才能進(jìn)行監(jiān)視!!

3. 監(jiān)視的兩種寫(xiě)法:

   (1).new Vue時(shí)傳入watch配置

   (2).通過(guò)vm.$watch監(jiān)視

• immediate:true 初始時(shí)讓handler()調(diào)用一下
• handler(newValue,oldValue) 監(jiān)視的value變化的時(shí)候

深度監(jiān)視

• vue中的watch默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變(一層）太示。
• 配置deep:true可以監(jiān)測(cè)對(duì)象內(nèi)部值改變（多層）。
• 備注:
  1. Vue自身可以監(jiān)測(cè)對(duì)象內(nèi)部值的改變香浩，但Vue提供的watch默認(rèn)不可以!
  2. 使用watch時(shí)根據(jù)數(shù)據(jù)的具體結(jié)構(gòu),決定是否采用深度監(jiān)視类缤。

簡(jiǎn)寫(xiě)

• 監(jiān)視里只需要handler()函數(shù)時(shí)可以簡(jiǎn)寫(xiě)

• 語(yǔ)法：監(jiān)視對(duì)象(newValue,oldValue) { 語(yǔ)句 }

-$watch形式：對(duì)象.\$watch('監(jiān)視對(duì)象',function(newValue,oldValue){ 語(yǔ)句 })

computed和watch區(qū)別

• computed能干的，watch都能干弃衍。

• watch能干的呀非，computed不一定能干。例如: watch可以進(jìn)行異步操作镜盯。

• 兩個(gè)重要的小原則;

  1. 所被Vue管理的函數(shù)岸裙，最好寫(xiě)成普通函數(shù)，這樣this的指向才是vm或組件實(shí)例對(duì)象

  2. 所有不被Vue所管理的函數(shù)（定時(shí)器的回調(diào)函數(shù)速缆、ajax的回調(diào)函數(shù)等)降允，最好寫(xiě)成箭頭函數(shù),這樣this的指向才是vm或組件實(shí)例對(duì)象。

     (總之是想辦法讓this指向vm或組件實(shí)例對(duì)象)

綁定樣式

• 綁定class樣式-字符串寫(xiě)法-<div class ="basic" :class="mood">{{name}}</div>

  適用于-》樣式的類(lèi)名不確定 需要?jiǎng)討B(tài)指定

• 綁定class樣式-數(shù)組寫(xiě)法-<div class ="basic" :class="classArr">{{name}}</div>

  適用于-》樣式的個(gè)數(shù)不確定 名字也不確定

• 綁定class樣式-對(duì)象寫(xiě)法-<div class ="basic" :class="classObj">{{name}}</div>

  適用于-》樣式的個(gè)數(shù)確定 名字也確定 但要動(dòng)態(tài)決定用不用

• 綁定style樣式-對(duì)象寫(xiě)法（不常用）-<div class ="basic" :class="styleObj">{{name}}</div>

  適用于style屬性為動(dòng)態(tài)值的情況

• 綁定style樣式-數(shù)組寫(xiě)法（不常用）-<div class ="basic" :class="styleArr">{{name}}</div>

  適用于style中設(shè)置多個(gè)樣式對(duì)象的情況

條件渲染

v-show

• 寫(xiě)法：v-show="表達(dá)式"

• 適用于：切換頻率較高的場(chǎng)景

• 判斷某個(gè)元素是否顯示或隱藏-<a class="example" v-show="list.show == 1">

  • 若" "內(nèi)值為true則顯示 若為false則隱藏

• 三目運(yùn)算符判斷-<a class="example" v-show="!item.ai == null"></a>

• 特點(diǎn)：不展示的DOM元素未被移除而僅被隱藏掉

v-if

• 寫(xiě)法：

  • v-if="表達(dá)式"
  • v-else-if="表達(dá)式"
  • v-else="表達(dá)式"
  • v-if可以和v-else-if艺糜、v-else一起使用 但要求結(jié)構(gòu)不能被打斷

• 適用于：切換頻率較低的場(chǎng)景

• 特點(diǎn)：不展示的DOM元素被直接移除

template標(biāo)簽

html中的template標(biāo)簽中的內(nèi)容在頁(yè)面中不會(huì)顯示剧董。但是在后臺(tái)查看頁(yè)面DOM結(jié)構(gòu)存在template標(biāo)簽。這是因?yàn)?code>template標(biāo)簽天生不可見(jiàn)破停，它設(shè)置了display:none;屬性翅楼。

vue中template的作用是模板占位符，可幫助我們包裹元素真慢，但在循環(huán)過(guò)程當(dāng)中毅臊，template不會(huì)被渲染到頁(yè)面上

• 三種寫(xiě)法

  • 字符串模板寫(xiě)法-直接寫(xiě)在vue構(gòu)造器（最好不用嗷）
  • 直接寫(xiě)在template標(biāo)簽中
  • 寫(xiě)在script標(biāo)簽中（官方推薦）-<script type="x-template"></script>

• template只能配合v-if系列、v-for使用 不能配合v-show

列表渲染

基本列表

用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一組元素黑界，用key作為每個(gè)元素唯一的身份證

v-for

• 我們可以用 v-for 指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表管嬉。v-for 指令需要使用 item in items 形式的特殊語(yǔ)法，其中 items 是源數(shù)據(jù)數(shù)組朗鸠，而 item 則是被迭代的數(shù)組元素的別名蚯撩。

• 在 v-for 塊中，我們可以訪問(wèn)所有父作用域的 property烛占。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)胎挎，即當(dāng)前項(xiàng)的索引。

• 語(yǔ)法 v-for="(item,index) in xxx" :key="yyy"

  也可以用 of 替代 in 作為分隔符

• 可遍歷:數(shù)組忆家、對(duì)象犹菇、字符串（用的很少)、指定次數(shù)（用的很少)

key-遍歷時(shí)的身份證

為了給 Vue 一個(gè)提示弦赖，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素浦辨，你需要為每項(xiàng)提供一個(gè)唯一 key attribute

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內(nèi)容 -->
</div>

建議盡可能在使用 v-for 時(shí)提供 key attribute嗷

如果你不給也行嗷,vue就會(huì)在遍歷的時(shí)候自動(dòng)把index給key蹬竖，然后遍歷就容易出問(wèn)題（氣不氣沼沈？

列表遍歷

• 遍歷數(shù)組

  <div v-for="(item, index) in items" :key="index"></div>

• 遍歷對(duì)象

  <div v-for="(val, key) in object" :key="key"></div>

• 遍歷字符串（用得少）

  <div v-for="(char,index) in str" :key="index></div>

• 遍歷指定次數(shù)（用得少）

  <div v-for="(number,index) of n" :key="index></div>

  此處n應(yīng)為指定的次數(shù)

key的原理

虛擬DOM中key的作用

key是虛擬DOM對(duì)象的標(biāo)識(shí)

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)新數(shù)據(jù)生成新的虛擬DOM,隨后Vue進(jìn)行新虛擬DOM與舊虛擬DOM的差異比較

人話：key就是班主任手上的花名冊(cè)的標(biāo)號(hào) 學(xué)生發(fā)生變化的時(shí)候班主任要擬一份新的花名冊(cè) 然后把新舊花名冊(cè)比一比讓學(xué)生按標(biāo)號(hào)入座

對(duì)比規(guī)則

1. 舊虛擬DOM中找到了與新虛擬DOM相同的key時(shí)
   新舊花名冊(cè)上標(biāo)號(hào)一樣時(shí)
   • 若虛擬DOM中內(nèi)容沒(méi)變币厕，直接使用之前的真實(shí)DOM
     對(duì)應(yīng)的學(xué)生名字也一樣 那就是原來(lái)那個(gè)學(xué)生坐原來(lái)那個(gè)位置
   • 若虛擬DOM中內(nèi)容變了列另，則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM
     哦豁 對(duì)應(yīng)的學(xué)生名字不一樣了 那學(xué)生就按新花名冊(cè)的標(biāo)號(hào)來(lái)坐
2. 舊虛擬DOM中未找到與新虛擬DOM相同的key時(shí)
   耶旦装？出現(xiàn)了新的標(biāo)號(hào)
   • 創(chuàng)建新的真實(shí)DOM页衙，隨后渲染到到頁(yè)面。
     那給你加個(gè)對(duì)應(yīng)的座位

用index作為key可能會(huì)引發(fā)的問(wèn)題

如果直接按成績(jī)排

• 若對(duì)數(shù)據(jù)進(jìn)行逆序添加阴绢、逆序刪除等破壞順序操作
  天降文曲星 取得第一名/第一名轉(zhuǎn)班了

  會(huì)產(chǎn)生沒(méi)有必要的真實(shí)DOM更新 --》導(dǎo)致界面效果沒(méi)問(wèn)題店乐，但效率低

  完了 全班人座位都要跟著排名變 一換換一下午 那不要上課了

• 如果結(jié)構(gòu)中還包含輸入類(lèi)的DOM
  要是這個(gè)班要進(jìn)名額外的新人
  會(huì)產(chǎn)生錯(cuò)誤DOM更新 --》 導(dǎo)致界面有問(wèn)題

  好嘛 一換座位換錯(cuò)了 有人要坐地上了/有座位空出來(lái)了

開(kāi)發(fā)中如何選擇key?

那我們要怎么排花名冊(cè)捏？

• 最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key呻袭，比如id眨八、手機(jī)號(hào)、身份證號(hào)左电、學(xué)號(hào)等唯一值廉侧。

  最好按身份證排 身份證絕對(duì)沒(méi)有一樣的

• 如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作篓足，僅用于渲染列表用于展示段誊，使用index作為key是沒(méi)有問(wèn)題的。

  要是新生直接墊底/前幾名不轉(zhuǎn)班 班主任只是展示一下班級(jí)風(fēng)采 那按成績(jī)排也沒(méi)事啊

列表過(guò)濾

模糊查找

字符串內(nèi)是否包含所找內(nèi)容 - indexOf()

• 可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置

  若找到栈拖，返回位置

  若沒(méi)找到连舍，返回-1

  （stringObject 中的字符位置是從 0 開(kāi)始的。）

• 語(yǔ)法 stringObject.indexOf(searchvalue,fromindex)

  searchvalue： 必需的規(guī)定需檢索的字符串值辱魁。

  fromindex：可選的整數(shù)參數(shù)烟瞧。規(guī)定在字符串中開(kāi)始檢索的位置。它的合法取值是 0到 stringObject.length - 1染簇。如省略該參數(shù)参滴，則將從字符串的首字符開(kāi)始檢索。

• indexOf('') 檢索空字符串 返回0

js的filter()方法

`filter()`方法使用指定的函數(shù)測(cè)試所有元素锻弓，并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組砾赔。

• 語(yǔ)法

  arr.filter(callback, thisArg])

  callback 用來(lái)測(cè)試數(shù)組的每個(gè)元素的函數(shù)。調(diào)用時(shí)使用參數(shù)(element, index, array)

    返回`true`表示保留該元素（通過(guò)測(cè)試）青灼，`false`則不保留暴心。
  

  thisArg 可選。執(zhí)行 callback 時(shí)的用于 this的值杂拨。

• 用法說(shuō)明

  filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù)专普，并利用所有使得 callback返回 true 或 等價(jià)于true 的值 的元素創(chuàng)建一個(gè)新數(shù)組。

  callback 只會(huì)在已經(jīng)賦值的索引上被調(diào)用弹沽，對(duì)于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用檀夹。

  那些沒(méi)有通過(guò) callback 測(cè)試的元素會(huì)被跳過(guò)筋粗，不會(huì)被包含在新數(shù)組中。

  callback 被調(diào)用時(shí)傳入三個(gè)參數(shù)：

  • 元素的值
  • 元素的索引
  • 被遍歷的數(shù)組

  如果為 filter 提供一個(gè) thisArg 參數(shù)炸渡，則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值娜亿。否則，callback 的this 值在非嚴(yán)格模式下將是全局對(duì)象蚌堵，嚴(yán)格模式下為 undefined

  filter 不會(huì)改變?cè)瓟?shù)組

  filter遍歷的元素范圍在第一次調(diào)用callback之前就已經(jīng)確定了买决。在調(diào)用 filter 之后被添加到數(shù)組中的元素不會(huì)被filter 遍歷到。

  如果已經(jīng)存在的元素被改變了吼畏，則他們傳入 callback的值是 filter 遍歷到它們那一刻的值督赤。

  被刪除或從來(lái)未被賦值的元素不會(huì)被遍歷到。

列表排序

js sort() 方法

用于對(duì)數(shù)組的元素進(jìn)行排序

排序順序可以是字母或數(shù)字宫仗，并按升序或降序排序够挂。

默認(rèn)排序順序?yàn)榘醋帜干颉?/p>

會(huì)改變?cè)紨?shù)組

• 語(yǔ)法

  array.sort(sortfunction)

    `sortfunction`  可選。規(guī)定排序順序藕夫。必須是函數(shù)孽糖。
  
    返回Array 對(duì)數(shù)組的引用。數(shù)組**在原數(shù)組上進(jìn)行排序**毅贮，***不生成副本办悟。***
  

示例

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //升序排列前減后
points.sort(function(a,b){return b-a}); //降序排列后減前

vue檢測(cè)數(shù)據(jù)改變的原理

對(duì)象

數(shù)組

Vue.set(object,item ,value)

vm.$set()

• vue會(huì)監(jiān)視data中所有層次的數(shù)據(jù)。

• 如何監(jiān)測(cè)對(duì)象中的數(shù)據(jù)?

  通過(guò)setter實(shí)現(xiàn)監(jiān)視,且要在new Vue時(shí)就傳入要監(jiān)測(cè)的數(shù)據(jù)滩褥。

  • 對(duì)象中后追加的屬性病蛉，Vue默認(rèn)不做響應(yīng)式處理

  • 如需給后添加的屬性做響應(yīng)式，要用如下API:

    Vue.set(target.propertyName/index,value)或

    vm.$set(target.propertyName/index,value)

• 如何監(jiān)測(cè)數(shù)組中的數(shù)據(jù)?

  通過(guò)包裹數(shù)組更新元素的方法實(shí)現(xiàn)

  本質(zhì)就是做了兩件事:

  1. 調(diào)用原生對(duì)應(yīng)的方法對(duì)數(shù)組進(jìn)行更新瑰煎。
  2. 重新解析模板铺然，進(jìn)而更新頁(yè)面。

• 在Vue修改數(shù)組中的某個(gè)元素一定要用如下方法:

  1. 使用API: push()酒甸、pop()魄健、shift()、unshift()插勤、splice()沽瘦、sort().reverse()
  2. Vue.set()或vm.$set()

• 特別注意

  Vue.set()和 vm.set()不能給vm或 vm的根數(shù)據(jù)對(duì)象添加屬性

收集表單數(shù)據(jù)

• 若:<input type="text"/>，則v-model收集的是value值农尖，用戶輸入的就是value值
• 若:<input type="radio"/>析恋，則v-model收集的是value值，且要給標(biāo)簽配置value值
• 若: <input type="checkbox"/>
  1. 沒(méi)有配置input的value屬性盛卡，那么收集的就是checked(勾選or未勾選助隧，是布爾值)
  2. 配置input的value屬性
     • v-model的初始值是非數(shù)組，那么收集的就是checked(勾選or未勾選滑沧，是布爾值)
     • v-model的初始值是數(shù)組并村，那么收集的的就是value組成的數(shù)組
• v-model的三個(gè)修飾符
  • lazy:失去焦點(diǎn)再收集數(shù)據(jù)
  • number:輸入字符串轉(zhuǎn)為有效的數(shù)字
  • trim:輸入首尾空格過(guò)濾

過(guò)濾器filters

本質(zhì)就是個(gè)可傳參函數(shù)

多個(gè)過(guò)濾器可串聯(lián)

• 定義

  對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡(jiǎn)單邏輯的處理）

• 語(yǔ)法

  1. 注冊(cè)過(guò)濾器:Vue.filter(name,callback）（全局注冊(cè)）或new Vue{filters:{}}（局部注冊(cè)）
  2. 使用過(guò)濾器:{{ xxx│過(guò)濾器名}} 或 v-bind:屬性=“xxx│過(guò)濾器名"

• 注意

  過(guò)濾器也可以接收額外參數(shù)漏健、多個(gè)過(guò)濾器也可以串聯(lián)

  并沒(méi)有改變?cè)镜臄?shù)據(jù)，是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

內(nèi)置指令與自定義指令

常用內(nèi)置指令

已學(xué)指令:

`v-bind` :單向綁定解析表達(dá)式,可簡(jiǎn)寫(xiě)為`:xxx`

`v-model` :雙向數(shù)據(jù)綁定

`v-for`:遍歷數(shù)組/對(duì)象/字符串

`v-on`:綁定事件監(jiān)聽(tīng),可簡(jiǎn)寫(xiě)為`@`

`v-if`:條件渲染（動(dòng)態(tài)控制節(jié)點(diǎn)是否存存在)

`v-else`:條件渲染（動(dòng)態(tài)控制節(jié)點(diǎn)是否存存在)

`v-show`:條件渲染(動(dòng)態(tài)控制節(jié)點(diǎn)是否展示)

v-text

• 作用

  向其所在的節(jié)點(diǎn)中渲染文本內(nèi)容橘霎。

• 與插值語(yǔ)法的區(qū)別

  v-text會(huì)替換掉節(jié)點(diǎn)中的內(nèi)容，{{xx}}則不會(huì)殖属。

v-html

• 作用

  向指定節(jié)點(diǎn)中渲染包含html結(jié)構(gòu)的內(nèi)容

• 與插值語(yǔ)法的區(qū)別

  1. v-html會(huì)替換掉節(jié)點(diǎn)中所有的內(nèi)容,{{xx}}則不會(huì)姐叁。
  2. v-html可以識(shí)別html結(jié)構(gòu)。
  3. v-html有安全性問(wèn)題!!!!
     • 在網(wǎng)站上動(dòng)態(tài)渲染任意HTAL是非常危險(xiǎn)的,容易導(dǎo)致XSS攻擊
     • 一定要在可信的內(nèi)容上使用v-html洗显，永不要用在用戶提交的內(nèi)容上!

v-cloak

• 沒(méi)有值但是很實(shí)用啊這玩意兒

  網(wǎng)速不好打開(kāi)網(wǎng)站的時(shí)候只顯示藍(lán)色超鏈接文本和輸入框的初始界面這種事經(jīng)歷過(guò)吧外潜？

  那為什么看不到設(shè)置顯示圖片和其他內(nèi)容的代碼捏？想必就是用了v-cloak吧挠唆！

  我瞎猜的我也沒(méi)去求證過(guò)

• 本質(zhì)是一個(gè)特殊屬性

• Vue實(shí)例創(chuàng)建完畢并接管容器后处窥，會(huì)刪掉v-cloak屬性

• 使用css配合v-cloak可以解決網(wǎng)速慢時(shí)頁(yè)面展示出{{xxx}}的問(wèn)題

  常見(jiàn)用法：

   <style>
        [v-cloak] {
          display: none;
        }
  

v-once

• v-once所在節(jié)點(diǎn)在初次動(dòng)態(tài)渲染后,就視為靜態(tài)內(nèi)容了。
• 以后數(shù)據(jù)的改變不會(huì)引起v-once所在結(jié)構(gòu)的更新玄组，可以用于優(yōu)化性能滔驾。

v-pre

• 跳過(guò)其所在節(jié)點(diǎn)的編譯過(guò)程。
• 可利用它跳過(guò):沒(méi)有使用指令語(yǔ)法俄讹、沒(méi)有使用插值語(yǔ)法的節(jié)點(diǎn)哆致，會(huì)加快編譯。

自定義指令

• 可以自定義指令以實(shí)現(xiàn)特定需求
• 自定義指令放在Vue的directives里

Vue模板語(yǔ)法有2大類(lèi)

1. 插值語(yǔ)法

   • 功能

     用于解析標(biāo)簽體內(nèi)容患膛。

   • 寫(xiě)法:

     {{xxx}}摊阀，xxx是js表達(dá)式,且可以直接讀取到data中的所有屬性。

2. 指令語(yǔ)法

   • 功能

     用于解析標(biāo)簽(包括:標(biāo)簽屬性踪蹬、標(biāo)簽體內(nèi)容胞此、綁定事件.....）.

   • 舉例

     v-bind:href="xxx”或簡(jiǎn)寫(xiě)為:href="xxx"，xxx同樣要寫(xiě)js表達(dá)式跃捣，
     且可以直接讀取到data中的所有屬性漱牵。

定義語(yǔ)法

• 局部指令:

  new Vue{{
      directives:{指令名,配置對(duì)象}
  }}
  或
  new Vue{{
      directives(){}
  }}
  

• 全局指令:

  Vue.directive(指令名,配置對(duì)象)
  或
  Vue.directive(指令名,回調(diào)函數(shù))
  

配置對(duì)象中常用的3個(gè)回調(diào)

1. bind

   指令與元素成功綁定時(shí)調(diào)用。

2. inserted

   指令所在元素被插入頁(yè)面時(shí)調(diào)用

3. update

   指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用枝缔。

備注:

1. 指令定義時(shí)不加v-布疙，但使用時(shí)要加v-
2. 指令名如果是多個(gè)單詞，要使用kebab-case命名方式,不要用camelCase命名.

Vue生命周期

• mounted

  Vue完成模板的解析并把初始的真實(shí)DOM元素放入頁(yè)面后(掛載完畢）調(diào)用mounted

• 生命周期

  • 又名生命周期回調(diào)函數(shù)愿卸、生命周期函數(shù)灵临、生命周期鉤子。
  • Vue在關(guān)鍵時(shí)刻幫我們調(diào)用的一些特殊名稱(chēng)的函數(shù)趴荸。
  • 生命周期函數(shù)的名字不可更改儒溉，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫(xiě)的。
  • 生命周期函數(shù)中的this指向是vm或組件實(shí)例對(duì)象

  捋要?jiǎng)?chuàng)建=>調(diào)用beforeCreate函數(shù)发钝。

  創(chuàng)建完畢=>調(diào)用created函數(shù)顿涣。
  將要掛載=>調(diào)用beforeMount函數(shù)波闹。
  掛載完畢=>調(diào)用mounted函數(shù)。=>【重要的鉤子】
  將要更新=>調(diào)用beforeUpdate函數(shù)涛碑。
  更新完畢=>調(diào)用updated函數(shù)精堕。
  將要銷(xiāo)毀=>調(diào)用beforeDestroy函數(shù)。=>【重要的鉤子】
  銷(xiāo)毀完畢==>調(diào)用destroyed函數(shù)蒲障。

• 常用的生命周期鉤子:

  1. mounted

     發(fā)送ajax請(qǐng)求歹篓、啟動(dòng)定時(shí)器、綁定自定義事件揉阎、訂閱消息等【初始化操作】

  2. beforeDestroy

     清除定時(shí)器庄撮、解綁自定義事件、取消訂閱消息等【收尾工作】毙籽。

• 關(guān)于銷(xiāo)毀Vue實(shí)例

  1. 銷(xiāo)毀后借助Vue開(kāi)發(fā)者工具看不到任何信息洞斯。
  2. 銷(xiāo)毀后自定義事件會(huì)失效,但原生DOM事件依然有效。
  3. 一般不會(huì)在beforeDestroy操作數(shù)據(jù)坑赡，因?yàn)榧幢悴僮鲾?shù)據(jù)烙如，也不會(huì)再觸發(fā)更新流程了。