艹人网站在线观看,日韩三级久久

初識vue

想讓Vue工作，就必須創(chuàng)建一個Vue實例，且要傳入一個配置對象
root容器里的代碼依然符合html規(guī)范，只不過混入了一些特殊的Vue語法
root容器里的代碼被稱為【Vue模板】
容器與實例一一對應
真實開發(fā)中只有一個Vue實例,并且會配合著組件一起使用;
{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性;
一旦data中的數(shù)據(jù)發(fā)生改變，那么頁面中用到該數(shù)據(jù)的地方也會自動更新;

準備容器：

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

創(chuàng)建實例：

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

el用于指定當前Vue實例為哪個容器服務(wù)，值通常為css選擇器字符串
data中用于存儲數(shù)據(jù),數(shù)據(jù)供el所指定的容器去使用。

vue模板語法

1. 插值語法

功能:用于解析標簽體內(nèi)容。

寫法:{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。

2. 指令語法

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

舉例:v-bind:href="xxx”或簡寫為:href="xxx",xxx同樣要寫js表達式，

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

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

1.單向綁定(v-bind)

可簡寫為:

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

2.雙向綁定(v-model)

數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data。

雙向綁定一般都應用在表單類元素上(如:input、select等)
v-model:value可以簡寫為v-model，因為v-model默認收集的就是value值。

語法：v-model=""

data與el的兩種寫法

el的2種寫法

new Vue時配置el屬性。

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

先創(chuàng)建Vue實例，隨后再通過vm.$mount( ' #root')指定el的值。

data的2種寫法

對象式

data:{
    message: '此時data為對象'
  }

函數(shù)式

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

如何選擇

`data`必須使用函數(shù)式，否則會報錯。

重要原則

由Vue管理的函數(shù)，一定不要寫箭頭函數(shù)，一旦寫了箭頭函數(shù)，this就不再是Vue實例了。

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

Object.defineProperty()

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

事件處理

事件的基本使用

v-on指令

可簡寫為@

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

綁定事件的時候:@xxx="yyy" yyy可以寫一些簡單的語句

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

BUT！

BUUUUUUUUUT!

許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。

事件處理方法

事件修飾符prevent,stop,once等

1.prevent

v-on:xxx.prevent=xxx ，阻止默認事件（常用）

例如form表單中的summit提交按鈕，會自己提交和跳轉(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>

此時點擊子級的div，會先彈出2，再彈出1

<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>

點擊子級的div，此時的執(zhí)行結(jié)果是，先彈出1，再彈出2（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>

點擊子級的div，此時的執(zhí)行結(jié)果是只會彈出1（capture決定的執(zhí)行順序），不會執(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>

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

3.once

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

4.capture

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

5.self

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

6.passive

v-on=xxx.passive ，事件的默認行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢;

鍵盤事件

Vue中常用的按鍵別名:

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

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

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

注意要轉(zhuǎn)為kebab-case（短橫線命名)
系統(tǒng)修飾鍵（用法特殊）: ctrl、alt、 shift、 meta

配合keyup使用:按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
配合keydown使用:正常觸發(fā)事件。

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

計算屬性與監(jiān)聽

計算屬性computed

要顯示的數(shù)據(jù)不存在，要通過計算得來。
在computed 對象中定義計算屬性。
在頁面中使用{{方法名}}來顯示計算的結(jié)果。

定義

要用的屬性不存在，要通過已有屬性計算得來。
原理

底層借助了0bjcet.defineproperty方法提供的getter和setter（見下方get和set）
get函數(shù)什么時候執(zhí)行?
(1). 初次讀取時會執(zhí)行一次。
(2). 當依賴的數(shù)據(jù)發(fā)生改變時會被再次調(diào)用。
優(yōu)勢

與methods實現(xiàn)相比，內(nèi)部有緩存機制（復用），效率更高，調(diào)試方便
備注
1. 計算屬性最終會出現(xiàn)在vm上，直接讀取使用即可。
2. 如果計算屬性要被修改，那必須寫set函數(shù)去響應修改，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生

get()

當有人讀取fullName時，get()就會被調(diào)用，且返回值就作為fullName的值
get()調(diào)用的時期
1. 初次讀取fullName時。
2. 所依賴的數(shù)據(jù)發(fā)生變化時。

set(value)

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

監(jiān)視屬性-watch

通過vm對象的$watch()或 watch配置來監(jiān)視指定的屬性
當屬性變化時，回調(diào)函數(shù)自動調(diào)用，在函數(shù)內(nèi)部進行計算

當被監(jiān)視的屬性變化時,回調(diào)函數(shù)自動調(diào)用,進行相關(guān)操作
監(jiān)視的屬性必須存在,才能進行監(jiān)視!!
監(jiān)視的兩種寫法:

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

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

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

深度監(jiān)視

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

簡寫

監(jiān)視里只需要handler()函數(shù)時可以簡寫
語法：監(jiān)視對象(newValue,oldValue) { 語句 }

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

computed和watch區(qū)別

computed能干的，watch都能干。
watch能干的，computed不一定能干。例如: watch可以進行異步操作。
兩個重要的小原則;
1. 所被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm或組件實例對象
2. 所有不被Vue所管理的函數(shù)（定時器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等)，最好寫成箭頭函數(shù),這樣this的指向才是vm或組件實例對象。
  
  ~~(總之是想辦法讓this指向vm或組件實例對象)~~

綁定樣式

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

適用于-》樣式的類名不確定需要動態(tài)指定
綁定class樣式-數(shù)組寫法-<div class ="basic" :class="classArr">{{name}}</div>

適用于-》樣式的個數(shù)不確定名字也不確定
綁定class樣式-對象寫法-<div class ="basic" :class="classObj">{{name}}</div>

適用于-》樣式的個數(shù)確定名字也確定但要動態(tài)決定用不用
綁定style樣式-對象寫法（不常用）-<div class ="basic" :class="styleObj">{{name}}</div>

適用于style屬性為動態(tài)值的情況
綁定style樣式-數(shù)組寫法（不常用）-<div class ="basic" :class="styleArr">{{name}}</div>

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

條件渲染

v-show

寫法：v-show="表達式"
適用于：切換頻率較高的場景
判斷某個元素是否顯示或隱藏-<a class="example" v-show="list.show == 1">
- 若" "內(nèi)值為true則顯示若為false則隱藏
三目運算符判斷-<a class="example" v-show="!item.ai == null"></a>
特點：不展示的DOM元素未被移除而僅被隱藏掉

v-if

寫法：
- v-if="表達式"
- v-else-if="表達式"
- v-else="表達式"
- v-if可以和v-else-if、v-else一起使用但要求結(jié)構(gòu)不能被打斷
適用于：切換頻率較低的場景
特點：不展示的DOM元素被直接移除

template標簽

html中的template標簽中的內(nèi)容在頁面中不會顯示。但是在后臺查看頁面DOM結(jié)構(gòu)存在template標簽。這是因為template標簽天生不可見，它設(shè)置了display:none;屬性。

vue中template的作用是模板占位符，可幫助我們包裹元素，但在循環(huán)過程當中，template不會被渲染到頁面上

三種寫法
- 字符串模板寫法-直接寫在vue構(gòu)造器（最好不用嗷）
- 直接寫在template標簽中
- 寫在script標簽中（官方推薦）-<script type="x-template"></script>
template只能配合v-if系列、v-for使用不能配合v-show

列表渲染

基本列表

用v-for把一個數(shù)組對應為一組元素，用key作為每個元素唯一的身份證

v-for

我們可以用 v-for 指令基于一個數(shù)組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。
在 v-for 塊中，我們可以訪問所有父作用域的 property。v-for 還支持一個可選的第二個參數(shù)，即當前項的索引。
語法 v-for="(item,index) in xxx" :key="yyy"

也可以用 of 替代 in 作為分隔符
可遍歷:數(shù)組、對象、字符串（用的很少)、指定次數(shù)（用的很少)

key-遍歷時的身份證

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

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

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

如果你不給也行嗷,vue就會在遍歷的時候自動把index給key，然后遍歷就容易出問題（氣不氣？

列表遍歷

遍歷數(shù)組

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

<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應為指定的次數(shù)

key的原理

虛擬DOM中key的作用

key是虛擬DOM對象的標識

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

~~人話：key就是班主任手上的花名冊的標號學生發(fā)生變化的時候班主任要擬一份新的花名冊然后把新舊花名冊比一比讓學生按標號入座~~

對比規(guī)則

舊虛擬DOM中找到了與新虛擬DOM相同的key時
~~新舊花名冊上標號一樣時~~
- 若虛擬DOM中內(nèi)容沒變，直接使用之前的真實DOM
  ~~對應的學生名字也一樣那就是原來那個學生坐原來那個位置~~
- 若虛擬DOM中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM
  ~~哦豁對應的學生名字不一樣了那學生就按新花名冊的標號來坐~~
舊虛擬DOM中未找到與新虛擬DOM相同的key時
~~耶？出現(xiàn)了新的標號~~
- 創(chuàng)建新的真實DOM，隨后渲染到到頁面。
  ~~那給你加個對應的座位~~

用`index`作為`key`可能會引發(fā)的問題

~~如果直接按成績排~~

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

會產(chǎn)生沒有必要的真實DOM更新 --》導致界面效果沒問題，但效率低

~~完了全班人座位都要跟著排名變一換換一下午那不要上課了~~
如果結(jié)構(gòu)中還包含輸入類的DOM
~~要是這個班要進名額外的新人~~
會產(chǎn)生錯誤DOM更新 --》導致界面有問題

~~好嘛一換座位換錯了有人要坐地上了/有座位空出來了~~

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

~~那我們要怎么排花名冊捏？~~

最好使用每條數(shù)據(jù)的唯一標識作為key，比如id、手機號、身份證號、學號等唯一值。

~~最好按身份證排身份證絕對沒有一樣的~~
如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。

~~要是新生直接墊底/前幾名不轉(zhuǎn)班班主任只是展示一下班級風采那按成績排也沒事啊~~

列表過濾

模糊查找

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

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

若找到，返回位置

若沒找到，返回-1

（stringObject 中的字符位置是從 0 開始的。）
語法 stringObject.indexOf(searchvalue,fromindex)

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

fromindex：可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。
indexOf('') 檢索空字符串返回0

js的`filter()`方法

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

語法

arr.filter(callback, thisArg])

callback 用來測試數(shù)組的每個元素的函數(shù)。調(diào)用時使用參數(shù)(element, index, array)
```
  返回`true`表示保留該元素（通過測試），`false`則不保留。
```
thisArg 可選。執(zhí)行 callback 時的用于 this的值。
用法說明

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

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

那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數(shù)組中。

callback 被調(diào)用時傳入三個參數(shù)：
- 元素的值
- 元素的索引
- 被遍歷的數(shù)組
如果為 filter 提供一個 thisArg 參數(shù)，則它會被作為 callback 被調(diào)用時的 this 值。否則，callback 的this 值在非嚴格模式下將是全局對象，嚴格模式下為 undefined

filter 不會改變原數(shù)組

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

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

被刪除或從來未被賦值的元素不會被遍歷到。

列表排序

js sort() 方法

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

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

默認排序順序為按字母升序。

會改變原始數(shù)組

語法

array.sort(sortfunction)

  `sortfunction`  可選。規(guī)定排序順序。必須是函數(shù)。

  返回Array 對數(shù)組的引用。數(shù)組**在原數(shù)組上進行排序**，***不生成副本。***

示例

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檢測數(shù)據(jù)改變的原理

對象

數(shù)組

Vue.set(object,item ,value)

vm.$set()

vue會監(jiān)視data中所有層次的數(shù)據(jù)。
如何監(jiān)測對象中的數(shù)據(jù)?

通過setter實現(xiàn)監(jiān)視,且要在new Vue時就傳入要監(jiān)測的數(shù)據(jù)。
- 對象中后追加的屬性，Vue默認不做響應式處理
- 如需給后添加的屬性做響應式，要用如下API:
  
  Vue.set(target.propertyName/index,value)或
  
  vm.$set(target.propertyName/index,value)
如何監(jiān)測數(shù)組中的數(shù)據(jù)?

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

本質(zhì)就是做了兩件事:
1. 調(diào)用原生對應的方法對數(shù)組進行更新。
2. 重新解析模板，進而更新頁面。
在Vue修改數(shù)組中的某個元素一定要用如下方法:
1. 使用API: push()、pop()、shift()、unshift()、splice()、sort().reverse()
2. Vue.set()或vm.$set()
特別注意

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

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

若:<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值
若:<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值
若: <input type="checkbox"/>
1. 沒有配置input的value屬性，那么收集的就是checked(勾選or未勾選，是布爾值)
2. 配置input的value屬性
  - v-model的初始值是非數(shù)組，那么收集的就是checked(勾選or未勾選，是布爾值)
  - v-model的初始值是數(shù)組，那么收集的的就是value組成的數(shù)組
v-model的三個修飾符
- lazy:失去焦點再收集數(shù)據(jù)
- number:輸入字符串轉(zhuǎn)為有效的數(shù)字
- trim:輸入首尾空格過濾

過濾器filters

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

多個過濾器可串聯(lián)

定義

對要顯示的數(shù)據(jù)進行特定格式化后再顯示（適用于一些簡單邏輯的處理）
語法
1. 注冊過濾器:Vue.filter(name,callback）（全局注冊）或new Vue{filters:{}}（局部注冊）
2. 使用過濾器:{{ xxx│過濾器名}} 或 v-bind:屬性=“xxx│過濾器名"
注意

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

并沒有改變原本的數(shù)據(jù)，是產(chǎn)生新的對應的數(shù)據(jù)

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

常用內(nèi)置指令

已學指令:

`v-bind` :單向綁定解析表達式,可簡寫為`:xxx`

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

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

`v-on`:綁定事件監(jiān)聽,可簡寫為`@`

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

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

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

v-text

作用

向其所在的節(jié)點中渲染文本內(nèi)容。
與插值語法的區(qū)別

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

v-html

作用

向指定節(jié)點中渲染包含html結(jié)構(gòu)的內(nèi)容
與插值語法的區(qū)別
1. v-html會替換掉節(jié)點中所有的內(nèi)容,{{xx}}則不會。
2. v-html可以識別html結(jié)構(gòu)。
3. v-html有安全性問題!!!!
  - 在網(wǎng)站上動態(tài)渲染任意HTAL是非常危險的,容易導致XSS攻擊
  - 一定要在可信的內(nèi)容上使用v-html，永不要用在用戶提交的內(nèi)容上!

v-cloak

沒有值~~但是很實用啊這玩意兒~~

~~網(wǎng)速不好打開網(wǎng)站的時候只顯示藍色超鏈接文本和輸入框的初始界面這種事經(jīng)歷過吧？~~

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

~~我瞎猜的我也沒去求證過~~
本質(zhì)是一個特殊屬性
Vue實例創(chuàng)建完畢并接管容器后，會刪掉v-cloak屬性
使用css配合v-cloak可以解決網(wǎng)速慢時頁面展示出{{xxx}}的問題

常見用法：
```
 <style>
      [v-cloak] {
        display: none;
      }
```

v-once

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

v-pre

跳過其所在節(jié)點的編譯過程。
可利用它跳過:沒有使用指令語法、沒有使用插值語法的節(jié)點，會加快編譯。

自定義指令

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

Vue模板語法有2大類

插值語法
- 功能
  
  用于解析標簽體內(nèi)容。
- 寫法:
  
  {{xxx}}，xxx是js表達式,且可以直接讀取到data中的所有屬性。
指令語法
- 功能
  
  用于解析標簽(包括:標簽屬性、標簽體內(nèi)容、綁定事件.....）.
- 舉例
  
  v-bind:href="xxx”或簡寫為:href="xxx"，xxx同樣要寫js表達式，
  且可以直接讀取到data中的所有屬性。

定義語法

局部指令:

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

全局指令:

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

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

bind

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

指令所在元素被插入頁面時調(diào)用
update

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

備注:

指令定義時不加v-，但使用時要加v-
指令名如果是多個單詞，要使用kebab-case命名方式,不要用camelCase命名.

Vue生命周期

mounted

Vue完成模板的解析并把初始的真實DOM元素放入頁面后(掛載完畢）調(diào)用mounted
生命周期
- 又名生命周期回調(diào)函數(shù)、生命周期函數(shù)、生命周期鉤子。
- Vue在關(guān)鍵時刻幫我們調(diào)用的一些特殊名稱的函數(shù)。
- 生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的。
- 生命周期函數(shù)中的this指向是vm或組件實例對象
捋要創(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ù)。
將要銷毀=>調(diào)用beforeDestroy函數(shù)。=>【重要的鉤子】
銷毀完畢==>調(diào)用destroyed函數(shù)。
常用的生命周期鉤子:
1. mounted
  
  發(fā)送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】
2. beforeDestroy
  
  清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】。
關(guān)于銷毀Vue實例
1. 銷毀后借助Vue開發(fā)者工具看不到任何信息。
2. 銷毀后自定義事件會失效,但原生DOM事件依然有效。
3. 一般不會在beforeDestroy操作數(shù)據(jù)，因為即便操作數(shù)據(jù)，也不會再觸發(fā)更新流程了。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

個人筆記|給自己看的Vue核心（施工中）