vue基礎(chǔ)知識

一、vue 基礎(chǔ)介紹

是一套用于構(gòu)建用戶界面的漸進(jìn)式框架逞盆，Vue 的核心庫只關(guān)注視圖層（MVVM），最大程度上解放了 DOM 操作屋确，Vue主要實現(xiàn)的是VM層纳击。

對MVVM的理解

  • Model-View-ViewModel的縮寫续扔，Model代表數(shù)據(jù)模型，View代表UI組件,ViewModel將Model和View關(guān)聯(lián)起來

  • 數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中焕数，視圖變化的時候會通知viewModel層更新數(shù)據(jù)

image.png

1. vue起步

1.1 安裝Vue

  1. 直接下載源碼然后通過路徑引入

  2. CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. 使用 npm 下載（默認(rèn)安裝最新穩(wěn)定版) 然后通過路徑引入
npm init -y
npm i vue

Vue.js 不支持 IE8 及其以下版本

1.2 HelloWorld

作用:將數(shù)據(jù)應(yīng)用在html頁面中

1. body中,設(shè)置Vue管理的視圖<div id="app"></div>
2. 引入vue.js
3. 實例化Vue對象new Vue({選項:值});
4. 設(shè)置Vue實例的選項:如el纱昧、data...       
5. 在<div id='app'></div>中通過{{ }}使用data中的數(shù)據(jù)

<!-- 我是Vue所管理的視圖div#app -->

<div id="app">
    <!-- 在視圖里使用Vue實例中data里面的msg數(shù)據(jù) -->
    <p>{{msg}}</p>
</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var vm= new Vue({
        el: '#app',
        data: {
           msg: 'Hello Vue'
        }
    })
</script>

1.3 Vue實例的選項

el

  • 作用:當(dāng)前Vue實例所管理的html視圖

  • 值:通常是id選擇器(或者是一個 HTMLElement 實例)

data
  • Vue 實例的數(shù)據(jù)對象，是響應(yīng)式數(shù)據(jù)(數(shù)據(jù)驅(qū)動視圖)
methods

  • 其值為可以一個對象

  • 可以直接通過 VM 實例訪問這些方法堡赔，或者在指令表達(dá)式中使用识脆。

  • 方法中的 this 自動綁定為 Vue 實例。

代碼演示
<div id="a">
    {{msgA}} -- {{fn1()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        // el作用:指定當(dāng)前Vue實例所管理的視圖,值通常是id選擇器
        // 1. el的值可以是css選擇器,通常是id選擇器
        // 2. el的值不能是html標(biāo)簽和body標(biāo)簽

        el: '#a',
        // data作用:指定當(dāng)前Vue實例的數(shù)據(jù)對象
        // 1. data中的數(shù)據(jù)是響應(yīng)式數(shù)據(jù)
        // 2. 值可以是一個對象 {屬性: 值}
        // 3. 所有數(shù)據(jù)部分寫在data中
        // 4. 在當(dāng)前Vue實例所管理的視圖中通過屬性名使用data中的數(shù)據(jù)
        // 5. 可以通過vm.$data.屬性 訪問數(shù)據(jù)
        // 6. 可以通過vm.屬性 訪問數(shù)據(jù)(更簡單)
        data: {
            msgA: '第一個Vue實例對象'
        },
        // methods作用:指定當(dāng)前Vue實例中的方法
        // 1. 可以直接通過vm實例訪問這些方法善已，
        // 2. 方法中的 this 自動綁定為 Vue 實例灼捂。
        // 3. 不推薦使用箭頭函數(shù)
        methods: {
            fn1: function() {
                console.log(this.msgA);
                console.log('vm實例中的methods里的fn1方法被調(diào)用');
            },
            fn2: function() {
                this.fn1();
                console.log('fn2方法被調(diào)用--');
            }
 
        }
    });
    // 調(diào)用fn2方法
    vm.fn2();
</script>

除了以上常用的三個Vue實例選項, 還有很多選項,比如生命周期鉤子函數(shù)，計算屬性等换团。

2. vue 常見術(shù)語解釋

插值表達(dá)式

作用:會將綁定的數(shù)據(jù)實時的顯示出來:

通過任何方式修改所綁定的數(shù)據(jù),所顯示的數(shù)據(jù)都會被實時替換

{{js表達(dá)式悉稠、三目運(yùn)算符、方法調(diào)用等}}

不能寫 var a = 10; 分支語句 循環(huán)語句

    <div id="app">
        <!-- 在插值表達(dá)式中可以訪問vm實例中data里面的屬性 -->
        {{message}}
        <p>{{message}}</p>
        <p>{{message+'啦啦啦'}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{message.split("")}}</p>
        
        <!-- 在插值表達(dá)式中不能寫js語句 -->
        <p>{{var a = 10}}</p>
    </div>
    <!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message屬性的值',
                age: 20
            }
        });
    </script>

插值表達(dá)式中不能寫js語句, 如var a = 10;

指令

指令 (Directives) 是帶有 v- 前綴的特殊特性艘包。

指令的職責(zé)是的猛，當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響想虎，響應(yīng)式地作用于 DOM卦尊。

 <div id="app">
 <p> {{message}}</p>
 <p v-if="seen">現(xiàn)在你看到我了</p>

 <button v-on:click="changeMsg">按鈕</button>

 <!-- v-on就是vue給標(biāo)簽元素提供的擴(kuò)展-指令
 v-on指令就是給標(biāo)簽綁定事件,這里是click,
 當(dāng)事件處于點擊狀態(tài)時,出發(fā)methods中的changeMsg方法
 -->
 </div>
 <!-- 引入vue.js -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 const vm = new Vue({
 el: '#app',
 data: {
 message: '我是data中的message屬性的值',
 seen：'true'
 },
 methods: {
 changeMsg: function() {
 this.message += "啦";
 }
 }
 });
 </script>

3.Vue常用指令

擴(kuò)展了html標(biāo)簽的功能、大部分的指令的值是js的表達(dá)式

取代DOM操作

3.1v-text和v-html

很像innerText和innerHTML

  • v-text:更新整個標(biāo)簽中的內(nèi)容(只顯示文本)

  • v-html:更新標(biāo)簽中的內(nèi)容/標(biāo)簽（可顯示渲染后的html代碼）

 <div id="app">
 <!-- v-text指令的值會替換標(biāo)簽內(nèi)容 -->
 <p>{{str}}</p>
 <p v-text="str">我是p標(biāo)簽中的內(nèi)容</p>

 <!-- v-html指令的值(包括標(biāo)簽字符串)會替換掉標(biāo)簽的內(nèi)容 -->
 <p v-html="strhtml">我是p標(biāo)簽中的內(nèi)容</p>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
 el: '#app',
 data: {
 str: 'abc',
 strhtml: '<h1>content</h1>'
 }
 });
</script>

3.2 v-if和v-show

作用:根據(jù)表達(dá)式的bool值進(jìn)行判斷是否渲染該元素舌厨。

v-if

用于條件性地渲染一塊內(nèi)容岂却。

 <h1 v-if="awesome">Renya is awesome!</h1>
<h1 v-else>Oh no ??</h1>
v-else-if
 <div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else>
 Not A/B/
</div>
v-show

v-show 只是簡單地切換元素的 CSS property display。

<h1 v-show="ok">Hello!</h1>

3.3 v-on

  • 作用:使用 v-on 指令綁定 DOM 事件裙椭，并在事件被觸發(fā)時執(zhí)行一些 JavaScript 代碼躏哩。

  • 語法: v-on:事件名.修飾符 = "methods中的方法名"

  • 修飾符

    • .once - 只觸發(fā)一次回調(diào)。

    • .prevent - 調(diào)用 event.preventDefault()骇陈。

    • .enter - 只有在 key 是 Enter 時調(diào)用

簡寫: @事件名.修飾符 = 'methods中的方法名'

<div id="app">
 <!-- v-on.xx事件名='當(dāng)觸發(fā)xx事件時執(zhí)行的語句' -->
 <!-- 執(zhí)行一段js語句:可以使用data中的屬性 -->
 <button v-on:click="count += 1">增加 1</button>
 <!-- v-on的簡寫方法 -->
 <button @click="count += 1">增加 1</button>
 <!-- 執(zhí)行一個方法 -->
 <button @click="add">增加 1</button>
 <!-- 執(zhí)行一個方法震庭、這種寫法可以傳形參 -->
 <button @click="fn1(count)">執(zhí)行fn1方法</button>
 <!-- 執(zhí)行一個方法瑰抵、這種寫法可以傳形參,特殊的形參$event -->
 <button @click="fn2($event)">執(zhí)行fn2方法</button>
 <!-- v-on修飾符 如 once: 只執(zhí)行一次 -->
 <button @click.once="fn4">只執(zhí)行一次</button>
?
 <p>上面的按鈕被點擊了 {{ count }} 次你雌。</p>
 </div>
 <script src="./vue.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
 count: 0,
 items: ['a', 'b', 'c']
 },
 methods: {
 add: function() {
 this.count += 1;
 },
 fn1: function(count) {
 console.log(count);
 console.log('fn1方法被執(zhí)行');
 },
 fn2: function(e) {
 console.log(e);
 console.log('fn2方法被執(zhí)行');
 },
 fn3: function(index) {
 console.log(index);
 console.log('fn3方法被執(zhí)行');
 },
 fn4: function() {
 console.log('fn4方法被執(zhí)行了');
 }
 }
 });
 </script>

3.4 v-for

用 v-for 把一個數(shù)組對應(yīng)為一組元素

v-for作用:列表渲染,當(dāng)遇到相似的標(biāo)簽結(jié)構(gòu)時,就用v-for去渲染.

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

根據(jù)一組數(shù)組或?qū)ο蟮倪x項列表進(jìn)行渲染。

v-for 指令需要使用 item in items 形式的特殊語法

 (v,k,i)in 對象
 v:值
 k:鍵
 i:對象中每對key-value的索引 從0開始
 注意: v,k,i是參數(shù)名,見名知意即可!

<ul id="example-1">
 <li v-for="item in items" :key="item.message">
 {{ item.message }}
 </li>
</ul>

var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]
 }
})

v-for 還支持一個可選的第二個參數(shù)二汛，即當(dāng)前項的索引婿崭。

<ul id="example-2">  <li v-for="(item, index) in items">  {{ index }} - {{ item.message }}  </li> </ul>

還可以用第三個參數(shù)作為索引：

<div v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
</div>
new Vue({  el: '#v-for-object',  data: {    
object: {     
   title: 'How to do lists in Vue',   
   author: 'Jane Doe',    
   publishedAt: '2016-04-10'    }  } })

3.5 v-bind

作用: 可以綁定標(biāo)簽上的任何屬性。

可以簡化為 :肴颊，簡化語法更常用 氓栈。

如：

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以簡化為 :，簡化語法更常用 -->
<div :class="{active: isActive}">
</div>

3.5.1 綁定 HTML Class

對象語法和數(shù)組語法婿着。

對象語法

如果isActive為true授瘦，則返回的結(jié)果為 <div class="active"></div>

 .active {
            color: red;
 }

 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">點擊切換類名</button>
    </div>

  <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
數(shù)組語法

渲染的結(jié)果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>

3.5.2 綁定內(nèi)聯(lián)樣式style

對象語法和數(shù)組語法醋界。

對象語法

渲染的結(jié)果<div style="color: red; font-size: 18px;"></div>

 <div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
            文本內(nèi)容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>
數(shù)組語法
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

3.6 v-model

作用: 表單元素的綁定

特點: 雙向數(shù)據(jù)綁定

  • v-model 會忽略所有表單元素的 value、checked提完、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源形纺。應(yīng)該在 data選項中聲明初始值。
  • 本質(zhì)是v-bind和v-on的語法糖
<input v-model="sth" />
//  等同于
<input :value="sth" @input="sth = $event.target.value" />

綁定文本框

效果:當(dāng)文本框的值發(fā)生變化后徒欣，div中的內(nèi)容也會發(fā)生變化

 <div id="app">
        <p>{{message}}</p>
        <input type='text' v-model='message'>
        <hr>
        <!-- v-model其實是語法糖,它是下面這種寫法的簡寫 -->
        <input v-bind:value='message' v-on:input='message = $event.target.value' />

    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默認(rèn)值'
            }
        });
    </script>

綁定多行文本框

 <div id="app">
        <textarea v-model="message">
           我是textarea內(nèi)的插值表達(dá)式 無效 {{str}}
        </textarea>
        <div>{{ message }}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默認(rèn)值',
                str: 'str字符串'
            }
        });
    </script>

注意：多行文本框中使用插值表達(dá)式 無效

綁定復(fù)選框

  • 綁定一個復(fù)選框

checked是布爾類型的數(shù)據(jù)

<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>
  • 綁定多個復(fù)選框

    此種方式需要input標(biāo)簽提供value屬性

    v-model綁定的是數(shù)組

 <!-- 多個復(fù)選框  : 需要設(shè)置value屬性值, v-model綁定的是數(shù)組-->
    <div id="app">
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                checkedNames: []
            }
        });
    </script>
  • 綁定單選框

    需要input提供value屬性的值

    <input type="radio" name="sex" value="男" v-model="sex">
<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
</script>
  • 綁定下拉框
    <div id="app">  
<!-- 下拉框 -->
        <select v-model="selected">
            <option disabled value="">請選擇</option>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select> <span> 您選擇的是: {{selected}}</span>
</div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    </script>

4. 計算屬性和偵聽器

計算屬性computed

  • 計算屬性:是Vue實例的一個選項 computed:{}
  • 作用:在計算屬性中去處理data里的數(shù)據(jù)
  • 使用場景:任何復(fù)雜邏輯逐样，都應(yīng)當(dāng)使用計算屬性
  • 本質(zhì): 計算屬性的其實就是一個屬性,用法和data中的屬性一樣,但計算屬性的值是一個帶有返回值的方法
  • 當(dāng)data中的屬性一發(fā)生變化, 會自動調(diào)用計算屬性的方法。
<div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname" >
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               firstname:"",
               lastname:""              
           },
           methods:{
               
           },
            computed:{
                'fullname':function(){
                  return this.firstname+" "+this.lastname;  
                }
            }
        });
    </script>

偵聽屬性watch

  • 觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動
  • 需要在data中先定義好要監(jiān)聽的屬性
<div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname" >
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               firstname:"",
               lastname:"",
               fullname:""
           },
           methods:{
               
           },
           watch:{
               'firstname':function(newVal){
                   this.fullname=newVal+"-"+this.lastname;
               },
               'lastname':function(newVal){
                   this.fullname=this.fn+" +"+newVal;
               }
           }
        });
    </script>

computed 和 watch 的區(qū)別以及應(yīng)用場景

computed 依賴其他的值,且具有緩存,緩存變化才會更新

  • 只有它依賴的屬性值發(fā)生改變打肝，下一次獲取 computed 的值時才會重新計算 進(jìn)行數(shù)值計算脂新，并且依賴于其它數(shù)據(jù)。

watch 沒有緩存粗梭，監(jiān)聽某一個值争便，變化時進(jìn)行一些操作

  • 數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時用。

5.組件基礎(chǔ)

什么是組件断医？

組件系統(tǒng)是 Vue 的另一個重要概念始花，允許我們使用小型、獨立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用孩锡。

幾乎任意類型的應(yīng)用界面都可以抽象為一個組件樹：
img

例如酷宵，你可能會有頁頭、側(cè)邊欄躬窜、內(nèi)容區(qū)等組件浇垦，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件荣挨。

  • 組件是可復(fù)用的 Vue 實例男韧，且?guī)в幸粋€名字
  • 組件的選項:
    • 組件與 new Vue 接收相同的選項:例如 data、computed默垄、watch此虑、methods 以及生命周期鉤子等。
    • 僅有的例外是像 el 這樣根實例特有的選項
  • 另外, 組件也有自己的選項 template口锭，components等
  • 組件的特點：
    • 每用一次組件朦前，就會有一個它的新實例被創(chuàng)建
    • 組件中的data要求必須是一個函數(shù),且需要返回一個對象
    • template 每個組件模板有且只有一個根元素
    • 組件是一種封裝，復(fù)用已有的html鹃操、css韭寸、js

組件的使用

  1. 注冊組件
  2. 通過組件名字使用組件

全局注冊一個組件：

  // 1.定義一個名為 button-counter 的新組件  
Vue.component('button-counter', {
  data: function () {//data為函數(shù)
    return {
      count: 0
    }
  },
  //可以使用模板字符串``
  template: `<button v-on:click="count++">
           You clicked me {{ count }} times.
           </button>`
})

在一個通過 new Vue 創(chuàng)建的 Vue 根實例中使用，作為根實例的子組件：

<div id="app">
       <!-- 2. 通過組件名使用組件 -->
        <!--組件可復(fù)用 -->
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

組件通信

  • 父->子(在子組件中使用父組件數(shù)據(jù)) props : 不可修改 單向數(shù)據(jù)傳遞
  • 子->父(在父組件中使用子組件數(shù)據(jù)) 自定義事件!
父->子(在子組件中使用父組件數(shù)據(jù))

目的: 要在子組件中使用父組件中data中的屬性值

關(guān)鍵點:通過Props給子組件傳值

步驟:

  1. 在子組件中通過props聲明自定義屬性荆隘，如'slap'
  2. 注冊局部組件(全局注冊可忽略)
  3. 使用子組件時,設(shè)置props選項, 通過自定義屬性獲取父組件的值
 <div id="app">
      <!-- 3. 使用子組件時,通過動態(tài)綁定自定義屬性slap 獲取父組件的值,即msg的值 -->
    <child :slap="msg"></child>   
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child',{
      //1.在定義的模板中使用通過props聲明自定義屬性恩伺，如'slap'
      template:` <div><h3> 我是一個子組件，下面這行文字是來自父組件的</h3>
        <p> {{slap}}</p>        
        </div>`,

       //用來接收外部傳過來的數(shù)據(jù)
        props:['slap']
    })
    var vm = new Vue({
      el: "#app",
      data: {
      // 要在子組件中使用父組件的msg的值
       msg:"父組件拍了拍子組件說：'這是我傳給你的值椰拒！' "
      }
    })
  </script>
子->父(在父組件中使用子組件數(shù)據(jù))

子組件通過$emit方法把自己的第一個參數(shù)eventName傳遞給父級晶渠，父級把eventName當(dāng)成一個事件凰荚，觸發(fā)這個事件接收子級傳給自己的數(shù)據(jù)或執(zhí)行操作。

 <div id="app">
 <!-- 2. 使用子組件時,通過綁定自定義函數(shù)名to-parent-func向父組件的函數(shù)getMsg傳值褒脯，即可處理來自子組件的值--> 
    <child  @to-parent-func="getMsg"></child>
    <h3>下面會顯示一條來自子組件的值:</h3>
    <p>{{msgFromChild}}</p>
   
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child',{     
  
      template:` <div> 
        <button @click="sendMsg"> 點我就可向父組件傳值</button>      
        </div>`,
     methods:{
          sendMsg:function(){
 //1. 通過$emit函數(shù)傳入第一個參數(shù)浇揩，名為'to-parent-func'的自定義函數(shù)名,第二個參數(shù)是傳給父組件的值
            this.$emit('to-parent-func','hello,父組件，我是一個可愛的子組件~')
          }
        }
    })
    var vm = new Vue({
      el: "#app",
      data: {
       msgFromChild:""
      },
      methods:{
          //可在這里處理來自子組件的值的函數(shù)
        getMsg:function(value){
          this.msgFromChild=value
        }
      }
    })
  </script>

6.生命周期

初始化 (create)--- 組件掛載(mount)-----組件更新 (update)--- 銷毀(destroy)

生命周期 發(fā)生了什么
beforeCreate 初始化界面前 : 在當(dāng)前階段data憨颠、methods胳徽、computed以及watch上的數(shù)據(jù)和方法都不能被訪問
created 初始化界面后 : 在實例創(chuàng)建完成后發(fā)生，當(dāng)前階段已經(jīng)完成了數(shù)據(jù)觀測爽彤，也就是可以使用數(shù)據(jù)养盗，更改數(shù)據(jù)，在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù),也就是不會更新視圖适篙，SSR可以放這里往核。
beforeMount 掛載前 ：完成模板編譯，虛擬Dom已經(jīng)創(chuàng)建完成嚷节，即將開始渲染聂儒。在此時也可以對數(shù)據(jù)進(jìn)行更改，不會觸發(fā)updated
mounted 掛在完成 ： 將編譯好的模板掛載到頁面 (虛擬DOM掛載) 硫痰，可以在這進(jìn)行異步請求以及DOM節(jié)點的訪問衩婚，在vue用$ref操作
beforeUpdate 更新數(shù)據(jù)前 ： 組件數(shù)據(jù)更新之前調(diào)用，數(shù)據(jù)都是新的,頁面上數(shù)據(jù)都是舊的 組件即將更新,準(zhǔn)備渲染頁面 , 可以在當(dāng)前階段進(jìn)行更改數(shù)據(jù)效斑，不會造成重渲染
updated 組件更新后 ： render重新渲染 , 此時數(shù)據(jù)和界面都是新的 ,要注意的是避免在此期間更改數(shù)據(jù)非春，因為這可能會導(dǎo)致無限循環(huán)的更新
beforeDestroy 組件卸載前 : 實例銷毀之前，在當(dāng)前階段實例完全可以被使用缓屠，我們可以在這時進(jìn)行善后收尾工作奇昙，比如清除計時器
destroyed 組件卸載后 ： 組件已被拆解，數(shù)據(jù)綁定被卸除敌完，監(jiān)聽被移出储耐，子實例也統(tǒng)統(tǒng)被銷毀。
activited keep-alive 專屬 , 組件被激活時調(diào)用
deactivated keep-alive 專屬 , 組件被銷毀時調(diào)用
lifecycle.png

二滨溉、vue cli 腳手架工具

https://cli.vuejs.org/zh/guide/

簡介

可以快速創(chuàng)建vue項目結(jié)構(gòu),而不需要我們一點點的去創(chuàng)建/管理項目所需要的各種文件夾/文件什湘，就像后端使用maven創(chuàng)建項目。

目的： 1.快速管理依賴业踏； 2.可通過vue cli 確定項目結(jié)構(gòu)

使用步驟

  1. 安裝 Node.js 8.9 或更高版本 (推薦 8.11.0+) https://nodejs.org/en/

  2. 使用node 安裝vue-cli

    # 安裝 Vue CLI 腳手架
# 如果已經(jīng)安裝過則不需要
# 這里安裝的是最新版本 3版本
npm install -g @vue/cli

# 執(zhí)行vue --verson查看是否安裝成功禽炬，
# 顯示vue的版本，就是安裝成功了
vue -V

  3. 創(chuàng)建項目

    • 使用命令行
    # 使用腳手架工具初始化項目
vue create hello-world
# 自動或手動選擇一些配置
# 進(jìn)入你初始化好的項目
cd 項目路徑

# 啟動項目
npm run serve
    • 使用圖形化界面勤家，根據(jù)向?qū)渲谩?/li> 
    vue ui

一般會用到Babel、router柳恐、Linter（最好不裝伐脖，不然總是報錯）热幔、配置文件，有的會用到vuex讼庇。

使用圖形化界面就直接搜插件绎巨，安裝即可。

使用命令行：

#安裝babel 插件
vue add babel 
# 安裝路由插件
vue add router
#安裝elementUI蠕啄，選擇按需導(dǎo)入
vue add  element
# 安裝axios依賴
vue add axios

此時目錄結(jié)構(gòu)為：

├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
| ├─App.vue
| ├─main.js
| ├─views
| | ├─About.vue
| | └Home.vue
| ├─router
| | └index.js
| ├─plugins
| | ├─axios.js
| | └element.js
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| ├─favicon.ico
| └index.html

Element UI的使用

上面已經(jīng)使用vue add element安裝過了场勤，在element.js中可按需導(dǎo)入要使用的組件：

  1. import 組件名 from 'element-ui'
  2. Vue.use(組件名)
import {
  Button,
  Tag
} from 'element-ui'

Vue.use(Button)
Vue.use(Tag)

如果是全局引入：

import ElementUI from 'element-ui';
Vue.use(ElementUI);

3.在后綴名為.vue的文件中使用

<el-button>el-button</el-button>
 <el-tag>標(biāo)簽一</el-tag>

三、Vue學(xué)習(xí)視頻推薦

vue2.5入門

學(xué) Vue.js 看這個就夠了

前端基礎(chǔ)必會教程-4個小時帶你快速入門vue

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末歼跟，一起剝皮案震驚了整個濱河市和媳，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌哈街，老刑警劉巖留瞳，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異骚秦，居然都是意外死亡她倘，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門作箍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來硬梁，“玉大人，你說我怎么就攤上這事胞得“辛铮” “怎么了？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵懒震，是天一觀的道長罩息。 經(jīng)常有香客問我，道長个扰，這世上最難降的妖魔是什么瓷炮？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮递宅，結(jié)果婚禮上娘香，老公的妹妹穿的比我還像新娘。我一直安慰自己办龄，他們只是感情好烘绽，可當(dāng)我...
    茶點故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著俐填，像睡著了一般安接。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上英融，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天盏檐，我揣著相機(jī)與錄音歇式，去河邊找鬼。 笑死胡野，一個胖子當(dāng)著我的面吹牛材失，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播硫豆，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼龙巨，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了熊响？” 一聲冷哼從身側(cè)響起旨别，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎耘眨，沒想到半個月后昼榛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡剔难，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年胆屿，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偶宫。...
    茶點故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡非迹，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出纯趋，到底是詐尸還是另有隱情憎兽，我是刑警寧澤，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布吵冒，位于F島的核電站纯命，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏痹栖。R本人自食惡果不足惜亿汞，卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望揪阿。 院中可真熱鬧疗我，春花似錦、人聲如沸南捂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽溺健。三九已至麦牺，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背枕面。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工愿卒， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留缚去，地道東北人潮秘。 一個月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像易结，于是被迫代替她去往敵國和親枕荞。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2贊 344