一、插值表達(dá)式

一般用在標(biāo)簽體的值

{{}}
可插入：
    算術(shù)表達(dá)式
    邏輯表達(dá)式
    關(guān)系表達(dá)式
    三元運(yùn)算符
    js內(nèi)置方法
切勿：
    聲明變量
    創(chuàng)建函數(shù)
    控制流程

二效五、指令語(yǔ)法

用于解析標(biāo)簽(標(biāo)簽體,標(biāo)簽屬性, 綁定事件)上

1. v-cloak

//帶有v-cloak屬性先隱藏地消，頁(yè)面加載完后，將v-cloak屬性刪除
//使用css配合v-cloak可以解決網(wǎng)速慢時(shí)頁(yè)面展示出{{xxx}}的問(wèn)題。
<div v-cloak>{{msg}}</div>

2. v-on

綁定事件監(jiān)聽(tīng)器
<div v-on:click="msg"></div>
//簡(jiǎn)寫
<div @click="msg"></div>

3. v-if v-else-if v-else

對(duì)元素進(jìn)行添加和和刪除，對(duì)dom節(jié)點(diǎn)進(jìn)行控制炸宵，會(huì)產(chǎn)生重繪和回流，用于敏感數(shù)據(jù)切換
<div v-if='love'>I want to see you!</div>

切記：if與else之間不能中斷

4. v-show

直接給標(biāo)簽加display:none适瓦，對(duì)樣式層面進(jìn)行控制，會(huì)產(chǎn)生重繪和回流谱仪，不敏感且頻繁切換時(shí)使用
<div v-show="flag">Can you see mee?</div>

備注：使用v-if的時(shí)玻熙，元素可能無(wú)法獲取到，而使用v-show一定可以獲取到

5. v-for

<!--用于列表渲染疯攒，需和：key(1.數(shù)值或字符串嗦随，2.不能重復(fù))一起使用，屬性key讓每一個(gè)li有了唯一的標(biāo)識(shí)敬尺，提高渲染速度 -->>
<div id="app">
    <!--注意遍歷字符串的時(shí)候先收到的是字符串中每一個(gè)字符枚尼，第二項(xiàng)是其對(duì)應(yīng)的索引index-->
    <div v-for="(item,index) in str">{{item}}---{{index}}</div>
    
    <!--注意遍歷指定次數(shù)的時(shí)候先收到的是number(例如5，則number是1砂吞，2署恍，3，4蜻直，5)盯质，第二項(xiàng)是對(duì)應(yīng)index(從0開(kāi)始計(jì)數(shù),則是0,1,2,3,4)-->
    <div v-for="(item,index) in num">{{item}}---{{index}}</div>
    
    <!--注意遍歷對(duì)象的時(shí)候先收到的是每一項(xiàng)的屬性的value袁串，第二項(xiàng)是對(duì)應(yīng)的鍵名:key-->
    <div v-for="(val,key,index) in obj">{{val}}---{{key}}---{{index}}</div>
    
    <div v-for="(val,index) in arr">{{val}}---{{index}}</div>
</div>

6. v-bind

給元素綁定動(dòng)態(tài)屬性 (src,href,style,class,id,value),單向數(shù)據(jù)綁定(數(shù)據(jù)只能從data流向頁(yè)面)
<div v-bind:src="url"></div>

簡(jiǎn)寫
<div :src="url"></div>

class
<div :class="box active">//字符串
<div :class="{active:a,ftcolor:c}">//對(duì)象
<div :class="arr">//數(shù)組
<div :class="[active?"ftcolor":""]">

//style,'-'省略，第二個(gè)單詞首字母大寫
<div :style="'fontSize:20px'">
<div :style="{'fontSize:20px','borderRadius:50%'}">

7. v-model

用于表單控件雙向數(shù)據(jù)綁定(數(shù)據(jù)不僅能從data流向頁(yè)面呼巷，還可以從頁(yè)面流向data)
//v-model 其實(shí)就是 @input="(e)=>msg = e.target.value"+{{msg}} 的語(yǔ)法糖
//v-model:value 可以簡(jiǎn)寫為 v-model囱修，因?yàn)関-model默認(rèn)收集的就是value值。
<input v-model="msg"></input>

限制：
    <input>,<select>,<textarea>
    
修飾符：
    .lazy - 取代 input 監(jiān)聽(tīng) change 事件
    .number - 輸入字符串轉(zhuǎn)為有效的數(shù)字
    .trim - 輸入首尾空格過(guò)濾

8. v-text

替換標(biāo)簽里文本內(nèi)容,等價(jià)于innertext
<div v-text="myText">Notice</div>

9. v-html

插入到標(biāo)簽王悍，等價(jià)于 innerHTML
注意：不安全破镰，存在xss攻擊
<div v-html="msg"></div>

//解決方案:
//    1)下載后導(dǎo)入模塊
//          npm install dompurify
//          import VueDOMPurifyHTML from 'vue-dompurify-html'
//    2)掛載到Vue上
//          Vue.use(VueDOMPurifyHTML)
//    3)將v-html改為v-dompurify-html

10. 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)化性能晋辆。
<h2 v-once>初始化n的值為:{{ n }}</h2>
<h2>當(dāng)前的n值為:{{ n }}</h2>
<button @click="n++">帶我n+1</button>

11. v-pre

//跳過(guò)其所在節(jié)點(diǎn)的編譯過(guò)程渠脉。
//可利用它跳過(guò)：沒(méi)有使用指令語(yǔ)法、沒(méi)有使用插值語(yǔ)法的節(jié)點(diǎn)瓶佳，會(huì)加快編譯芋膘。
<h2 v-pre>Vue其實(shí)很簡(jiǎn)單</h2>
<h2>當(dāng)前的n值為:{{ n }}</h2>
<button @click="n++">帶我n+1</button>

12. key的作用(面試題)

react、vue中的key有什么作用霸饲？（key的內(nèi)部原理）

1. 虛擬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】的差異比較厚脉，比較規(guī)則如下：
2. 對(duì)比規(guī)則：
        (1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
            ①.若虛擬DOM中內(nèi)容沒(méi)變, 直接使用之前的真實(shí)DOM习寸！
            ②.若虛擬DOM中內(nèi)容變了, 則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM傻工。
        (2).舊虛擬DOM中未找到與新虛擬DOM相同的key：
            創(chuàng)建新的真實(shí)DOM霞溪，隨后渲染到到頁(yè)面。
3. 用index作為key可能會(huì)引發(fā)的問(wèn)題：
        (1) 若對(duì)數(shù)據(jù)進(jìn)行：逆序添加中捆、逆序刪除等破壞順序操作:
            會(huì)產(chǎn)生沒(méi)有必要的真實(shí)DOM更新 ==> 界面效果沒(méi)問(wèn)題, 但效率低鸯匹。
        (2) 如果結(jié)構(gòu)中還包含輸入類的DOM:
            會(huì)產(chǎn)生錯(cuò)誤DOM更新 ==> 界面有問(wèn)題。
4. 開(kāi)發(fā)中如何選擇key?:
        (1)最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key, 比如id泄伪、手機(jī)號(hào)殴蓬、身份證號(hào)、學(xué)號(hào)等唯一值蟋滴。
        (2)如果不存在對(duì)數(shù)據(jù)的逆序添加染厅、逆序刪除等破壞順序操作，僅用于渲染列表用于展示津函，使用index作為key是沒(méi)有問(wèn)題的肖粮。

三、結(jié)構(gòu)

let vm = new Vue({
    el:"#app",// document.getElementById('root') //element el指定當(dāng)前vue實(shí)例為哪一個(gè)容器服務(wù)球散，值通常為css選擇器格式
    data:{//data用來(lái)存儲(chǔ)數(shù)據(jù)尿赚，組件里必須用函數(shù)來(lái)表示
        num:1,
        str:"So cute!",
        arr:[2,4,6,8],
        obj:{
            id:"0411"
            name:"Zhou",
            age:22,
            hobby:['dangcing','rapping','singing']
    }
},
                 methods:{},
    directives:{},
        computed:{},
            filter:{},
                watch:{}
})

四散庶、事件處理

1. 鍵盤事件

• Vue中常用的按鍵別名：

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

• Vue未提供別名的按鍵凌净，可以使用按鍵原始的key值去綁定悲龟，但注意要轉(zhuǎn)為kebab-case（短橫線命名）

• 系統(tǒng)修飾鍵（用法特殊）：ctrl、alt冰寻、shift须教、meta

  • 配合keyup使用：按下修飾鍵的同時(shí)，再按下其他鍵斩芭，隨后釋放其他鍵轻腺，事件才被觸發(fā)。
  • 配合keydown使用：正常觸發(fā)事件划乖。

• 也可以使用keyCode去指定具體的按鍵（不推薦）

• Vue.config.keyCodes.自定義鍵名 = 鍵碼贬养，可以去定制按鍵別名

<div id="root">
    <!--vue中鍵盤事件的綁定 一般用keyUp(keydown)-->
    <h1>歡迎來(lái)到{{ name }}</h1>
    <input type="text" @keyup.enter="showInfo" placeholder="按下回車提示輸入"/>
    <input type="text" @keyup.delete="showInfo" placeholder="退格或刪除提示輸入"/>
    <input type="text" @keyup.esc="showInfo" placeholder="按下esc提示輸入"/>
    <input type="text" @keydown.tab="showInfo" placeholder="按下tab示輸入"/>
    <input type="text" @keyup.ctrl="showInfo" placeholder="按下command提示輸入"/>
    <input type="text" @keydown.p="showInfo" placeholder="按下p提示輸入"/>
    <!--鍵盤事件的修飾符也可以連用-->
    <input type="text" @keydown.command.g="showInfo" placeholder="按下command和g提示輸入"/>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name: 'shanghai'
        },
        methods:{
            showInfo:function (e){
                // if(e.keyCode === 13) {
                //     console.log(e.target.value);
                // }
                console.log(e.target.value);
                console.log(e.key); //按下的名字
            }
        }
    })
</script>

2. 事件的基本使用

1. 使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名琴庵；
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)" 效果一致懦尝，但后者可以傳參知纷；

<div id="root">
    <!--指令語(yǔ)法 v開(kāi)頭 例如v-on:click點(diǎn)擊事件-->
    <h1>歡迎 {{ name }} </h1>
    <button v-on:click="showInfo1">點(diǎn)我提示信息1</button>
    <!--簡(jiǎn)寫形式 @click-->
    <button @click="showInfo2($event,66)">點(diǎn)我提示信息2</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data(){
            return {
                name: 'shanghai',
            }
        },
        //methods配置事件處理的回調(diào)函數(shù)
        methods:{
            showInfo1(e){
                //默認(rèn)給你傳遞event參數(shù)
                //當(dāng)是箭頭函數(shù)的話this那就是window
                console.log(this === vm); //this是vue實(shí)例
                console.log('你好');
            },
            //接收參數(shù)
            showInfo2(e,num){
                console.log(e.target);//
                console.log(`接收參數(shù)：${num}`);
            }
        }
    });
</script>

3. 事件修飾符

1. prevent：阻止默認(rèn)事件（常用）；
2. stop：阻止事件冒泡（常用）导披；
3. once：事件只觸發(fā)一次（常用）屈扎；
4. capture：使用事件的捕獲模式；
5. self：只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件撩匕；
6. passive：事件的默認(rèn)行為立即執(zhí)行鹰晨，無(wú)需等待事件回調(diào)執(zhí)行完畢；

<div id="root">
    <h1>歡迎來(lái)到 {{ name }}</h1>
    <!--阻止默認(rèn)事件（常用-->
    <a  @click.prevent="showInfo" >點(diǎn)我提示信息</a>
    <!--阻止事件冒泡（常用）-->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點(diǎn)我提示信息</button>
        <!--修飾符也可以連用止毕，例如下面事例是即阻止冒泡同時(shí)也阻止默認(rèn)行為-->
        <!--<a  @click.prevent.stop="showInfo">谷歌臺(tái)灣</a>-->
    </div>
    <!--事件只觸發(fā)一次-->
    <button @click.once="showInfo">點(diǎn)我提示信息,只在第一次點(diǎn)擊生效</button>
    <!-- capture事件的捕獲模式 讓事件以捕獲的方式來(lái)處理(先捕獲再冒泡)-->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">div2</div>
    </div>
    <!-- self 只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件(變相阻止冒泡)-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">點(diǎn)我提示信息</button>
    </div>
    <!--passive：事件的默認(rèn)行為立即執(zhí)行模蜡，無(wú)需等待事件回調(diào)執(zhí)行完畢；-->
    <!--scroll滾動(dòng)條一滾動(dòng)就會(huì)觸發(fā)的事件 wheel鼠標(biāo)滾輪事件-->
    <ul class="list" @scroll.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type='text/javascript'>
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data(){
            return {
                name: 'Shanghai'
            }
        },
        methods:{
            showInfo(e){
                // e.preventDefault(); 阻止a標(biāo)簽?zāi)J(rèn)行為
                // e.stopPropagation() //阻止事件冒泡
                // alert('你好');
                console.log(e.target);
            },
            showMsg(msg){
                console.log(msg);
            },
            demo(){
                // console.log(`@`)
                // for(let i = 0; i < 100000; i++){
                //     console.log('#')
                // }
                // console.log('累了')
            }
        }
    });
</script>

五扁凛、MVVM模型

1. 模型解讀

1. M：模型(Model) ：data中的數(shù)據(jù)
2. V：視圖(View) ：模板代碼
3. VM：視圖模型(ViewModel)：Vue實(shí)例 (view與model之間的紐帶)

2. 觀察發(fā)現(xiàn)：

1. data中所有的屬性忍疾，最后都出現(xiàn)在了vm身上。
2. vm身上所有的屬性 及 Vue原型上所有屬性谨朝，在Vue模板中都可以直接使用卤妒。

六甥绿、數(shù)據(jù)代理

1. Object.defineProperty方法

Object.defineProperty(person,'age', {
    // value: 18,
    // enumerable: true, //此時(shí)代表這個(gè)屬性是可以枚舉的
    // writable: true, //代表可以重寫該屬性(控制屬性是否被修改)
    // configurable:true, //控制屬性是否可以被刪除 默認(rèn)為false


    //當(dāng)讀取person的age屬性時(shí)get屬性就會(huì)被調(diào)用，且返回值就是age的值
    //invoke property proxy映射數(shù)據(jù)代理
    get: function () {
        //測(cè)試它的調(diào)用情況
        console.log('@@@ GET AGE');
        //此時(shí)age的值依賴number的值
        return number
    },
    //當(dāng)修改person的age屬性時(shí)set(setter)屬性就會(huì)被調(diào)用则披，且會(huì)收到修改的具體值
    set(v) {
        //測(cè)試
        console.log('CHANGE AGE');
        number=v;
    }
});

2. 何為數(shù)據(jù)代理共缕？

數(shù)據(jù)代理，通過(guò)一個(gè)對(duì)象代理另一個(gè)對(duì)象中屬性的操作

let obj = { x:200 }
let obj2 = { y:200 }
//通過(guò)obj2代理obj士复，來(lái)操作obj的x
Object.defineProperty(obj2, 'x',{
    get(){
        return obj.x
    },
    set(v){
        obj.x = v;
    }
});

3. vue中的數(shù)據(jù)代理

• Vue中的數(shù)據(jù)代理：通過(guò)vm對(duì)象來(lái)代理data對(duì)象中屬性的操作（讀/寫）
• Vue中數(shù)據(jù)代理的好處：更加方便的操作data中的數(shù)據(jù)
• 基本原理：
  1. 通過(guò)Object.defineProperty()把data對(duì)象中所有屬性添加到vm上图谷。
  2. 為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter阱洪。
  3. 在getter/setter內(nèi)部去操作（讀/寫）data中對(duì)應(yīng)的屬性便贵。

七、計(jì)算屬性

1. 定義

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

2. 原理

底層借助了Objcet.defineproperty方法提供的getter和setter。

3. get函數(shù)什么時(shí)候執(zhí)行俏竞？

(1).初次讀取時(shí)會(huì)執(zhí)行一次绸硕。

(2).當(dāng)依賴的數(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ì)算屬性要被修改烦秩，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變郎仆。

<!--v-model雙向綁定-->
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
測(cè)試:<input type="text" v-model="test"/>
<br/><br/>
全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            //data里的都是屬性
            firstName: '張',
            lastName: '三',
            test:'test'
        },
        //計(jì)算屬性--> 舊屬性加工
        computed: {
            fullName: {
                //get的作用只祠，當(dāng)讀取fullName時(shí)get就會(huì)被調(diào)用，且返回值就做為fullName的值
                //defineProperty
                //注意vm._data是不存在計(jì)算屬性的
                //計(jì)算屬性算完之后直接丟到了viewModel實(shí)例對(duì)象身上
                /**
                 * get的調(diào)用時(shí)機(jī)
                 * 1.初次讀取計(jì)算屬性時(shí)
                 * 2.所依賴的數(shù)據(jù)(data中的屬性)發(fā)生變化時(shí)扰肌，不改變的話直接讀緩存
                 * 3.methods沒(méi)有緩存抛寝，讀幾次就調(diào)用幾次無(wú)論要用的數(shù)據(jù)是否發(fā)生變化
                 *  @returns {string}
                 */
                get(){
                    //此時(shí)get函數(shù)中的this指向是vm
                    console.log('get調(diào)用了', this);
                    return this.firstName + '--' + this.lastName
                },
                /**
                 * set什么時(shí)候調(diào)用
                 *   1.當(dāng)fullName被修改時(shí)
                 * @param value
                 */
                set(value){
                    //修改計(jì)算屬性所依賴的普通屬性(放在data里面的)
                    //this === vm
                    const [ firstName, lastName ] = value.split('-');
                    this.firstName = firstName;
                    this.lastName = lastName; //依賴屬性發(fā)生改變之后,計(jì)算屬性自動(dòng)改變
                }
            }
        }
    });
</script>

八、監(jiān)視屬性

1. 監(jiān)視屬性watch

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)視的兩種寫法：

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

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

2. 監(jiān)視的配置對(duì)象

1. immediate: true, //當(dāng)這個(gè)屬性為true時(shí)桂躏，頁(yè)面剛渲染就運(yùn)行handler函數(shù)

2. handler函數(shù)接收兩個(gè)參數(shù)钻趋，一個(gè)是這個(gè)狀態(tài)參數(shù)改變前的值，另一個(gè)是改變后的舊值

3. deep:true

   (1).Vue中的watch默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變（一層）剂习。

   (2).配置deep:true可以監(jiān)測(cè)對(duì)象內(nèi)部值改變（多層）蛮位。

isHot:{
    immediate: true, 
        //handler 什么時(shí)候調(diào)用呢
        //當(dāng)isHot發(fā)生改變就會(huì)調(diào)用該函數(shù)
        handler(newValue, preValue){
        console.log('ishot 被修改了');
        console.log(`newValue: ${newValue}, preValue: ${preValue}`);
    }
}

3. watch的第二種寫法

直接采用vm對(duì)象實(shí)例

vm.$watch('isHot', {
    immediate: true, 
    handler(newValue, preValue){
        console.log('ishot 被修改了');
        console.log(`newValue: ${newValue}, preValue: ${preValue}`);
    }
});

九较沪、計(jì)算屬性與監(jiān)視屬性對(duì)比

1. 區(qū)別

1. computed能完成的功能，watch都可以完成失仁。
2. watch能完成的功能购对，computed不一定能完成，例如：watch可以進(jìn)行異步操作陶因。

2. 原則

1. 所被Vue管理的函數(shù)骡苞，最好寫成普通函數(shù)，這樣this的指向才是vm 或 組件實(shí)例對(duì)象楷扬。
2. 所有不被Vue所管理的函數(shù)（定時(shí)器的回調(diào)函數(shù)解幽、ajax的回調(diào)函數(shù)等、Promise的回調(diào)函數(shù)）烘苹，最好寫成箭頭函數(shù)躲株，這樣this的指向才是vm 或 組件實(shí)例對(duì)象。

十镣衡、綁定樣式

1. class樣式

寫法:class="xxx" xxx可以是字符串霜定、對(duì)象、數(shù)組廊鸥。
字符串寫法適用于：類名不確定望浩，要?jiǎng)討B(tài)獲取。
對(duì)象寫法適用于：要綁定多個(gè)樣式惰说，個(gè)數(shù)不確定磨德，名字也不確定。
數(shù)組寫法適用于：要綁定多個(gè)樣式吆视，個(gè)數(shù)確定典挑，名字也確定，但不確定用不用啦吧。

2. style樣式

:style="{fontSize: xxx}"其中xxx是動(dòng)態(tài)值您觉。
:style="[a,b]"其中a、b是樣式對(duì)象授滓。

十一琳水、數(shù)據(jù)監(jiān)測(cè)

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

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

(1).對(duì)象中后追加的屬性，Vue默認(rèn)不做響應(yīng)式處理
(2).如需給后添加的屬性做響應(yīng)式郁妈，請(qǐng)使用如下API：
    Vue.set(target浑玛，propertyName/index，value) 或
    vm.$set(target噩咪，propertyName/index顾彰，value)
    注意：對(duì)象不能是 Vue 實(shí)例极阅，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象

2. 如何監(jiān)測(cè)數(shù)組中的數(shù)據(jù)？

Vue 將被偵聽(tīng)的數(shù)組的變更方法進(jìn)行了包裹涨享，所以它們也將會(huì)觸發(fā)視圖更新筋搏。

這些被包裹過(guò)的方法包括：
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

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

1.使用這些API:push()、pop()厕隧、shift()奔脐、unshift()、splice()吁讨、sort()髓迎、reverse()
2.Vue.set() 或 vm.$set()

十二、收集表單數(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屬性:
                (1)v-model的初始值是非數(shù)組，那么收集的就是checked（勾選 or 未勾選疗韵，是布爾值）
                (2)v-model的初始值是數(shù)組兑障，那么收集的的就是value組成的數(shù)組

十三、過(guò)濾器

1. 定義

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

2. 語(yǔ)法

• 注冊(cè)過(guò)濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
• 使用過(guò)濾器：{{ xxx | 過(guò)濾器名}} 或 v-bind:屬性 = "xxx | 過(guò)濾器名"

3. 注意

• 過(guò)濾器也可以接收額外參數(shù)、多個(gè)過(guò)濾器也可以串聯(lián)
• 并沒(méi)有改變?cè)镜臄?shù)據(jù), 是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

十四逞怨、自定義指令

1. 定義語(yǔ)法

(1).局部指令：
    new Vue({directives:{指令名:配置對(duì)象} })   或  new Vue({directives: {指令名:回調(diào)函數(shù)}})
(2).全局指令：
    Vue.directive(指令名,配置對(duì)象) 或  Vue.directive(指令名,回調(diào)函數(shù))

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

(1).bind：指令與元素成功綁定時(shí)調(diào)用者疤。
(2).inserted：指令所在元素被插入頁(yè)面時(shí)調(diào)用。
(3).update：指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用叠赦。

3. 注意

1.指令定義時(shí)不加v-驹马，但使用時(shí)要加v-；
2.指令名如果是多個(gè)單詞除秀，要使用kebab-case命名方式糯累，不要用camelCase命名。

//全局指令
Vue.directive('fbind', {
    bind(el, binding){
        el.value = binding.value;
    },
    //指令被插入頁(yè)面時(shí)
    inserted(el, binding){
        el.focus();
    },
    //指令所在模版被重新解析時(shí)
    update(el, binding){
        el.value = binding.value;
    }
})

//定義指令的配置項(xiàng): directives
directives:{
    fbind:{
        //指令與元素成功綁定
        bind(el, binding){
            el.value = binding.value;
        },
            //指令被插入頁(yè)面時(shí)
            inserted(el, binding){
                el.focus();
            },
                //指令所在模版被重新解析時(shí)
                update(el, binding){
                    el.value = binding.value;
                }
    }
}
}

十五册踩、生命周期

1. 定義

1. 又名：生命周期回調(diào)函數(shù)泳姐、生命周期函數(shù)、生命周期鉤子暂吉。
2. 是什么：Vue在關(guān)鍵時(shí)刻幫我們調(diào)用的一些特殊名稱的函數(shù)胖秒。
3. 生命周期函數(shù)的名字不可更改缎患，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的。
4. 生命周期函數(shù)中的this指向是vm 或 組件實(shí)例對(duì)象阎肝。

2. template

//template模版字符串只能有一個(gè)根結(jié)點(diǎn)
// template:'<div><h1>當(dāng)前的n值是{{ n }}</h1>\n' +
//'<button @click="add">點(diǎn)我+1</button></div>',
//注意template是不能作為根標(biāo)簽來(lái)使用的挤渔，不能去騙vue，可以用fragment(vue3新加风题，模仿react)

3. 鉤子函數(shù)

        beforeCreate(){
            console.log('beforeCreate');
            // console.log(this);

        },
        created(){
            console.log('created');
            // console.log(this);
        },
        beforeMount(){
            console.log('beforeMount');
            // console.log(this);
        },
        mounted(){
            console.log('mounted');
            console.log(this);
            // document.querySelector('h1').innerText = 'hahah';
        },
        beforeUpdate(){
            console.log('beforeUpdate');
            //console.log(this.n); //此時(shí)數(shù)據(jù)是新的判导，頁(yè)面還是舊的，vue還沒(méi)根據(jù)新的數(shù)據(jù)去生成新的虛擬dom沛硅，去比較舊的虛擬dom
        },
        updated(){
            console.log('updated');
            console.log(this.n); //此時(shí)數(shù)據(jù)是新的骡楼，頁(yè)面也是新的，同步
        },
        beforeDestroy(){
            //仍然可以使用data,methods稽鞭，關(guān)閉定時(shí)器鸟整，取消訂閱消息，解綁自定義事件等收尾工作朦蕴，移除watchers
            console.log('beforeDestroy');
            console.log(this.n);
            // this.add(); //記住一旦到了beforeDestroy或者destroyed鉤子篮条，即使你拿到數(shù)據(jù)想要更新它也不會(huì)走更新的路了(beforeUpdate,updated)
        },
        //destroyed鉤子幾乎不用
        destroyed(){
          console.log('destroyed');
        }

4. 總結(jié)

常用的生命周期鉤子：
    1.mounted: 發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器吩抓、綁定自定義事件涉茧、訂閱消息等【初始化操作】。
    2.beforeDestroy: 清除定時(shí)器疹娶、解綁自定義事件伴栓、取消訂閱消息等【收尾工作】。

關(guān)于銷毀Vue實(shí)例
    1.銷毀后借助Vue開(kāi)發(fā)者工具看不到任何信息雨饺。
    2.銷毀后自定義事件會(huì)失效钳垮，但原生DOM事件依然有效。(click之類的原生事件依然會(huì)被調(diào)用)
    3.一般不會(huì)在beforeDestroy操作數(shù)據(jù)额港，因?yàn)榧幢悴僮鲾?shù)據(jù)饺窿，也不會(huì)再觸發(fā)更新流程了。

十六移斩、組件

1. 用組件的步驟

1. 定義組件(創(chuàng)建組件)
2. 注冊(cè)組件
3. 使用組件(寫組件標(biāo)簽)

2. 如何定義一個(gè)組件肚医？

使用Vue.extend(options)創(chuàng)建，其中options和new Vue(options)時(shí)傳入的那個(gè)options幾乎一樣向瓷，但也有點(diǎn)區(qū)別肠套；
區(qū)別如下：
    1.el不要寫，為什么猖任？ ——— 最終所有的組件都要經(jīng)過(guò)一個(gè)vm的管理你稚，由vm中的el決定服務(wù)哪個(gè)容器。
    2.data必須寫成函數(shù)，為什么入宦？ ———— 避免組件被復(fù)用時(shí)哺徊，數(shù)據(jù)存在引用關(guān)系。
備注：使用template可以配置組件結(jié)構(gòu)乾闰。

3. 如何注冊(cè)組件落追？

1.局部注冊(cè)：靠new Vue的時(shí)候傳入components選項(xiàng)
2.全局注冊(cè)：靠Vue.component('組件名',組件)

4. 組件名

一個(gè)單詞組成：
    第一種寫法(首字母小寫)：school
    第二種寫法(首字母大寫)：School
多個(gè)單詞組成：
    第一種寫法(kebab-case命名)：my-school
    第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
    (1).組件名盡可能回避HTML中已有的元素名稱，例如：h2涯肩、H2都不行轿钠。
    (2).可以使用name配置項(xiàng)指定組件在開(kāi)發(fā)者工具中呈現(xiàn)的名字。

const hello = {
    template: `
          <div>
            <h1>{{ msg }}</h1>
         </div>
        `,
    data(){
        return {
            msg:"hello"
        }
    }
}

new Vue({
    el: "#root",
    data:{
        msg: '歡迎學(xué)習(xí)vue'
    },
    components:{
        school:s,
        hello
    }
})