第3章 內(nèi)置指令

Vue.js3從入門到實戰(zhàn)（微課視頻版）第3章內(nèi)置指令學(xué)習(xí)目的與要求本章主要講解Vue.js內(nèi)置指令，包括v-bind、v-if、v-show、v-for、v-on、v-model等指令。通過本章的學(xué)習(xí)，掌握Vue內(nèi)置指令的用法?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄3.1v-bind3.2條件渲染指令3.3列表渲染指令v-for3.4事件處理3.5表單與v-model3.6實戰(zhàn)：購物車實例《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.1v-bindVue.js提供了v-bind指令綁定HTML元素的屬性，并可動態(tài)更新屬性值。《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.1.1v-bind指令用法v-bind的基本用途是動態(tài)更新HTML元素上的屬性，比如id、class等?！纠?-1】使用v-bind指令綁定超鏈接的href屬性和圖片的src屬性?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社<script>Vue.createApp({data(){return{myurl:{baiduUrl:'/',imgUrl:'images/ok.gif'}}}}).mount('#app')</script><divid="app"><av-bind:href="myurl.baiduUrl">去百度</a><imgv-bind:src="myurl.imgUrl"/><!--v-bind:可縮寫為“:”，這種縮寫稱為語法糖--><a:href="myurl.baiduUrl">去百度</a><img:src="myurl.imgUrl"/></div>3.1.2使用v-bind綁定class1．對象語法傳給:class（v-bind:class的簡寫）一個對象，可以動態(tài)地切換class屬性值。示例代碼如下：

<div:class="{active:isActive}"></div>可以在對象中傳入更多字段來動態(tài)切換多個class。此外，:class指令也可以與普通的class屬性同時存在。示例代碼如下：<divclass="static":class="{active:isActive,'text-danger':hasError}"></div>《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.1.2使用v-bind綁定class2．?dāng)?shù)組語法當(dāng)需要多個class時，可以把一個數(shù)組與:class綁定，以應(yīng)用一個class列表。示例代碼如下：<div:class="[activeClass,errorClass]"></div>如果需要根據(jù)條件切換列表中的class，可以使用三元表達式實現(xiàn)。示例代碼如下：<div:class="[isActive?activeClass:'',errorClass]"></div>《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.1.2使用v-bind綁定class3．?dāng)?shù)組中嵌套對象當(dāng)有多個條件class時，在數(shù)組中使用三元表達式有些繁瑣。所以在數(shù)組語法中也可以使用對象語法。示例代碼如下：<div:class="[{'active':isActive},errorClass]"></div>《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-2】綁定class的幾種方式?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-3】將methods的返回值動態(tài)綁定到class屬性。3.1.3使用v-bind綁定style使用:style可以給HTML元素綁定內(nèi)聯(lián)樣式，方法與:class類似，也有對象語法和數(shù)組語法。:style的對象語法十分直觀，看起來像在元素上直接寫CSS，但其實是一個JavaScript對象。CSS屬性名可以用駝峰式或短橫線分隔來命名?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-4】綁定style的方式?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-5】將computed屬性值動態(tài)綁定到style屬性。目錄3.1v-bind3.2條件渲染指令3.3列表渲染指令v-for3.4事件處理3.5表單與v-model3.6實戰(zhàn)：購物車實例《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.2.1v-if指令與JavaScript的條件語句if、else、elseif類似，Vue.js的條件指令v-if也可以根據(jù)表達式的值渲染或銷毀元素/組件?！纠?-6】使用條件渲染指令判斷成績等級?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社<divid="if-handling"><divv-if="score>=90">優(yōu)秀</div><divv-else-if="score>=80">良好</div><divv-else-if="score>=70">中等</div><divv-else-if="score>=60">及格</div><divv-else>不及格</div></div><script>Vue.createApp({data(){return{

score:87}}}).mount('#if-handling')</script>3.2.1v-if指令v-if條件渲染指令必須將它添加到一個元素上。但是如果想包含多個元素呢？此時可以使用<template>元素（模板占位符）幫助我們包裹元素，并在上面使用v-if。最終的渲染結(jié)果將不包含<template>元素?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社<templatev-if="ok"> <h1>Title</h1> <p>Paragraph1</p> <p>Paragraph2</p></template>3.2.2v-show指令v-show指令的用法基本與v-if一樣，也是根據(jù)條件展示元素，例如：<h1v-show="yes">一級標題</h1>。不同的是，v-if每次都會重新刪除或創(chuàng)建元素，而帶有v-show的元素始終會被渲染并保留在DOM中，只是切換元素的display:none樣式。所以，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換，v-show較好；如果在運行時條件不大可能改變，v-if較好。另外，v-show不支持<template>元素，也不支持v-else?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-7】演示v-if與v-show的區(qū)別?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄3.1v-bind3.2條件渲染指令3.3列表渲染指令v-for3.4事件處理3.5表單與v-model3.6實戰(zhàn)：購物車實例《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.3.1基本用法可以使用v-for指令遍歷一個數(shù)組或?qū)ο螅谋磉_式需結(jié)合in來使用，形式為iteminitems，其中items是源數(shù)據(jù)，而item是被迭代集合中元素的別名。v-for還支持一個可選的參數(shù)作為當(dāng)前項的索引?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社 1．遍歷普通數(shù)組

<ul> <liv-for="(item,index)initems"> {{index}}-{{item}} </li> </ul>2．遍歷對象數(shù)組<ul> <liv-for="userinusers"> {{user.uname}} </li></ul>3.3.1基本用法3．遍歷對象屬性<liv-for="(value,key,index)inmyObject"> {{++index}}.{{key}}:{{value}}</li>4．迭代數(shù)字<liv-for="iin100">{{i}}</li>【例3-8】演示v-for指令的常用方式。《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.3.2數(shù)組更新Vue.js框架的核心是數(shù)據(jù)與視圖的雙向綁定，所以使用v-for循環(huán)遍歷并渲染數(shù)組時，數(shù)組變化將觸發(fā)視圖更新。push()方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。pop()方法用于刪除并返回數(shù)組的最后一個元素。unshift()方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度。shift()方法用于把數(shù)組的第一個元素從其中刪除，并返回第一個元素的值。splice()方法用于添加或刪除數(shù)組中的元素。如果僅刪除一個元素，則返回一個元素的數(shù)組。如果未刪除任何元素，則返回空數(shù)組。sort()方法用于對數(shù)組的元素進行排序。排序順序可以是字母或數(shù)字，并按升序或降序。默認排序順序為按字母升序。reverse()方法用于顛倒數(shù)組中元素的順序。《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-9】數(shù)組更新時，v-for渲染的視圖也更新?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.3.3過濾與排序有時，需要顯示一個經(jīng)過過濾或排序后的數(shù)組，而不實際變更或重置原始數(shù)據(jù)。在這種情況下，可以使用計算屬性來返回過濾或排序后的數(shù)組。《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-10】使用計算屬性過濾與排序數(shù)組，并使用v-for指令渲染過濾與排序后的數(shù)組。【例3-11】使用methods過濾二維數(shù)組中大于100的元素，并使用嵌套v-for指令循環(huán)渲染過濾的結(jié)果?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄3.1v-bind3.2條件渲染指令3.3列表渲染指令v-for3.4事件處理3.5表單與v-model3.6實戰(zhàn)：購物車實例《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.4.1使用v-on指令監(jiān)聽事件所有的事件處理都離不開事件監(jiān)聽器，在Vue.js中可以使用v-on指令給HTML元素添加一個事件監(jiān)聽器，通過該指令調(diào)用在Vue實例中定義的方法?！纠?-12】使用v-on指令監(jiān)聽按鈕事件，實現(xiàn)字符串反轉(zhuǎn)?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.4.2使用$event訪問原生的DOM事件在Vue.js中，有時需要訪問原生的DOM事件。Vue.js提供了一個特殊變量$event，用于訪問原生的DOM事件。【例3-13】阻止打開鏈接?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.4.3事件修飾符在事件處理中調(diào)用event.preventDefault()或event.stopPropagation()是非常常見的需求。盡管可以在方法中輕松實現(xiàn)這類需求，但方法最好只有純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細節(jié)。為解決該問題，Vue.js為v-on提供了事件修飾符。修飾符是由點開頭的指令后綴表示。Vue.js支持的修飾符有.stop、.prevent、.capture、.self、.once以及.passive。用法是在@綁定的事件后加小圓點“.”，再跟修飾符。《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.4.3事件修飾符<!--阻止單擊事件--><a@click.stop="doThis"></a><!--提交事件不再重載頁面--><form@submit.prevent="onSubmit"></form><!--修飾符可以串聯(lián)--><a@click.stop.prevent="doThat"></a><!--只有修飾符--><form@submit.prevent></form>《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.4.3事件修飾符<!--添加事件監(jiān)聽器時使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進行處理--><div@click.capture="doThis">...</div><!--當(dāng)事件在該元素自身觸發(fā)時觸發(fā)回調(diào)，即事件不是從內(nèi)部元素觸發(fā)的--><div@click.self="doThat">...</div><!--只觸發(fā)一次--><a@click.once="doThis"></a><!--滾動事件的默認行為（即滾動行為）將會立即觸發(fā)，而不會等待“onScroll”完成--><div@scroll.passive="onScroll">...</div>《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社目錄3.1v-bind3.2條件渲染指令3.3列表渲染指令v-for3.4事件處理3.5表單與v-model3.6實戰(zhàn)：購物車實例《Vue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社3.5.1基本用法表單用于向服務(wù)器傳輸數(shù)據(jù)，較為常見的表單控件有：單選、多選、下拉選擇、輸入框等，用表單控件可以完成數(shù)據(jù)的錄入、校驗、提交等。Vue.js用v-model指令在表單<input>、<textarea>及<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定（Model到View以及View到Model）。使用v-model指令的表單元素將忽略該元素的value、checked、selected等屬性初始值，而是將當(dāng)前活動的Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源。所以，使用v-model指令時，應(yīng)通過JavaScript在Vue實例的data選項中聲明初始值?！禫ue.js3從入門到實戰(zhàn)》陳恒主編，清華大學(xué)出版社【例3-14】v-model指令在表單元素上實現(xiàn)雙向數(shù)據(jù)綁定?！禫ue.js3從入門