一、前言

二、Vue常用指令

2.1 什么是指令？

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的預(yù)期值是：單個(gè) JavaScript 表達(dá)式。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。 例如我們?cè)谌腴T案例中的v-on，代表綁定事件。

2.2 插值表達(dá)式

2.2.1.花括號(hào)

格式：

{{表達(dá)式}}

說明：

• 該表達(dá)式支持JS語法，可以調(diào)用js內(nèi)置函數(shù)（必須有返回值）
• 表達(dá)式必須有返回結(jié)果。例如 1 + 1，沒有結(jié)果的表達(dá)式不允許使用，如：var a = 1 + 1;
• 可以直接獲取Vue實(shí)例中定義的數(shù)據(jù)或函數(shù)

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({el:"#app",data:{name:"Jack"} })

2.2.2 插值閃爍

使用{{}}方式在網(wǎng)速較慢時(shí)會(huì)出現(xiàn)問題。在數(shù)據(jù)未加載完成時(shí)，頁面會(huì)顯示出原始的{{}}，加載完畢后才顯示正確數(shù)據(jù)，我們稱為插值閃爍。

我們將網(wǎng)速調(diào)慢一些，然后試試看剛才的案例：

刷新頁面：

2.2.3 v-text和v-html

使用v-text和v-html指令來替代{{}}

說明：

• v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)作為普通文本輸出
• v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)被渲染

示例：

HTML:

<div id="app">v-text:<span v-text="hello"></span> <br/>v-html:<span v-html="hello"></span> </div>

JS:

var vm = new Vue({el:"#app",data:{hello: "<h1>大家好，我是峰哥</h1>"} })

效果：

并且不會(huì)出現(xiàn)插值閃爍，當(dāng)沒有數(shù)據(jù)時(shí)，會(huì)顯示空白。

2.3 v-model指令

剛才的v-text和v-html可以看做是單向綁定，數(shù)據(jù)影響了視圖渲染，但是反過來就不行。接下來學(xué)習(xí)的v-model是雙向綁定，視圖（View）和模型（Model）之間會(huì)互相影響。

既然是雙向綁定，一定是在視圖中可以修改數(shù)據(jù)，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：

• input
• select
• textarea
• checkbox
• radio
• components（Vue中的自定義組件）

基本上除了最后一項(xiàng)，其它都是表單的輸入項(xiàng)。

舉例：

html：

<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你選擇了：{{language.join(',')}}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}}) </script>

• 多個(gè)CheckBox對(duì)應(yīng)一個(gè)model時(shí)，model的類型是一個(gè)數(shù)組，單個(gè)checkbox值默認(rèn)是boolean類型
• radio對(duì)應(yīng)的值是input的value值
• input 和textarea 默認(rèn)對(duì)應(yīng)的model是字符串
• select單選對(duì)應(yīng)字符串，多選對(duì)應(yīng)也是數(shù)組

效果：

2.4 v-on指令

2.4.1 基本用法

v-on指令用于給頁面元素綁定事件。

語法：

v-on:事件名="js片段或函數(shù)名"

示例：

<div id="app"><!--事件中直接寫js片段--><button v-on:click="num++">增加一個(gè)</button><br/><!--事件指定一個(gè)回調(diào)函數(shù)，必須是Vue實(shí)例中定義的函數(shù)--><button v-on:click="decrement">減少一個(gè)</button><br/><h1>有{{num}}個(gè)女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el:"#app",data:{num:100},methods:{decrement(){this.num--;}}}) </script>

另外，事件綁定可以簡寫，例如v-on:click='add'可以簡寫為@click='add'

2.4.2 事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

為了解決這個(gè)問題，Vue.js 為 v-on 提供了事件修飾符。修飾符是由點(diǎn)開頭的指令后綴來表示的。

• .stop ：阻止事件冒泡到父元素
• .prevent：阻止默認(rèn)事件發(fā)生
• .capture：使用事件捕獲模式
• .self：只有元素自身觸發(fā)事件才執(zhí)行。（冒泡或捕獲的都不執(zhí)行）
• .once：只執(zhí)行一次

阻止默認(rèn)事件

<div id="app"><!--右擊事件，并阻止默認(rèn)事件發(fā)生--><button v-on:contextmenu.prevent="num++">增加一個(gè)</button><br/><!--右擊事件，不阻止默認(rèn)事件發(fā)生--><button v-on:contextmenu="decrement($event)">減少一個(gè)</button><br/><h1>有{{num}}個(gè)女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {num: 100},methods: {decrement(ev) {// ev.preventDefault();this.num--;}}}) </script>

效果：（右鍵“增加一個(gè)”，不會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件；右鍵“減少一個(gè)”，會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件）

2.4.3 按鍵修飾符

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` --> <input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 --> <input v-on:keyup.enter="submit"><!-- 縮寫語法 --> <input @keyup.enter="submit">

全部的按鍵別名：

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

2.4.4 組合按鈕

可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

• .ctrl
• .alt
• .shift

例如：

<!-- Alt + C --> <input @keyup.alt.67="clear"><!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

三、Vue高級(jí)指令

3.1 v-for指令

遍歷數(shù)據(jù)渲染頁面是非常常用的需求，Vue中通過v-for指令來實(shí)現(xiàn)。

3.1.1 遍歷數(shù)組

語法：

v-for="item in items"

• items：要遍歷的數(shù)組，需要在vue的data中定義好。
• item：迭代得到的數(shù)組元素的別名

示例

<div id="app"><ul><li v-for="user in users">{{user.name}} - {{user.gender}} - {{user.age}}</li></ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {users:[{name:'柳巖', gender:'女', age: 21},{name:'峰哥', gender:'男', age: 18},{name:'范冰冰', gender:'女', age: 24},{name:'劉亦菲', gender:'女', age: 18},{name:'古力娜扎', gender:'女', age: 25}]},}) </script>

效果：

3.1.2 數(shù)組角標(biāo)

在遍歷的過程中，如果我們需要知道數(shù)組角標(biāo)，可以指定第二個(gè)參數(shù)：

語法

v-for="(item,index) in items"

• items：要迭代的數(shù)組
• item：迭代得到的數(shù)組元素別名
• index：迭代到的當(dāng)前元素索引，從0開始。

示例

<ul><li v-for="(user, index) in users">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>

效果：

3.1.3 遍歷對(duì)象

v-for除了可以迭代數(shù)組，也可以迭代對(duì)象。語法基本類似

語法：

v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"

• 1個(gè)參數(shù)時(shí)，得到的是對(duì)象的屬性
• 2個(gè)參數(shù)時(shí)，第一個(gè)是屬性，第二個(gè)是鍵
• 3個(gè)參數(shù)時(shí)，第三個(gè)是索引，從0開始

示例：

<div id="app"><ul><li v-for="(value, key, index) in user">{{index + 1}}. {{key}} - {{value}}</li></ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{user:{name:'峰哥', gender:'男', age: 18}}}) </script>

效果：

3.1.4 key

當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。

這個(gè)功能可以有效的提高渲染的效率。

但是要實(shí)現(xiàn)這個(gè)功能，你需要給Vue一些提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。理想的 key 值是每項(xiàng)都有的且唯一的 id。

示例：

<ul><li v-for="(item,index) in items" :key=index></li> </ul>

• 這里使用了一個(gè)特殊語法：:key="" 我們后面會(huì)講到，它可以讓你讀取vue中的屬性，并賦值給key屬性
• 這里我們綁定的key是數(shù)組的索引，應(yīng)該是唯一的

3.2 v-if指令和v-show指令

3.2.1 基本使用

v-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被渲染。

語法：

v-if="布爾表達(dá)式"

示例：

<div id="app"><button v-on:click="show = !show">點(diǎn)我呀</button><br><h1 v-if="show">看到我啦？！</h1><h1 v-show="show">看到我啦？！show</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {show: true}}) </script>

效果：

3.2.2 與v-for結(jié)合

當(dāng)v-if和v-for出現(xiàn)在一起時(shí)，v-for優(yōu)先級(jí)更高。也就是說，會(huì)先遍歷，再判斷條件。

修改v-for中的案例，添加v-if：

<ul><li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>

效果：

只顯示女性用戶信息

3.2.3 v-else

你可以使用 v-else 指令來表示 v-if 的“else 塊”：

<div id="app"><h1 v-if="Math.random() > 0.5">看到我啦？！if</h1><h1 v-else>看到我啦？！else</h1> </div>

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。

v-else-if，顧名思義，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

<div id="app"><button v-on:click="random=Math.random()">點(diǎn)我呀</button><span>{{random}}</span><h1 v-if="random >= 0.75">看到我啦？！if</h1><h1 v-else-if="random > 0.5">看到我啦？！if 0.5</h1><h1 v-else-if="random > 0.25">看到我啦？！if 0.25</h1><h1 v-else>看到我啦？！else</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {random: 1}}) </script>

類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。

演示：

3.2.4 v-show

另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大致一樣：

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

不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

示例：

<div id="app"><!--事件中直接寫js片段--><button v-on:click="show = !show">點(diǎn)擊切換</button><br/><h1 v-if="show">你好</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{show:true}})</script>

代碼：

3.3 v-bind指令

html屬性不能使用雙大括號(hào)形式綁定，只能使用v-bind指令。

在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組。

<div id="app"><!--可以是數(shù)據(jù)模型，可以是具有返回值的js代碼塊或者函數(shù)--><div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {title: "title",}}) </script>

效果：

在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組。

3.3.1 綁定class樣式

數(shù)組語法

我們可以借助于v-bind指令來實(shí)現(xiàn)：

HTML：

<div id="app"><div v-bind:class="activeClass"></div><div v-bind:class="errorClass"></div><div v-bind:class="[activeClass, errorClass]"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {activeClass: 'active',errorClass: ['text-danger', 'text-error']}}) </script>

渲染后的效果：（具有active和hasError的樣式）

對(duì)象語法

我們可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：

<div v-bind:class="{ active: isActive }"></div>

上面的語法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthiness（所有的值都是真實(shí)的，除了false,0,“”,null,undefined和NaN）。

你可以在對(duì)象中傳入更多屬性來動(dòng)態(tài)切換多個(gè) class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。如下模板:

<div class="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

和如下 data：

data: {isActive: true,hasError: false }

結(jié)果渲染為：

<div class="static active"></div>

active樣式和text-danger樣式的存在與否，取決于isActive和hasError的值。本例中isActive為true，hasError為false，所以active樣式存在，text-danger不存在。

通常情況下，綁定的數(shù)據(jù)對(duì)象不必內(nèi)聯(lián)定義在模板里：

<div class="static" v-bind:class="classObject"></div>

數(shù)據(jù)：

data: {classObject: {active: true,'text-danger': false} }

效果和之前一樣：

<div class="static active"></div>

3.3.2 綁定style樣式

數(shù)組語法

數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

數(shù)據(jù)：

data: {baseStyles: {'background-color': 'red'},overridingStyles: {border: '1px solid black'} }

渲染后的結(jié)果：

<div style="background-color: red; border: 1px solid black;"></div>

對(duì)象語法

v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號(hào)括起來) 來命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

數(shù)據(jù)：

data: {activeColor: 'red',fontSize: 30 }

效果：

<div style="color: red; font-size: 30px;"></div>

直接綁定到一個(gè)樣式對(duì)象通常更好，這會(huì)讓模板更清晰：

<div v-bind:style="styleObject"></div> data: {styleObject: {color: 'red',fontSize: '13px'} }

效果同上。

3.3.3 簡寫

v-bind:class可以簡寫為:class

3.4 計(jì)算屬性

在插值表達(dá)式中使用js表達(dá)式是非常方便的，而且也經(jīng)常被用到。

但是如果表達(dá)式的內(nèi)容很長，就會(huì)顯得不夠優(yōu)雅，而且后期維護(hù)起來也不方便，例如下面的場景，我們有一個(gè)日期的數(shù)據(jù)，但是是毫秒值：

data:{birthday:1529032123201 // 毫秒值 }

我們?cè)陧撁驿秩?#xff0c;希望得到y(tǒng)yyy-MM-dd的樣式：

<h1>您的生日是：{{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}} </h1>

雖然能得到結(jié)果，但是非常麻煩。

Vue中提供了計(jì)算屬性，來替代復(fù)雜的表達(dá)式：

var vm = new Vue({el:"#app",data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 計(jì)算屬性本質(zhì)是一個(gè)方法，但是必須返回結(jié)果const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}} })

• 計(jì)算屬性本質(zhì)就是方法，但是一定要返回?cái)?shù)據(jù)。然后頁面渲染時(shí)，可以把這個(gè)方法當(dāng)成一個(gè)變量來使用。

頁面使用：

<div id="app"><h1>您的生日是：{{birth}} </h1></div>

效果：

我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要birthday還沒有發(fā)生改變，多次訪問 birthday 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

3.5 watch

watch可以讓我們監(jiān)控一個(gè)值的變化。從而做出相應(yīng)的反應(yīng)。

示例：

<div id="app"><input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""},watch:{message(newVal, oldVal){console.log(newVal, oldVal);}}}) </script>

效果：

四、Vue組件化

在大型應(yīng)用開發(fā)的時(shí)候，頁面可以劃分成很多部分。往往不同的頁面，也會(huì)有相同的部分。例如可能會(huì)有相同的頭部導(dǎo)航。

但是如果每個(gè)頁面都獨(dú)自開發(fā)，這無疑增加了我們開發(fā)的成本。所以我們會(huì)把頁面的不同部分拆分成獨(dú)立的組件，然后在不同頁面就可以共享這些組件，避免重復(fù)開發(fā)。

4.1 全局組件

我們通過Vue的component方法來定義一個(gè)全局組件。

<div id="app"><!--使用定義好的全局組件--><counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">// 定義全局組件，兩個(gè)參數(shù)：1，組件名稱。2，組件參數(shù)Vue.component("counter",{template:'<button v-on:click="count++">你點(diǎn)了我 {{ count }} 次，我記住了.</button>',data(){return {count:0}}})var app = new Vue({el:"#app"}) </script>

• 組件其實(shí)也是一個(gè)Vue實(shí)例，因此它在定義時(shí)也會(huì)接收：data、methods、生命周期函數(shù)等
• 不同的是組件不會(huì)與頁面的元素綁定，否則就無法復(fù)用了，因此沒有el屬性。
• 但是組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
• 全局組件定義完畢，任何vue實(shí)例都可以直接在HTML中通過組件名稱來使用組件了。
• data必須是一個(gè)函數(shù)，不再是一個(gè)對(duì)象。

效果：

4.2 組件的復(fù)用

定義好的組件，可以任意復(fù)用多次：

<div id="app"><!--使用定義好的全局組件--><counter></counter><counter></counter><counter></counter> </div>

效果：

你會(huì)發(fā)現(xiàn)每個(gè)組件互不干擾，都有自己的count值。怎么實(shí)現(xiàn)的？

組件的data屬性必須是函數(shù)！

當(dāng)我們定義這個(gè) <counter> 組件時(shí)，它的data 并不是像這樣直接提供一個(gè)對(duì)象：

data: {count: 0 }

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

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

如果 Vue 沒有這條規(guī)則，點(diǎn)擊一個(gè)按鈕就會(huì)影響到其它所有實(shí)例！

4.3 局部注冊(cè)

一旦全局注冊(cè)，就意味著即便以后你不再使用這個(gè)組件，它依然會(huì)隨著Vue的加載而加載。

因此，對(duì)于一些并不頻繁使用的組件，我們會(huì)采用局部注冊(cè)。

我們先在外部定義一個(gè)對(duì)象，結(jié)構(gòu)與創(chuàng)建組件時(shí)傳遞的第二個(gè)參數(shù)一致：

const counter = {template:'<button v-on:click="count++">你點(diǎn)了我 {{ count }} 次，我記住了.</button>',data(){return {count:0}} };

然后在Vue中使用它：

var app = new Vue({el:"#app",components:{counter:counter // 將定義的對(duì)象注冊(cè)為組件} })

• components就是當(dāng)前vue對(duì)象子組件集合。
  • 其key就是子組件名稱
  • 其值就是組件對(duì)象的屬性

• 效果與剛才的全局注冊(cè)是類似的，不同的是，這個(gè)counter組件只能在當(dāng)前的Vue實(shí)例中使用

4.4 組件通信

通常一個(gè)單頁應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織：

• 頁面首先分成了頂部導(dǎo)航、左側(cè)內(nèi)容區(qū)、右側(cè)邊欄三部分
• 左側(cè)內(nèi)容區(qū)又分為上下兩個(gè)組件
• 右側(cè)邊欄中又包含了3個(gè)子組件

各個(gè)組件之間以嵌套的關(guān)系組合在一起，那么這個(gè)時(shí)候不可避免的會(huì)有組件間通信的需求。

4.4.1 props（父向子傳遞）

父組件使用子組件時(shí)，自定義屬性（屬性名任意，屬性值為要傳遞的數(shù)據(jù)）

子組件通過props接收父組件屬性

父組件使用子組件，并自定義了title屬性：

<div id="app"><h1>打個(gè)招呼：</h1><!--使用子組件，同時(shí)傳遞title屬性--><introduce title="大家好，我是鋒哥"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">Vue.component("introduce",{// 直接使用props接收到的屬性來渲染頁面template:'<h1>{{title}}</h1>',props:['title'] // 通過props來接收一個(gè)父組件傳遞的屬性})var app = new Vue({el:"#app"}) </script>

效果：

4.4.2 props驗(yàn)證

我們定義一個(gè)子組件，并接受復(fù)雜數(shù)據(jù)：

const myList = {template: '<ul><li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li></ul>',props: {items: {type: Array,default: [],required: true}}};

• 這個(gè)子組件可以對(duì) items 進(jìn)行迭代，并輸出到頁面。
• props：定義需要從父組件中接收的屬性
  • items：是要接收的屬性名稱
    • type：限定父組件傳遞來的必須是數(shù)組
    • default：默認(rèn)值
    • required：是否必須

當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。

我們?cè)诟附M件中使用它：

<div id="app"><h2>傳智播客已開設(shè)如下課程：</h2><!-- 使用子組件的同時(shí)，傳遞屬性，這里使用了v-bind，指向了父組件自己的屬性lessons --><my-list :items="lessons"/> </div> var app = new Vue({el:"#app",components:{myList // 當(dāng)key和value一樣時(shí)，可以只寫一個(gè)},data:{lessons:[{id:1, name: 'java'},{id:2, name: 'php'},{id:3, name: 'ios'},]} })

效果：

type類型，可以有：

4.4.3 動(dòng)態(tài)靜態(tài)傳遞

給 prop 傳入一個(gè)靜態(tài)的值：

<introduce title="大家好，我是鋒哥"/>

給 prop 傳入一個(gè)動(dòng)態(tài)的值： （通過v-bind從數(shù)據(jù)模型中，獲取title的值）

<introduce :title="title"/>

靜態(tài)傳遞時(shí)，我們傳入的值都是字符串類型的，但實(shí)際上任何類型的值都可以傳給一個(gè) props。

<!-- 即便 `42` 是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue --> <!-- 這是一個(gè)JavaScript表達(dá)式而不是一個(gè)字符串。--> <blog-post v-bind:likes="42"></blog-post><!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。--> <blog-post v-bind:likes="post.likes"></blog-post>

4.4.4 子向父的通信

來看這樣的一個(gè)案例：

<div id="app"><h2>num: {{num}}</h2><!--使用子組件的時(shí)候，傳遞num到子組件中--><counter :num="num"></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">Vue.component("counter", {// 子組件，定義了兩個(gè)按鈕，點(diǎn)擊數(shù)字num會(huì)加或減template:'<div><button @click="num++">加</button> <button @click="num--">減</button> </div>',props:['num']// count是從父組件獲取的。})var app = new Vue({el:"#app",data:{num:0}}) </script>

• 子組件接收父組件的num屬性
• 子組件定義點(diǎn)擊按鈕，點(diǎn)擊后對(duì)num進(jìn)行加或減操作

我們嘗試運(yùn)行，好像沒問題，點(diǎn)擊按鈕試試：

子組件接收到父組件屬性后，默認(rèn)是不允許修改的。怎么辦？

既然只有父組件能修改，那么加和減的操作一定是放在父組件：

var app = new Vue({el:"#app",data:{num:0},methods:{ // 父組件中定義操作num的方法increment(){this.num++;},decrement(){this.num--;}} })

但是，點(diǎn)擊按鈕是在子組件中，那就是說需要子組件來調(diào)用父組件的函數(shù)，怎么做？

我們可以通過v-on指令將父組件的函數(shù)綁定到子組件上：

<div id="app"><h2>num: {{num}}</h2><counter :count="num" @inc="increment" @dec="decrement"></counter> </div>

在子組件中定義函數(shù)，函數(shù)的具體實(shí)現(xiàn)調(diào)用父組件的實(shí)現(xiàn)，并在子組件中調(diào)用這些函數(shù)。當(dāng)子組件中按鈕被點(diǎn)擊時(shí)，調(diào)用綁定的函數(shù)：

Vue.component("counter", {template:'<div><button @click="plus">加</button> <button @click="reduce">減</button> </div>',props:['count'],methods:{plus(){this.$emit("inc");},reduce(){this.$emit("dec");}}})

• vue提供了一個(gè)內(nèi)置的this.$emit()函數(shù)，用來調(diào)用父組件綁定的函數(shù)

效果：

五、尾聲

Vue，初次邂逅(二)，完成了。

天天打碼，天天進(jìn)步！！！

總結(jié)

以上是生活随笔為你收集整理的vue 多选自动触发_Vue，初次邂逅(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。