Vue.js前端開發(fā)框架應(yīng)用（微課版） 課件 第三章 Vue.js指令

Vue.js框架應(yīng)用Vue.js指令目

錄Vue.js指令概述Vue.js指令詳解表單輸入綁定目

錄Vue.js指令概述Vue.js指令詳解表單輸入綁定Vue.js指令概述

一、Vue.js的指令是帶有

v-前綴的特殊屬性，它們作用于HTML元素上。<h1v-bind:title=”mytitle”></h1>Vue.js前端框架包含了一系列的內(nèi)置指令。將指令綁定在元素上時，指令會為綁定的目標(biāo)元素添加一些特殊的行為。我們也可以將指令看作是特殊的HTML標(biāo)簽屬性。二、一個完整的指令語法<formv-on:submit.prevent="onSubmit">...</form>其中“v-on”是指令名稱，“submit”是參數(shù)，“prevent”是修飾符，“onSubmit”是值。目

錄Vue.js指令概述Vue.js指令詳解表單輸入綁定Vue.js指令詳解一、Vue.js基本內(nèi)置指令v-once指令：使用v-once指令的目的是只渲染元素一次，即使之后該元素中使用的數(shù)據(jù)有更新，它都不會被渲染，即這個元素中的數(shù)據(jù)都被當(dāng)作靜態(tài)內(nèi)容跳過。這個指令用于優(yōu)化更新性能。v-text指令：主要用來更新元素文本內(nèi)容，將實例中的數(shù)據(jù)作為純文本輸出，等同于DOM中的innerText屬性。v-html指令：會將實例中的數(shù)據(jù)當(dāng)作HTML標(biāo)簽解析后輸出，等同于DOM中的innerHTML屬性。v-pre指令：在一個元素內(nèi)使用v-pre指令，則該元素的所有Vue.js模板語法都會被保留并按原樣渲染。最常見的用例就是顯示原始雙大括號標(biāo)簽及內(nèi)容。v-cloak：指令用于顯示當(dāng)數(shù)據(jù)未解析完成時頁面元素渲染的樣式。v-memo：指令的值是一個數(shù)組，它可以包含多個數(shù)據(jù)。這個指令會緩存使用它的元素模板的子樹。當(dāng)模板中的數(shù)據(jù)更新時，它會將數(shù)組里包含的數(shù)據(jù)的每個值作比較，如果每個值都沒有變化，即當(dāng)前值與最后一次的渲染相同，那么整個子樹的更新將被跳過。Vue.js指令詳解二、v-bind指令前面講的一些指令主要是將值插入到模板內(nèi)容中，但是除了內(nèi)容需要動態(tài)來決定外，某些屬性我們也希望動態(tài)來綁定。比如動態(tài)綁定<a>元素的href屬性，動態(tài)綁定<img>元素的src屬性。雙大括號不能在html屬性中使用，想要響應(yīng)式地綁定一個屬性，應(yīng)該使用v-bind指令。v-bind指令的參數(shù)是要綁定的html屬性名稱，值是綁定的數(shù)據(jù)名或者表達(dá)式，也可以是一個函數(shù)。<!--綁定src屬性--><imgv-bind:src="imageSrc"/><img:src="imageSrc"/><!—綁定值是一個表達(dá)式--><div:id="`list-${id}`"></div><!—綁定值是一個調(diào)用函數(shù)-><span:title="getTitle()">...</span>Vue.js指令詳解三、v-on指令前面我們綁定了元素的內(nèi)容和屬性，在前端開發(fā)中另外一個非常重要的特性就是交互。當(dāng)我們需要和用戶進(jìn)行各種各樣的交互時，就必須監(jiān)聽用戶發(fā)生的事件，比如單擊、拖拽、鍵盤事件等。在Vue.js中監(jiān)聽事件使用v-on指令。<!--方法處理函數(shù)--><buttonv-on:click="doThis"></button><button@click="doThis"></button>在后面一章我們將詳細(xì)講解事件監(jiān)聽的方法。Vue.js指令詳解四、v-for指令v-for指令用來遍歷數(shù)組、對象，它類似于for循環(huán)可以遍歷一組數(shù)據(jù)，并且基于這些原始數(shù)據(jù)將多次渲染元素或模板。v-for的基本格式:v-for=“itemin數(shù)據(jù)”item是我們給遍歷對象的每項元素起的一個別名，這個別名可以自定義；數(shù)據(jù)通常是來自data或者prop，也可以是其他方式。Vue.js指令詳解五、v-if指令v-if指令可以實現(xiàn)條件渲染，Vue.js會根據(jù)表達(dá)式的值的真假來渲染元素。<h1v-if="isShow">Vue.jsisawesome!</h1>上面的代碼中，h1元素只有在指令的表達(dá)式返回真值時才被渲染。也可以使用v-else指令為v-if添加一個“else區(qū)塊”。一個v-else元素必須跟在一個v-if或者v-else-if元素后面，否則它將不會被識別。Vue.js指令詳解六、v-show指令1.v-show指令和v-if指令的用法基本上是一樣的。Vue.js會根據(jù)表達(dá)式的值的真假來渲染元素。<h1v-show="isShow">Vue.jsisawesome!</h1>它們都是根據(jù)一個條件決定是否顯示元素2.v-show和v-if的區(qū)別v-show的元素會始終被渲染并保留在DOM中，v-show只是切換了該元素的css屬性的display。v-if是“真實的”按條件渲染，因為它確保了在切換時，條件區(qū)塊內(nèi)的事件監(jiān)聽器和子組件都會被銷毀與重建。v-if也是惰性的，如果在初次渲染時條件值為false條件區(qū)塊不會被渲染，只有當(dāng)條件首次變?yōu)閠rue時它才被渲染。此外，v-show不支持在<template>元素上使用，也不能和v-else搭配使用?？偟膩碚f，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換元素使用v-show較好，如果運行時條件很少改變則使用v-if更合適。目

錄Vue.js指令概述Vue.js指令詳解表單輸入綁定表單輸入綁定一、v-model指令在前端處理表單時，我們常常需要將表單輸入框的內(nèi)容同步給Vue中相應(yīng)的變量。Vue提供了v-model指令可以幫助我們簡化操作，更容易地實現(xiàn)雙向數(shù)據(jù)綁定。示例代碼如下：<inputv-model="text">除了文本框，v-model還可以用于各種不同類型的輸入，如<textarea>、<select>元素等。它會根據(jù)所應(yīng)用的元素自動使用對應(yīng)的DOM屬性和事件組合。注意，v-model會忽略任何表單元素上初始的value、checked或selected屬性值。它會將當(dāng)前綁定的Vue數(shù)據(jù)視為數(shù)據(jù)的唯一來源，所以應(yīng)該在Vue實例的data選項來聲明這些初始值。表單輸入綁定二、v-model的修飾符1.lazy默認(rèn)情況下，v-model會在每次input事件后更新數(shù)據(jù)，這樣頻繁更新是沒有必要的。通過添加lazy修飾符可以將這種方式轉(zhuǎn)變?yōu)樵诿看蝐hange事件后才更新數(shù)據(jù)。示例代碼如下：<inputv-model.lazy="msg"/>2.number用戶在表單控件中輸入的數(shù)據(jù)默認(rèn)是字符串類型，如果想自動將這個值轉(zhuǎn)換為數(shù)字類型，可以