vue基礎(chǔ)知識(shí)

一、vue 基礎(chǔ)介紹

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

對(duì)MVVM的理解

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

  • 數(shù)據(jù)會(huì)綁定到viewModel層并自動(dòng)將數(shù)據(jù)渲染到頁(yè)面中，視圖變化的時(shí)候會(huì)通知viewModel層更新數(shù)據(jù)

image.png

1. vue起步

1.1 安裝Vue

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

  2. CDN

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

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

1.2 HelloWorld

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

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

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

<div id="app">
    <!-- 在視圖里使用Vue實(shí)例中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實(shí)例的選項(xiàng)

el

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

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

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

  • 其值為可以一個(gè)對(duì)象

  • 可以直接通過(guò) VM 實(shí)例訪問(wèn)這些方法，或者在指令表達(dá)式中使用。

  • 方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。

代碼演示
<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實(shí)例所管理的視圖,值通常是id選擇器
        // 1. el的值可以是css選擇器,通常是id選擇器
        // 2. el的值不能是html標(biāo)簽和body標(biāo)簽

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

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

2. vue 常見(jiàn)術(shù)語(yǔ)解釋

插值表達(dá)式

作用:會(huì)將綁定的數(shù)據(jù)實(shí)時(shí)的顯示出來(lái):

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

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

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

    <div id="app">
        <!-- 在插值表達(dá)式中可以訪問(wèn)vm實(shí)例中data里面的屬性 -->
        {{message}}
        <p>{{message}}</p>
        <p>{{message+'啦啦啦'}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{message.split("")}}</p>
        
        <!-- 在插值表達(dá)式中不能寫(xiě)js語(yǔ)句 -->
        <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á)式中不能寫(xiě)js語(yǔ)句, 如var a = 10;

指令

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

指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(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)事件處于點(diǎn)擊狀態(tài)時(shí),出發(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:更新整個(gè)標(biāo)簽中的內(nèi)容(只顯示文本)

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

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

 <!-- v-html指令的值(包括標(biāo)簽字符串)會(huì)替換掉標(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 只是簡(jiǎn)單地切換元素的 CSS property display。

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

3.3 v-on

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

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

  • 修飾符

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

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

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

簡(jiǎn)寫(xiě): @事件名.修飾符 = 'methods中的方法名'

<div id="app">
 <!-- v-on.xx事件名='當(dāng)觸發(fā)xx事件時(shí)執(zhí)行的語(yǔ)句' -->
 <!-- 執(zhí)行一段js語(yǔ)句:可以使用data中的屬性 -->
 <button v-on:click="count += 1">增加 1</button>
 <!-- v-on的簡(jiǎn)寫(xiě)方法 -->
 <button @click="count += 1">增加 1</button>
 <!-- 執(zhí)行一個(gè)方法 -->
 <button @click="add">增加 1</button>
 <!-- 執(zhí)行一個(gè)方法、這種寫(xiě)法可以傳形參 -->
 <button @click="fn1(count)">執(zhí)行fn1方法</button>
 <!-- 執(zhí)行一個(gè)方法、這種寫(xiě)法可以傳形參,特殊的形參$event -->
 <button @click="fn2($event)">執(zhí)行fn2方法</button>
 <!-- v-on修飾符 如 once: 只執(zhí)行一次 -->
 <button @click.once="fn4">只執(zhí)行一次</button>
?
 <p>上面的按鈕被點(diǎn)擊了 {{ 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 把一個(gè)數(shù)組對(duì)應(yīng)為一組元素

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

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

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

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

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

<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 還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。

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

還可以用第三個(gè)參數(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)簽上的任何屬性。

可以簡(jiǎn)化為 :，簡(jiǎn)化語(yǔ)法更常用 。

如：

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以簡(jiǎn)化為 :，簡(jiǎn)化語(yǔ)法更常用 -->
<div :class="{active: isActive}">
</div>

3.5.1 綁定 HTML Class

對(duì)象語(yǔ)法和數(shù)組語(yǔ)法。

對(duì)象語(yǔ)法

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

 .active {
            color: red;
 }

 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">點(diǎn)擊切換類名</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ù)組語(yǔ)法

渲染的結(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

對(duì)象語(yǔ)法和數(shù)組語(yǔ)法。

對(duì)象語(yǔ)法

渲染的結(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ù)組語(yǔ)法
<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

作用: 表單元素的綁定

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

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

綁定文本框

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

 <div id="app">
        <p>{{message}}</p>
        <input type='text' v-model='message'>
        <hr>
        <!-- v-model其實(shí)是語(yǔ)法糖,它是下面這種寫(xiě)法的簡(jiǎn)寫(xiě) -->
        <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á)式 無(wú)效 {{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á)式 無(wú)效

綁定復(fù)選框

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

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

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

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

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

 <!-- 多個(gè)復(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="">請(qǐng)選擇</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. 計(jì)算屬性和偵聽(tīng)器

計(jì)算屬性computed

  • 計(jì)算屬性:是Vue實(shí)例的一個(gè)選項(xiàng) computed:{}
  • 作用:在計(jì)算屬性中去處理data里的數(shù)據(jù)
  • 使用場(chǎng)景:任何復(fù)雜邏輯，都應(yīng)當(dāng)使用計(jì)算屬性
  • 本質(zhì): 計(jì)算屬性的其實(shí)就是一個(gè)屬性,用法和data中的屬性一樣,但計(jì)算屬性的值是一個(gè)帶有返回值的方法
  • 當(dāng)data中的屬性一發(fā)生變化, 會(huì)自動(dòng)調(diào)用計(jì)算屬性的方法。
<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>

偵聽(tīng)屬性watch

  • 觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)
  • 需要在data中先定義好要監(jiān)聽(tīng)的屬性
<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)用場(chǎng)景

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

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

watch 沒(méi)有緩存，監(jiān)聽(tīng)某一個(gè)值，變化時(shí)進(jìn)行一些操作

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

5.組件基礎(chǔ)

什么是組件？

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

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

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

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

組件的使用

  1. 注冊(cè)組件
  2. 通過(guò)組件名字使用組件

全局注冊(cè)一個(gè)組件：

  // 1.定義一個(gè)名為 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>`
})

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

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

組件通信

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

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

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

步驟:

  1. 在子組件中通過(guò)props聲明自定義屬性，如'slap'
  2. 注冊(cè)局部組件(全局注冊(cè)可忽略)
  3. 使用子組件時(shí),設(shè)置props選項(xiàng), 通過(guò)自定義屬性獲取父組件的值
 <div id="app">
      <!-- 3. 使用子組件時(shí),通過(guò)動(dòng)態(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.在定義的模板中使用通過(guò)props聲明自定義屬性，如'slap'
      template:` <div><h3> 我是一個(gè)子組件，下面這行文字是來(lái)自父組件的</h3>
        <p> {{slap}}</p>        
        </div>`,

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

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

 <div id="app">
 <!-- 2. 使用子組件時(shí),通過(guò)綁定自定義函數(shù)名to-parent-func向父組件的函數(shù)getMsg傳值，即可處理來(lái)自子組件的值--> 
    <child  @to-parent-func="getMsg"></child>
    <h3>下面會(huì)顯示一條來(lái)自子組件的值:</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"> 點(diǎn)我就可向父組件傳值</button>      
        </div>`,
     methods:{
          sendMsg:function(){
 //1. 通過(guò)$emit函數(shù)傳入第一個(gè)參數(shù)，名為'to-parent-func'的自定義函數(shù)名,第二個(gè)參數(shù)是傳給父組件的值
            this.$emit('to-parent-func','hello,父組件，我是一個(gè)可愛(ài)的子組件~')
          }
        }
    })
    var vm = new Vue({
      el: "#app",
      data: {
       msgFromChild:""
      },
      methods:{
          //可在這里處理來(lái)自子組件的值的函數(shù)
        getMsg:function(value){
          this.msgFromChild=value
        }
      }
    })
  </script>

6.生命周期

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

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

二、vue cli 腳手架工具

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

簡(jiǎn)介

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

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

使用步驟

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

  2. 使用node 安裝vue-cli

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

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

  3. 創(chuàng)建項(xiàng)目

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

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

一般會(huì)用到Babel、router、Linter（最好不裝，不然總是報(bào)錯(cuò)）、配置文件，有的會(huì)用到vuex。

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

使用命令行：

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

此時(shí)目錄結(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安裝過(guò)了，在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 看這個(gè)就夠了

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容