本文目錄：

• 1.安裝
• 2.使用vue
• 3.創(chuàng)建vue實(shí)例
• 4.事件處理
• 5.基礎(chǔ)指令
• 6.樣式綁定
• 7.表單輸入
• 8.什么是組件兔辅？
• 9.將組件分離出來-單文件組件
• 10.組件生命周期鉤子函數(shù)

1.安裝

首先創(chuàng)建一個(gè)項(xiàng)目目錄，我這里創(chuàng)建一個(gè)vue-demo的目錄，這個(gè)名字可以自定義您单，但是不要命名為vue 這樣會(huì)沖突
我這里使用命令來創(chuàng)建踢代，如果對(duì)命令不熟悉砾脑，可以直接在webstorm中創(chuàng)建
mkdir vue-demo
然后進(jìn)入到vue-demo目錄,如果使用webstorm創(chuàng)建的話就直接在webstrom中打開teminal兔乞，這樣是默認(rèn)進(jìn)入vue-demo的
cd vue-demo
接下來初始化項(xiàng)目
npm init -y
最后使用npm 安裝vue
npm install vue@2.5.16 --save
因?yàn)槭切“茁铮瑸榱朔乐挂馔鈈ug的出現(xiàn)凄敢，安裝的時(shí)候我們使用@鎖定版本碌冶。

2.使用vue

vue是一個(gè)漸進(jìn)式的框架，so涝缝，我們可以直接在頁面中使用script引用vue的核心js文件扑庞，沒錯(cuò)，不需要任何配置拒逮，就是這么簡(jiǎn)單罐氨！
<script src="node_modules/vue/dist/vue.js"></script>

3.創(chuàng)建vue實(shí)例

通過new Vue函數(shù)創(chuàng)建出一個(gè)新的Vue實(shí)例vm
let vm = new Vue()
可以在創(chuàng)建Vue實(shí)例的時(shí)候傳入相應(yīng)的選項(xiàng)

let vm = new Vue({
    el: '#app'  //id名為app的元素作為應(yīng)用的根節(jié)點(diǎn)
})
console.log(vm.$el)  //這里打印出相應(yīng)的根節(jié)點(diǎn)

符號(hào)開頭的，用來和用戶自定義的屬性區(qū)分開
初始化時(shí)傳入的data屬性，用來存放相關(guān)數(shù)據(jù)租悄，并且這些數(shù)據(jù)是響應(yīng)式的

let vm = new Vue({
    el: '#app',
    data: {
        message: 'hello,nodeing',
        username: 'xiaoqiang'
    }
});

console.log(vm.$data.message)  //hello,nodeing
console.log(vm.$data.username)  //xiaoqiang

強(qiáng)調(diào)一點(diǎn)谨究，vm代理了data的數(shù)據(jù)對(duì)象，效果如下
console.log(vm.$data.message === vm.message)//true
需要注意的是泣棋，只有初始化的時(shí)候胶哲，在選項(xiàng)data中存在的屬性才是響應(yīng)式的
例如，初始化的時(shí)候是這樣的：

let vm = new Vue({
    el: '#app',
    data: {
        message: 'hello,nodeing',
        username: 'xiaoqiang'
    }
});

其中潭辈，data里面并沒有password屬性鸯屿，我們?cè)跒g覽器中增加password屬性，是看不到變化的萎胰。

4.事件處理

監(jiān)聽事件

使用v-on:事件名稱 = '事件處理函數(shù)'的形式來監(jiān)聽事件，事件處理函數(shù)要寫在methods后面的對(duì)象中

<div id="app">
    <button v-on:click="say">按鈕</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data: {
            message:'hello,world'
        },
        methods:{
            say(){
                alert(this.message)
            }
        }
    })
</script>
</body>
</html>

如果事件處理函數(shù)需要傳參數(shù)的話棚辽，可以寫成這樣：

<button v-on:click="say('hello')">按鈕</button>
//實(shí)例中的寫法是這樣的
 methods:{
     say(msg){
         alert(msg)
     }
 }

事件修飾符

事件修飾符是幫助我們?nèi)ヌ幚硎录嚓P(guān)細(xì)節(jié)的技竟，例如，防止事件冒泡屈藐、阻止系統(tǒng)默認(rèn)行為等榔组，以前我們需要使用event.stopPropagation()、event.preventDefault()去實(shí)現(xiàn),在vue中有更簡(jiǎn)潔的使用方式联逻，.stop搓扯、.prevent就可以搞定，這樣在方法中就只需要關(guān)注業(yè)務(wù)邏輯包归，不需要去關(guān)注事件細(xì)節(jié)了
1 .stop修飾符,阻止事件冒泡

<div id="app">
    <div id="box" v-on:click="out">
        <div id="box-inner" v-on:click.stop="inner"></div>
    </div>
</div>

2 .prevent 阻止默認(rèn)行為
<a v-on:click.prevent>百度一下</a>
3 .capture 阻止事件捕獲

<div id="app">
    <div id="box" v-on:click.capture="out">
        <div id="box-inner" v-on:click="inner"></div>
    </div>
</div>

4 .self 事件源是自身的時(shí)候才觸發(fā)

 <div id="box" v-on:click.self="out">
    <div id="box-inner" v-on:click="inner"></div>
</div>

5 .once 事件只觸發(fā)一次

<div id="app">
    <div id="box" v-on:click="out">
        <div id="box-inner" v-on:click.once="inner"></div>
    </div>
</div>

按鍵修飾符

• 1 .enter 回車鍵
• 2 .tab tab鍵盤
• 3 .delete (捕獲“刪除”和“退格”鍵)
• 4 .esc esc鍵
• 5 .space 空格
• 6 .up
• 7 .down
• 8 .left
• 9 .right

使用方法和事件修飾符一樣：
<input type="text" v-on:keyup.enter="fn">

系統(tǒng)修飾符

• .ctrl
• .alt
• .shift
• .meta windows系統(tǒng)對(duì)應(yīng)的是徽標(biāo)鍵

使用方法也和事件修飾符一樣：
<input type="button" value="點(diǎn)擊" v-on:click.shift="fn">

5.基礎(chǔ)指令

什么是指令

指令 (Directives) 是帶有 v- 前綴的特殊特性,指令特性的值預(yù)期是單個(gè) JavaScript 表達(dá)式,指令的職責(zé)是锨推，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響公壤，響應(yīng)式地作用于 DOM
指令换可，可以理解為一種特殊的屬性，以v-開頭
<p v-if="flag">hello nodeing</p>
上面代碼中v-if就是一個(gè)指令厦幅，用來處理?xiàng)l件判斷沾鳄，根據(jù)表達(dá)式的值的真假條件渲染元素

常用的指令

1.v-text和v-html
v-text可以將數(shù)據(jù)文本渲染到標(biāo)簽中，需要注意的是确憨，渲染出來的內(nèi)容只是文本译荞，并不會(huì)解析html標(biāo)簽
<p v-text="message"></p>
v-text的功能和下面這種形式一樣
<p>{{message}}</p>
注意：v-text和{{}}還是有一點(diǎn)差異的，那就是當(dāng)vue的實(shí)例還沒有創(chuàng)建出來的時(shí)候休弃，{{}}模板語法會(huì)顯示為文本吞歼，所以總體v-text體驗(yàn)感更加的好
但是v-text會(huì)覆蓋元素中原本的內(nèi)容，插值表達(dá)式{{ }}只會(huì)替換自己的這個(gè)占位符塔猾，不會(huì)把整個(gè)元素內(nèi)容替換浆熔。
v-html和v-text的區(qū)別是v-html渲染出來的內(nèi)容，html標(biāo)簽是會(huì)被解析的,把上面代碼中的v-text改寫成v-html試試

<p v-text="message"></p>
<p >{{message}}</p>
<p v-html="message"></p>

v-text和v-html的區(qū)別和jQuery中的text()、html()的區(qū)別是類似的
2.v-show
v-show可以根據(jù)表達(dá)式的值切換css的display屬性医增，決定內(nèi)容是否顯示慎皱，需要注意的是，v-show只是單純的切換css的display屬性叶骨，內(nèi)容始終都會(huì)被創(chuàng)建出來的茫多，和if條件渲染不同，if條件渲染是會(huì)銷毀內(nèi)容的
<p v-show="flag">{{message}}</p>
3.v-if忽刽、v-else天揖、v-else-if
這幾個(gè)指令和js語言中的if else類似

<p v-if="num >= 90">非常優(yōu)秀: {{num}}</p>
<p v-else-if="num>=80">良好:{{num}}</p>
<p v-else-if="num>=70">中等:{{num}}</p>
<p v-else-if="num>=60">及格:{{num}}</p>
<p v-else>不及格:{{num}}</p>

4.v-for
v-for指令用來做循環(huán)渲染，需要使用item in items這種特殊的語法跪帝，items表示一個(gè)數(shù)據(jù)源數(shù)組今膊，item表示每一個(gè)被循環(huán)出來的項(xiàng)
注意1： v-for是可以打印出數(shù)組元素的下標(biāo)的,需要寫成下面這樣，第二個(gè)參數(shù)index就表示下標(biāo)

<ul v-for="(item, index) in arr">
       <li>{{item}}-{{index}}</li>
</ul>

注意2: 對(duì)象也是可以被循環(huán)的伞剑，使用方法和上面一樣

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
<!-- 支持第三個(gè)參數(shù) 索引 -->
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

注意3: 可以控制循環(huán)次數(shù)

<ul v-for="n in 10">
    <li>{{n}}</li>
</ul>

注意4: 數(shù)組更新檢測(cè),要讓數(shù)組更新后頁面也跟著渲染斑唬，那么必須使用vue包含的一組觀察數(shù)組的變異方法，例如黎泣，添加一個(gè)數(shù)據(jù) 必須使用push方法恕刘，如果使用this.arr[6] = 7 這種方法是不會(huì)觸發(fā)頁面更新的

let vm = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5, 6],
        },
        methods: {
            fn() {
                // this.arr[6] = 7; 使用這種方法添加元素，頁面不會(huì)更新
                this.arr.push(7)
                console.log(this.arr)
            }
        }
    });

同理抒倚，對(duì)數(shù)組的其他操作褐着，也需要用相關(guān)方法,具體如下：

• push() //往數(shù)組最后添加一個(gè)元素，返回值是變化后的新數(shù)組
• pop() //刪除數(shù)組最后的一個(gè)元素托呕，返回值是刪除掉的元素值
• shift() //刪除數(shù)組的第一個(gè)元素
• unshift() //往數(shù)組的最前面添加一個(gè)元素
• splice() //第一個(gè)參數(shù)表示數(shù)組從下標(biāo)幾開始刪除含蓉，第二參數(shù)代表刪除幾個(gè)元素，如果只寫一個(gè)0项郊，則默認(rèn)為刪除全部谴餐，從第三個(gè)參數(shù)開始，表示添加的元素
• sort() //排序呆抑，參數(shù)中需要傳入排序規(guī)則（函數(shù)）岂嗓，如果不傳，默認(rèn)是字符編碼進(jìn)行排序鹊碍。
  升序：this.arr.sort((a,b)=>{return a>b})
  降序：this.arr.sort((a,b)=>{return a<b})
• reverse() 反轉(zhuǎn)厌殉，能夠反轉(zhuǎn)數(shù)組的順序

上面這些方法執(zhí)行后會(huì)改變?cè)瓉頂?shù)組，這些我們稱為變異方法侈咕，還有一些方法執(zhí)行后總是會(huì)返回一個(gè)新的數(shù)組公罕，并不會(huì)改變?cè)瓉頂?shù)組，這些我們成為非變異方法耀销，對(duì)于非變異方法楼眷，通常需要用返回的這個(gè)新數(shù)組，去替換原來的數(shù)組，例如：用concat() 連接數(shù)組罐柳，需要用新數(shù)組替換原來的數(shù)組掌腰，說白了就是要把執(zhí)行concat后返回的新數(shù)組賦值給原來的數(shù)組，這樣才會(huì)觸發(fā)頁面更新
this.arr = this.arr.concat([9,9,9]);
注意5: 對(duì)象的更新也需要使用具體的方法张吉，如果直接在對(duì)象上添加或刪除屬性齿梁，將不會(huì)觸犯頁面更新，比如this.obj.num = 30這樣直接添加會(huì)生效肮蛹，但是不會(huì)觸發(fā)頁面更新勺择，應(yīng)該使用this.$set(this.obj,'num', 30);

5.v-on
v-on用來添加事件，前面我們已經(jīng)用過很多次了伦忠，這個(gè)指令可以簡(jiǎn)寫省核，我們綁定事件可以寫成下面這樣：
綁定一個(gè)點(diǎn)擊事件：<button @click=‘fn’>點(diǎn)擊</button>
綁定一個(gè)鼠標(biāo)移入事件：<div @mouseover='fn2'>hello</div>

6.v-bind
v-bind用來綁定屬性
綁定一個(gè)href屬性：<a v-bind:href="'http://www.baidu.com'">百度一下</a>
可以簡(jiǎn)寫成下面的形式
<a :href="'http://www.baidu.com'">百度一下</a>

7.v-model
v-model可以在表單控件或者組件上創(chuàng)建雙向綁定
<input type="text" v-model="val" >

8.v-pre
跳過這個(gè)元素和它的子元素的編譯過程±ヂ耄可以用來顯示原始 Mustache 標(biāo)簽气忠。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。通俗的說未桥，加了這個(gè)指令笔刹，元素和它的子元素將不會(huì)被編譯
<span v-pre>{{ message }}</span>

9.v-cloak
隱藏未編譯的Mustache語法標(biāo)簽芥备，直到實(shí)例準(zhǔn)備完畢<p v-cloak>{{message}}</p>
需要配合css

[v-cloak]{
    display: none;
}

注意：當(dāng)需要隱藏的內(nèi)容比較多的時(shí)候冬耿，使用v-cloak，如果內(nèi)容很少的情況萌壳，使用v-text

10.v-once
只渲染元素和組件一次亦镶。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過袱瓮。這可以用于優(yōu)化更新性能缤骨。

6.樣式綁定

綁定class樣式
1.綁定單個(gè)class
<div :class="classBox"></div>
2.綁定多個(gè)樣式
<div :class="[classBox,classBox2,classBox3]"></div>
上面這種方式稱為數(shù)組語法，數(shù)組中的元素也可以使用三元表達(dá)式來計(jì)算：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
3.可以根據(jù)值來確定是否顯示某個(gè)樣式
<div :class="[{box:isActive},classBox2, classBox3]"></div>
當(dāng)isActive為true的時(shí)候尺借，動(dòng)態(tài)添加box樣式绊起，否則此樣式不會(huì)附加在元素上。
4.可以通過判定來實(shí)現(xiàn)樣式的選擇性使用
<div v-bind:class="{ active: type === 'small', 'text-danger': type === 'big' }"></div>
當(dāng) :class 的表達(dá)式過長(zhǎng)或邏輯復(fù)雜時(shí)燎斩，我們可以通過計(jì)算屬性來綁定虱歪，比如在某個(gè)標(biāo)簽中綁定了demoClass變量，將這個(gè)變量定義在computed中

computed: {
    customClasses: function () {
        return {
            display: !this.isHidden,
            'bigger-text': !this.isHidden && this.isBigger
        }
    }
}

綁定style樣式
1.把所有樣式寫到一個(gè)對(duì)象中
<div :style="{width:'100px',height:'100px',backgroundColor:'red'}"></div>

動(dòng)態(tài)綁定樣式也可以不寫在對(duì)象中栅表，像下面這樣不會(huì)報(bào)錯(cuò)笋鄙，但是不推薦。
<div :style="width:100px;height:100px;background-color:red"></div>

注意：上面代碼中需要注意的是對(duì)象寫法中的css中background-color,需要去掉‘-’怪瓶，然后把color首字母大寫萧落，類似的還有fontSize、marginLeft等

2.可以把樣式寫到data中的一個(gè)對(duì)象上，然后渲染到標(biāo)簽上
<div :style="styleObj"></div>

  data: {
     styleObj: {
          width:'100px',
          height:'100px',
          backgroundColor:'green'
   }
}

上面這種寫法比較清晰找岖，推薦把樣式寫到data里面陨倡。

3.可以同時(shí)設(shè)置多個(gè)sytleObj

<div id="app">
    <button @click="fn">點(diǎn)擊</button>
    <div :style="[styleObj, styleObj2, styleObj3]">hello, nodeing</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
                width:'100px',
                height:'100px',
                backgroundColor:'green'
            },
            styleObj2: {
                fontSize: '20px'
            },
            styleObj3: {
                color: 'red'
            }
        }
    });
</script>

4.可以動(dòng)態(tài)綁定具體的屬性值

<div class="zoom_dialog" :style="{top:selftop+'px'}">
props: {
  topPosition:{
    type:Number,
    default:1
  }
}
computed: {
  selftop(){
    return (this.topPosition-1)*325+100
  }
}

案例：循環(huán)渲染li，點(diǎn)擊li實(shí)現(xiàn)動(dòng)態(tài)class變化

①先在data里增加一個(gè)變量宣增，用來儲(chǔ)存當(dāng)前點(diǎn)擊的元素

data() {
    return {
      activeClass: -1, // 0為默認(rèn)選擇第一個(gè)玫膀，-1為不選擇
    };
  },

②在template里面的代碼，切記在@click方法里面要傳index爹脾，
<li :class="activeClass == index ? 'active':''" v-for="(itme,index) in itmeList" :key="index" @click="getItme(index)">{{itme.text}}</li>
③點(diǎn)擊事件：改變data里面activeClass的值

getItme(index) {
   this.activeClass = index;  // 把當(dāng)前點(diǎn)擊元素的index帖旨，賦值給activeClass
},

④在style中寫上 .active 樣式

.active {
  /* background: #eee; */
  color: #1e82d2;
  font-weight: bolder;
}

另外補(bǔ)充一個(gè)快速實(shí)現(xiàn)靜態(tài)數(shù)據(jù)的tab切換的方法

<body>
    <div id="app">
        <ul class="tab-tilte">
            <li @click="cur=0" :class="{active:cur==0}">標(biāo)題一</li>
            <li @click="cur=1" :class="{active:cur==1}">標(biāo)題二</li>
            <li @click="cur=2" :class="{active:cur==2}">標(biāo)題三</li>
            <li @click="cur=3" :class="{active:cur==3}">標(biāo)題四</li>
        </ul>
        <div class="tab-content">
            <div v-show="cur==0">內(nèi)容一</div>
            <div v-show="cur==1">內(nèi)容二</div>
            <div v-show="cur==2">內(nèi)容三</div>
            <div v-show="cur==3">內(nèi)容四</div>
        </div>
    </div>
    <script src="./js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = new Vue({

            el: "#app",
            data: {

                cur:0 //默認(rèn)選中第一個(gè)tab

            }
        });    
    </script>
</body>

7.表單輸入

基礎(chǔ)用法
1.文本
<input type="text" v-model="message" value="hahaha">
注意：此時(shí)，如果再設(shè)置value是不能生效的灵妨，如果有默認(rèn)值解阅，最好在vue實(shí)例中初始化

2.單選框

<input type="radio" v-model="picked" value="男" >
<input type="radio" v-model="picked" value="女" >
<p>選擇：{{picked}}</p>

這樣寫的話，只要單選框被選擇了泌霍，則自動(dòng)會(huì)把value值賦給v-model雙向綁定的數(shù)據(jù)货抄。
3.復(fù)選框

<input type="checkbox" v-model="picked" value="vue" >
<input type="checkbox" v-model="picked" value="react" >
<input type="checkbox" v-model="picked" value="angular" >
<p>選擇：{{picked}}</p>

復(fù)選框中我們選中哪個(gè)，vue就會(huì)自動(dòng)把對(duì)應(yīng)的復(fù)選框中的value值丟到v-model綁定的變量的數(shù)組中朱转。
4.下拉選擇框

<select v-model="selected">
    <option disabled value="">請(qǐng)選擇</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="天津">天津</option>
</select>
<span>Selected: {{ selected }}</span>

被選擇的value值會(huì)被動(dòng)態(tài)的賦值給v-model綁定的值蟹地。

修飾符
1.number 把默認(rèn)為字符串類型的數(shù)字轉(zhuǎn)化為number
比如下面的input，本來獲取到的值默認(rèn)是字符串類型的藤为，通過.number修飾符怪与，message值會(huì)被自動(dòng)轉(zhuǎn)換成數(shù)字類型。
<input type="text" v-model.number="message">
2.trim 去除首尾的空格
<input type="text" v-model.trim="message">

8.什么是組件缅疟？

理解組件

前端組件化開發(fā)是目前非常流行的方式分别，什么是前端組件化開發(fā)呢？就是將頁面的某一部分獨(dú)立出來存淫，將這一部分的數(shù)據(jù)耘斩、視圖没宾、以及一些控制邏輯封裝到一個(gè)組件內(nèi)部轧简，暴露一些開箱即用的函數(shù)或者屬性供外部組件調(diào)用。這種組織代碼的開發(fā)方式我們稱為組件化開發(fā)踏拜。通俗的說岩饼，我們需要把一個(gè)頁面拆分成若干的小單元荚虚，每個(gè)小單元就是一個(gè)小組件。
組件開發(fā)的最大好處就是可以復(fù)用代碼忌愚。
在vue中曲管，所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對(duì)象 (除了一些根級(jí)特有的選項(xiàng)) 并提供相同的生命周期鉤子硕糊。Vue組件帶有一個(gè)名字院水，在根實(shí)例中腊徙，組件被定義為元素使用,下面我們來定義一個(gè)button計(jì)數(shù)器組件

// 定義一個(gè)名為 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€(gè)名字：在這個(gè)例子中是 <button-counter>檬某。我們可以在一個(gè)通過 new Vue 創(chuàng)建的 Vue 根實(shí)例中撬腾，把這個(gè)組件作為自定義元素來使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

data必須是一個(gè)函數(shù)

當(dāng)我們定義這個(gè) <button-counter> 組件時(shí)，你可能會(huì)發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個(gè)對(duì)象：

data: {
  count: 0
}

取而代之的是恢恼，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)民傻，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

data: function () {
  return {
    count: 0
  }
}

9.將組件分離出來-單文件組件

在上面vue組件的學(xué)習(xí)的時(shí)候，我們使用 Vue.component 來定義全局組件场斑，緊接著用 new Vue({ el: '#container '}) 在每個(gè)頁面內(nèi)指定一個(gè)容器元素漓踢，這種方式在小規(guī)模項(xiàng)目中可以運(yùn)行的很好，但在復(fù)雜的項(xiàng)目中就會(huì)有很多缺點(diǎn)漏隐，因此喧半，我們需要學(xué)習(xí)并使用單文件組件。

什么是單文件組件青责？

通俗的說單文件組件就是每個(gè)文件就是一個(gè)組件挺据，把不同的組件放到不同的文件中去，這種文件以.vue結(jié)尾
單文件組件結(jié)構(gòu)

<template>
  <div class="page">
    {{message}}我是首頁
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: 'hello, '
    }
  },
}
</script>
<style scoped>
//scoped可以讓css只能在組件內(nèi)部生效
</style>

實(shí)戰(zhàn)演練

需求：使用單文件組件完成下圖頁面

微信截圖_20191122113249.png

在用vue-cli創(chuàng)建的項(xiàng)目文件夾中的src目錄下寫代碼
1.在src目錄下的components目錄下新建MyHeader.vue文件,添加下面內(nèi)容

<template>
  <div class="page">
      {{ title }}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      title: '這是網(wǎng)頁頭部'
    }
  }
}
</script>
<style>
</style>

2.重復(fù)上一步脖隶，分別添加MyContent.vue文件和MyFooter文件
MyContent.vue

<template>
  <div class="page">
      {{message}}
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '這里是主體內(nèi)容'
    }
  }
}
</script>
<style scoped>
</style>

MyFooter

<template>
  <div class="page">
      {{message}}
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      message: '這里是底部?jī)?nèi)容'
    }
  }
}
</script>
<style scoped>
</style>

3.在src/App.vue文件中添加內(nèi)容

<template>
  <div class="page">
      <router-view></router-view>
      <my-header></my-header>
      <my-content></my-content>
      <my-footer></my-footer>
  </div>
</template>
<script type="text/ecmascript-6">
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter'
export default {
  data () {
    return {
      name: 111
    }
  },
  components: {
    MyHeader,
    MyContent,
    MyFooter
  }
}
</script>
<style scoped>
</style>

@：build文件夾中webpack.base.config.js中的function resolve(dir){ ... }規(guī)定好的一個(gè)路徑扁耐，還有一個(gè)使用規(guī)定了該路徑的使用形式是符號(hào)@

4.運(yùn)行查看效果
在終端里面執(zhí)行命令
npm start

10.組件生命周期鉤子函數(shù)

__1.beforecreate : __
完成實(shí)例初始化，初始化非響應(yīng)式變量
this指向創(chuàng)建的實(shí)例产阱；
可以在這加個(gè)loading事件婉称；
data computed watch methods上的方法和數(shù)據(jù)均不能訪問
2.created
實(shí)例創(chuàng)建完成
完成數(shù)據(jù)(data props computed)的初始化 導(dǎo)入依賴項(xiàng)。
可訪問data computed watch methods上的方法和數(shù)據(jù)
未掛載DOM,不能訪問ref為空數(shù)組
可在這結(jié)束loading心墅，還可以做一些初始化酿矢，實(shí)現(xiàn)函數(shù)自執(zhí)行,
可以對(duì)data數(shù)據(jù)進(jìn)行操作榨乎，可進(jìn)行一些ajax請(qǐng)求怎燥，請(qǐng)求不易過多，避免白屏?xí)r間太長(zhǎng)蜜暑。
若在此階段進(jìn)行的 DOM 操作一定要放在 Vue.nextTick() 的回調(diào)函數(shù)中
3.berofeMount
有了el,編譯了template|/outerHTML
能找到對(duì)應(yīng)的template,并編譯成render函數(shù)
此時(shí)頁面并沒有內(nèi)容
4.mounted
完成創(chuàng)建vm.ref
可在這發(fā)起后端請(qǐng)求肛捍，拿回?cái)?shù)據(jù)隐绵，配合路由鉤子做一些事情；
可對(duì)DOM 進(jìn)行操作
5.beforeUpdate
數(shù)據(jù)更新之前
可在更新前訪問現(xiàn)有的DOM,如手動(dòng)移除添加的事件監(jiān)聽器拙毫；
6.updated :
完成虛擬DOM的重新渲染和打補(bǔ)兑佬怼；
組件DOM 已完成更新缀蹄；
可執(zhí)行依賴的dom 操作
注意：不要在此函數(shù)中操作數(shù)據(jù)峭跳，會(huì)陷入死循環(huán)的膘婶。
7.activated:
在使用vue-router時(shí)有時(shí)需要使用<keep-alive></keep-alive>來緩存組件狀態(tài)，這個(gè)時(shí)候created鉤子就不會(huì)被重復(fù)調(diào)用了蛀醉，
如果我們的子組件需要在每次加載的時(shí)候進(jìn)行某些操作悬襟，可以使用activated鉤子觸發(fā)
__8.deactivated __
keep-alive 組件被移除時(shí)使用
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)拯刁，避免重新渲染.
__9.beforeDestroy： __
在執(zhí)行app.$destroy()之前
可做一些刪除提示脊岳，如：你確認(rèn)刪除XX嗎？
可用于銷毀定時(shí)器垛玻，解綁全局時(shí)間 銷毀插件對(duì)象
10.destroyed ：
當(dāng)前組件已被刪除割捅，銷毀監(jiān)聽事件 組件 事件 子實(shí)例也被銷毀
這時(shí)組件已經(jīng)沒有了，無法操作里面的任何東西了帚桩。
11. errorCaptured
當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用棺牧。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串朗儒。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播颊乘。