初識(shí)Vue

1.想讓Vue工作奶卓，就必須創(chuàng)建一個(gè)Vue實(shí)例晴音，且要傳入一個(gè)配置對(duì)象肘交；
2.root容器里的代碼依然符合html規(guī)范，只不過(guò)混入了一些特殊的Vue語(yǔ)法唆缴；
3.root容器里的代碼被稱為【Vue模板】鳍征；
4.Vue實(shí)例和容器是一一對(duì)應(yīng)的；
5.真實(shí)開(kāi)發(fā)中只有一個(gè)Vue實(shí)例面徽，并且會(huì)配合著組件一起使用艳丛；
6.{{xxx}}中的xxx要寫js表達(dá)式匣掸，且xxx可以自動(dòng)讀取到data中的所有屬性；
7.一旦data中的數(shù)據(jù)發(fā)生改變氮双，那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新碰酝；

 注意區(qū)分：js表達(dá)式 和 js代碼(語(yǔ)句)
        1.表達(dá)式：一個(gè)表達(dá)式會(huì)產(chǎn)生一個(gè)值，可以放在任何一個(gè)需要值的地方：
            (1). a
            (2). a+b
            (3). demo(1)
            (4). x === y ? 'a' : 'b'
        2.js代碼(語(yǔ)句)
            (1). if(){}
            (2). for(){}

Vue的屬性el：el用于指定當(dāng)前Vue實(shí)例為哪個(gè)容器服務(wù)戴差，值通常為css選擇器字符串送爸。

Vue模板語(yǔ)法

Vue模板語(yǔ)法有2大類：
        1.插值語(yǔ)法：
                功能：用于解析標(biāo)簽體內(nèi)容。
                寫法：{{xxx}}暖释，xxx是js表達(dá)式袭厂，且可以直接讀取到data中的所有屬性。
        2.指令語(yǔ)法：
                功能：用于解析標(biāo)簽（包括：標(biāo)簽屬性球匕、標(biāo)簽體內(nèi)容纹磺、綁定事件.....）。
                舉例：v-bind:href="xxx" 或  簡(jiǎn)寫為 :href="xxx"谐丢，xxx同樣要寫js表達(dá)式，
                            且可以直接讀取到data中的所有屬性蚓让。

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

Vue中有2種數(shù)據(jù)綁定的方式：
1.單向綁定(v-bind)：數(shù)據(jù)只能從data流向頁(yè)面乾忱。
2.雙向綁定(v-model)：數(shù)據(jù)不僅能從data流向頁(yè)面，還可以從頁(yè)面流向data历极。
備注：
1.雙向綁定一般都應(yīng)用在表單類元素上（如：input窄瘟、select等）
2.v-model:value 可以簡(jiǎn)寫為 v-model，因?yàn)関-model默認(rèn)收集的就是value值趟卸。

el與data

 data與el的2種寫法
        1.el有2種寫法
                        (1).new Vue時(shí)候配置el屬性蹄葱。
                        (2).先創(chuàng)建Vue實(shí)例，隨后再通過(guò)vm.$mount('#root')指定el的值锄列。
        2.data有2種寫法
                        (1).對(duì)象式
                        (2).函數(shù)式
                        如何選擇：目前哪種寫法都可以图云，以后學(xué)習(xí)到組件時(shí)，data必須使用函數(shù)式邻邮，否則會(huì)報(bào)錯(cuò)竣况。
        3.一個(gè)重要的原則：
                        由Vue管理的函數(shù)，一定不要寫箭頭函數(shù)筒严，一旦寫了箭頭函數(shù)丹泉，this就不再是Vue實(shí)例了。

Vue中的MVVM

MVVM模型
1. M：模型(Model) ：data中的數(shù)據(jù)
2. V：視圖(View) ：模板代碼
3. VM：視圖模型(ViewModel)：Vue實(shí)例
觀察發(fā)現(xiàn)：
1.data中所有的屬性鸭蛙，最后都出現(xiàn)在了vm身上摹恨。
2.vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用娶视。

Object.defineproperty方法

    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true, //控制屬性是否可以枚舉晒哄，默認(rèn)值是false
        // writable:true, //控制屬性是否可以被修改，默認(rèn)值是false
        // configurable:true //控制屬性是否可以被刪除，默認(rèn)值是false

        //當(dāng)有人讀取person的age屬性時(shí)揩晴，get函數(shù)(getter)就會(huì)被調(diào)用勋陪，且返回值就是age的值
        get(){
            console.log('有人讀取age屬性了')
            return number
        },

        //當(dāng)有人修改person的age屬性時(shí)，set函數(shù)(setter)就會(huì)被調(diào)用硫兰，且會(huì)收到修改的具體值
        set(value){
            console.log('有人修改了age屬性诅愚，且值是',value)
            number = value
        }

    })

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

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

Vue中的數(shù)據(jù)代理

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

Vue中的事件

事件的基本使用：
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)" 效果一致邪驮，但后者可以傳參；

事件修飾符

Vue中的事件修飾符：
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í)行完畢草巡；

鍵盤事件

1.Vue中常用的按鍵別名：
回車 => enter
刪除 => delete (捕獲“刪除”和“退格”鍵)
退出 => esc
空格 => space
換行 => tab (特殊磷斧，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

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

3.系統(tǒng)修飾鍵（用法特殊）：ctrl弛饭、alt、shift萍歉、meta
(1).配合keyup使用：按下修飾鍵的同時(shí)侣颂，再按下其他鍵，隨后釋放其他鍵枪孩，事件才被觸發(fā)憔晒。
(2).配合keydown使用：正常觸發(fā)事件藻肄。

4.也可以使用keyCode去指定具體的按鍵（不推薦，鍵碼不統(tǒng)一）

5.Vue.config.keyCodes.自定義鍵名 = 鍵碼拒担，可以去定制按鍵別名（不推薦）

計(jì)算屬性

問(wèn)題引入：實(shí)現(xiàn)組合屬性的輸出嘹屯，如fullname
①插值語(yǔ)法實(shí)現(xiàn)

<body>
    <!-- 準(zhǔn)備好一個(gè)容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/>
        名：<input type="text" v-model="lastName"> <br/><br/>
        全名：<span>{{firstName}}-{{lastName}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。

    new Vue({
        el:'#root',
        data:{
            firstName:'張',
            lastName:'三'
        }
    })
</script>

②methods創(chuàng)建函數(shù)實(shí)現(xiàn)

<body>
    <!-- 準(zhǔn)備好一個(gè)容器-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/>
        名：<input type="text" v-model="lastName"> <br/><br/>
        全名：<span>{{fullName()}}</span>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示从撼。

    new Vue({
        el:'#root',
        data:{
            firstName:'張',
            lastName:'三'
        },
        methods: {
            fullName(){
                console.log('@---fullName')
                return this.firstName + '-' + this.lastName
            }
        },
    })
</script>

③計(jì)算屬性computed實(shí)現(xiàn)
計(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ā)生改變梅桩。
補(bǔ)充：計(jì)算屬性的簡(jiǎn)寫
僅當(dāng)只考慮讀取該計(jì)算屬性而不考慮修改時(shí)才能使用簡(jiǎn)寫

    computed:{
        //完整寫法
        /* fullName:{
            get(){
                console.log('get被調(diào)用了')
                return this.firstName + '-' + this.lastName
            },
            set(value){
                console.log('set',value)
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        } */
        //簡(jiǎn)寫
        fullName(){
            console.log('get被調(diào)用了')
            return this.firstName + '-' + this.lastName
        }
    }

注意：調(diào)用時(shí)fullName只是看作一個(gè)屬性且屬性值為該函數(shù)的返回值

全名：<span>{{fullName}}</span> <br/><br/>//這里的fullName不能寫成fullName()

監(jiān)視屬性

監(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)視

深度監(jiān)視

深度監(jiān)視：
(1).Vue中的watch默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變（一層）。
(2).配置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)視痊焊。

immediate屬性

immediate:true, //初始化時(shí)讓handler調(diào)用一下，默認(rèn)為false

計(jì)算屬性和監(jiān)視屬性的區(qū)別

computed和watch之間的區(qū)別：
1.computed能完成的功能忿峻，watch都可以完成薄啥。
2.watch能完成的功能，computed不一定能完成逛尚，例如：watch可以進(jìn)行異步操作垄惧。
兩個(gè)重要的小原則：
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ì)象。

條件渲染

條件渲染：
1.v-if
寫法：
(1).v-if="表達(dá)式"
(2).v-else-if="表達(dá)式"
(3).v-else="表達(dá)式"
適用于：切換頻率較低的場(chǎng)景锰茉。
特點(diǎn)：不展示的DOM元素直接被移除呢蔫。
注意：v-if可以和:v-else-if、v-else一起使用飒筑，但要求結(jié)構(gòu)不能被“打斷”片吊。
2.v-show
寫法：v-show="表達(dá)式"
適用于：切換頻率較高的場(chǎng)景。
特點(diǎn)：不展示的DOM元素未被移除协屡，僅僅是使用樣式隱藏掉
3.備注：使用v-if的時(shí)俏脊，元素可能無(wú)法獲取到，而使用v-show一定可以獲取到肤晓。
補(bǔ)充：template標(biāo)簽： template只能與v-if配合使用爷贫，功能是不改變dom結(jié)構(gòu)

        <!-- v-if與template的配合使用 -->
        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>

列表渲染

v-for

v-for指令:
1.用于展示列表數(shù)據(jù)
2.語(yǔ)法：v-for="(item, index) in xxx" :key="yyy"
3.可遍歷：數(shù)組、對(duì)象补憾、字符串（用的很少）漫萄、指定次數(shù)（用的很少）

key的內(nèi)部原理

面試題：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)題的教硫。

列表過(guò)濾

          <!-- 準(zhǔn)備好一個(gè)容器-->
    <div id="root">
        <h2>人員列表</h2>
        <input type="text" placeholder="請(qǐng)輸入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false        
        //用watch實(shí)現(xiàn)
        //#region 
        /* new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'馬冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰倫',age:21,sex:'男'},
                    {id:'004',name:'溫兆倫',age:22,sex:'男'}
                ],
                filPerons:[]
            },
            watch:{
                keyWord:{
                    immediate:true,
                    handler(val){
                        this.filPerons = this.persons.filter((p)=>{
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        }) */
        //#endregion            
        //用computed實(shí)現(xiàn)
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'馬冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰倫',age:21,sex:'男'},
                    {id:'004',name:'溫兆倫',age:22,sex:'男'}
                ]
            },
            computed:{
                filPerons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        }) 
    </script>

Vue的數(shù)據(jù)監(jiān)測(cè)

Vue監(jiān)視數(shù)據(jù)的原理：
1. vue會(huì)監(jiān)視data中所有層次的數(shù)據(jù)叨吮。
2. 如何監(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)
3. 如何監(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è)面杠步。
4.在Vue修改數(shù)組中的某個(gè)元素一定要用如下方法：
1.使用這些API:push()、pop()榜轿、shift()幽歼、unshift()、splice()谬盐、sort()甸私、reverse()
2.Vue.set() 或 vm.set() 不能給vm 或 vm的根數(shù)據(jù)對(duì)象 添加屬性！７煽皇型！

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

收集表單數(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ù)組
備注：v-model的三個(gè)修飾符：
lazy：失去焦點(diǎn)(光標(biāo))再收集數(shù)據(jù)
number：輸入字符串轉(zhuǎn)為有效的數(shù)字
trim：輸入首尾空格過(guò)濾

過(guò)濾器

過(guò)濾器：
定義：對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡(jiǎn)單邏輯的處理）喊积。
語(yǔ)法：
1.注冊(cè)過(guò)濾器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用過(guò)濾器：{{ xxx | 過(guò)濾器名}} 或 v-bind:屬性 = "xxx | 過(guò)濾器名"
備注：
1.過(guò)濾器也可以接收額外參數(shù)烹困、多個(gè)過(guò)濾器也可以串聯(lián)
2.并沒(méi)有改變?cè)镜臄?shù)據(jù), 是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

指令合集

我們學(xué)過(guò)的指令：
v-bind : 單向綁定解析表達(dá)式, 可簡(jiǎn)寫為 :xxx
v-model : 雙向數(shù)據(jù)綁定
v-for : 遍歷數(shù)組/對(duì)象/字符串
v-on : 綁定事件監(jiān)聽(tīng), 可簡(jiǎn)寫為@
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)是否展示)

補(bǔ)充

①v-text指令：
1.作用：向其所在的節(jié)點(diǎn)中渲染文本內(nèi)容。
2.與插值語(yǔ)法的區(qū)別：v-text會(huì)替換掉節(jié)點(diǎn)中的內(nèi)容乾吻，{{xx}}則不會(huì)韭邓。

②v-html指令：
1.作用：向指定節(jié)點(diǎn)中渲染包含html結(jié)構(gòu)的內(nèi)容。
2.與插值語(yǔ)法的區(qū)別：
(1).v-html會(huì)替換掉節(jié)點(diǎn)中所有的內(nèi)容溶弟，{{xx}}則不會(huì)女淑。
(2).v-html可以識(shí)別html結(jié)構(gòu)。
3.嚴(yán)重注意：v-html有安全性問(wèn)題９加Ｑ寄恪！擒权！
(1).在網(wǎng)站上動(dòng)態(tài)渲染任意HTML是非常危險(xiǎn)的袱巨，容易導(dǎo)致XSS攻擊。
(2).一定要在可信的內(nèi)容上使用v-html碳抄，永不要用在用戶提交的內(nèi)容上愉老！

③v-cloak指令（沒(méi)有值）：
1.本質(zhì)是一個(gè)特殊屬性，Vue實(shí)例創(chuàng)建完畢并接管容器后剖效，會(huì)刪掉v-cloak屬性嫉入。
2.使用css配合v-cloak可以解決網(wǎng)速慢時(shí)頁(yè)面展示出{{xxx}}的問(wèn)題。

④v-pre指令：
1.跳過(guò)其所在節(jié)點(diǎn)的編譯過(guò)程璧尸。
2.可利用它跳過(guò)：沒(méi)有使用指令語(yǔ)法咒林、沒(méi)有使用插值語(yǔ)法的節(jié)點(diǎn)，會(huì)加快編譯爷光。

⑤v-once指令：
1.v-once所在節(jié)點(diǎn)在初次動(dòng)態(tài)渲染后垫竞，就視為靜態(tài)內(nèi)容了。
2.以后數(shù)據(jù)的改變不會(huì)引起v-once所在結(jié)構(gòu)的更新蛀序，可以用于優(yōu)化性能欢瞪。

自定義指令點(diǎn)活烙。

自定義指令總結(jié)：

    一、定義語(yǔ)法：
                (1).局部指令：
                            new Vue({                                                           new Vue({
                                directives:{指令名:配置對(duì)象}   或           directives{指令名:回調(diào)函數(shù)}
                            })                                                                      })
                (2).全局指令：
                                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命名抒巢。

生命周期

生命周期.png

非單文件組件

Vue中使用組件的三大步驟：

    一贫贝、定義組件(創(chuàng)建組件)
    二、注冊(cè)組件
    三蛉谜、使用組件(寫組件標(biāo)簽)

一稚晚、如何定義一個(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)。

二驱负、如何注冊(cè)組件嗦玖？
1.局部注冊(cè)：靠new Vue的時(shí)候傳入components選項(xiàng)
2.全局注冊(cè)：靠Vue.component('組件名',組件)

三、編寫組件標(biāo)簽：
<school></school>

幾個(gè)注意點(diǎn)：

1.關(guān)于組件名:
一個(gè)單詞組成：
第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School（推薦）
多個(gè)單詞組成：
第一種寫法(kebab-case命名)：my-school
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
(1).組件名盡可能回避HTML中已有的元素名稱电媳，例如：h2踏揣、H2都不行庆亡。
(2).可以使用name配置項(xiàng)指定組件在開(kāi)發(fā)者工具中呈現(xiàn)的名字匾乓。
2.關(guān)于組件標(biāo)簽:
第一種寫法：<school></school>
第二種寫法：<school/>
備注：不用使用腳手架時(shí)，<school/>會(huì)導(dǎo)致后續(xù)組件不能渲染又谋。
3.一個(gè)簡(jiǎn)寫方式：
const school = Vue.extend(options) 可簡(jiǎn)寫為：const school = options

組件的嵌套

在父組件的components配置項(xiàng)中注冊(cè)子組件

組件嵌套

關(guān)于VueComponent：

1.school組件本質(zhì)是一個(gè)名為VueComponent的構(gòu)造函數(shù)拼缝，且不是程序員定義的娱局，是Vue.extend生成的。
2.我們只需要寫<school/>或<school></school>咧七，Vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)例對(duì)象衰齐，
即Vue幫我們執(zhí)行的：new VueComponent(options)。
3.特別注意：每次調(diào)用Vue.extend继阻，返回的都是一個(gè)全新的VueComponent３芴巍！Ｎ灵荨抹缕！
4.關(guān)于this指向：
(1).組件配置中：
data函數(shù)、methods中的函數(shù)墨辛、watch中的函數(shù)卓研、computed中的函數(shù) 它們的this均是【VueComponent實(shí)例對(duì)象】。
(2).new Vue(options)配置中：
data函數(shù)睹簇、methods中的函數(shù)奏赘、watch中的函數(shù)、computed中的函數(shù) 它們的this均是【Vue實(shí)例對(duì)象】太惠。
5.VueComponent的實(shí)例對(duì)象磨淌，以后簡(jiǎn)稱vc（也可稱之為：組件實(shí)例對(duì)象）。
Vue的實(shí)例對(duì)象凿渊，以后簡(jiǎn)稱vm伦糯。

一個(gè)重要的內(nèi)置關(guān)系

1.一個(gè)重要的內(nèi)置關(guān)系：VueComponent.prototype.proto === Vue.prototype
2.為什么要有這個(gè)關(guān)系：讓組件實(shí)例對(duì)象（vc）可以訪問(wèn)到 Vue原型上的屬性、方法嗽元。

單文件組件

寫成單文件組件形式

main.js(入口文件)

import App from './App.vue'
new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{App},
})

index.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>練習(xí)一下單文件組件的語(yǔ)法</title>
    </head>
    <body>
        <!-- 準(zhǔn)備一個(gè)容器 -->
        <div id="root"></div>
        <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
        <!-- <script type="text/javascript" src="./main.js"></script> -->
    </body>
</html>

APP.vue

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    //引入組件
    import School from './School.vue'
    import Student from './Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

School.vue組件

<template>
    <div class="demo">
        <h2>學(xué)校名稱：{{name}}</h2>
        <h2>學(xué)校地址：{{address}}</h2>
        <button @click="showName">點(diǎn)我提示學(xué)校名</button>  
    </div>
</template>

<script>
    export default {
        name:'School',
        data(){
            return {
                name:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    .demo{
        background-color: orange;
    }
</style>

Student.vue

<template>
    <div>
        <h2>學(xué)生姓名：{{name}}</h2>
        <h2>學(xué)生年齡：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return {
                name:'張三',
                age:18
            }
        }
    }
</script>