課堂day44 vue3基礎(chǔ)模板語法

n我們在methods中要使用data返回對象中的數(shù)據(jù)：p那么這個this是必須有值的，并且應(yīng)該可以通過this獲取到data返回對象中的數(shù)據(jù)。n那么我們這個this能不能是window呢？p不可以是window，因?yàn)閣indow中我們無法獲取到data返回對象中的數(shù)據(jù)；p但是如果我們使用箭頭函數(shù)，那么這個this就會是window了；n為什么是window呢？p這里涉及到箭頭函數(shù)使用this的查找規(guī)則，它會在自己的上層作用于中來查找this；p最終剛好找到的是script作用于中的this，所以就是window；nthis到底是如何查找和綁定的呢？p在我 有另外一篇文章，專門詳細(xì)的講解了this的綁定規(guī)則 p認(rèn)真學(xué)習(xí)之后你絕對對this的綁定一清二楚；

n事實(shí)上Vue的源碼當(dāng)中就是對methods中的所有函數(shù)進(jìn)行了遍歷，并且通過bind綁定了

n我們 面練習(xí)Vue的過程中，有些代碼片段是需要經(jīng)常寫的，我們再VSCode中我們可以生成一個代碼片段，方便我們快速生成。nVSCode中的代碼片段有固定的格式，所以我們一般會借助于一 工具來完成n具體的步驟如下：p第一步 自己需要生成代碼片段的代碼p第二步，在 中生成代碼片段p第三步，在VSCode中配置代碼片段；

nReactpReact使用的jsx，所以對應(yīng)的代碼都是編寫的類似于js的一種語法p之后通過Babel將jsx編譯成React.createElement函數(shù)調(diào)用；nVue也支持jsx的開發(fā)模式（后續(xù)有時間也會講到p但是大多數(shù)情況下，使用基于HTML的模板語法p在模板中，允許開發(fā)者 式的方式將DOM和底層組件實(shí)例的數(shù)據(jù)綁定在一起p在底層的實(shí)現(xiàn)中，Vue將模板編譯成虛擬DOMn所以，對于學(xué)習(xí)Vue來說，學(xué)習(xí)模板語法

n如果我們希望把數(shù)據(jù)顯示到模板 te）中，使用最多的語法是“Mustache”語法(雙大括號)的文本插值p并且我們前端提到過，data返回的對象是有添加到Vue的響應(yīng)式系統(tǒng)p當(dāng)data中的數(shù)據(jù)發(fā)生改變時，對應(yīng)的內(nèi)容也會發(fā)生更新p當(dāng)然，Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達(dá)式n

nv-oncep當(dāng)數(shù)據(jù)發(fā)生變化時，元素或者組件以及其所有的子元素將視為靜態(tài)內(nèi)容p該指令可以用于性能優(yōu)化n

n用于更新元素的

n默認(rèn)情況下，如果我們展示的內(nèi)容本身是html的，那么vue并不會對其進(jìn)行特殊的解析p如果我們希望這個內(nèi)容被Vue可以解析出來，那么可以使用v-html

nv-pre用于跳過元素和它的子元素的編譯過程，顯示原始的 p

np和CSS規(guī)則如[v-cloak]{dis y:none}一起用時，這個指令可以隱藏未編譯的Mustache n<div

n前端講的一系列指令，主要是將值插入到模板內(nèi)容n但是，除了內(nèi)容需要動態(tài)來決定外，某些屬性我們也希望動態(tài)來綁定p比如動態(tài)綁定a元素的hrefp比如動態(tài)綁定img元素的srcn綁定屬性我們使用v-p縮寫p預(yù)期：any(withargument)|Object(withoutp參數(shù)：attrOrProp(p修飾符ü.camel-將kebab-caseattribute名轉(zhuǎn)換為camelCasep用法：動態(tài)地綁定一個或多個attribute，或一個組件prop

nv-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值（這個學(xué)到組件時再介紹np還是有很多的，比 href、動態(tài)綁定一些類、樣式等 v-bind有一個對應(yīng)的語法糖，也就是簡寫方式n

n在開發(fā)中，有時候我們的元素classp當(dāng)數(shù)據(jù)為某個狀態(tài)p當(dāng)數(shù)據(jù)另一個狀態(tài)n綁定classpp

綁定classn對象語法：我們可以傳給:class(v-bind:class的簡寫)一個對象，以動態(tài)地切換class

綁定classn數(shù)組語法：我們可以把一個數(shù)組傳給:class，以應(yīng)用一個class列表；

n我們可以利用v-bind:style來綁定一些CSS內(nèi)聯(lián)樣式：p這次因?yàn)槟承邮轿覀冃枰鶕?jù)數(shù)據(jù)動態(tài)來決定；p比如某段文字的顏色，大小等等；nCSSproperty名可以用駝峰式(camelCase)或短橫線分隔(kebab-case，記得用引號括起來)n綁定classpp

nnp:style

n在某些情況下，我們屬性的名稱p前端我們無論綁定src、href、class、style，p如果屬性名稱不是固定的，我們可以使用:[屬性名]=“值”p這種綁定的方式，我們稱之為動態(tài)綁定屬性

n如果我們希望將一個對象的所有屬性，綁定到元素上的所有屬性p非常簡單，我們可以直接使用v-bind綁定一個對象n案例：info對象會被拆解成div

n前面我們綁定了元素的內(nèi)容和屬性 端開發(fā)中另外一個非常重要的特性就是交互 p這個時候，我們就必 用戶發(fā)生 ，比如點(diǎn)擊、拖拽、鍵 等p在Vue中如 呢？使用v-on指令n接下來我們來看一下v-on

nv-onp縮寫p預(yù)期：Function|InlineStatement|p參數(shù)p修飾符 .capture-添 .self-只 .{keyAlias}-僅 .passivepassive:truep用法

n我們可以使用v-on 一下點(diǎn)擊 nv-on:click可以寫成@click，是它的語法糖n當(dāng)然，我們也可以綁定其他 n如果我們希望一個元素綁定多 ，這個時候可以傳入一個對象

n當(dāng)通過methods中定義方法，以供@click調(diào)用時，需要注意參數(shù)問題np但是注意：如果方法本身中有一個參數(shù)，那么會默認(rèn)將原 event參數(shù)傳遞進(jìn)n情況二：如果需要同時傳入某個參數(shù)，同時需要event時，可以通過$event傳

nv-on支持修飾符，修飾符相當(dāng)于 進(jìn)行了一些特殊的處理p.stop-調(diào)用event.stopPropagation()。p.prevent-調(diào)用event.preventDefault()。p.capture-添加 時使用capture模式。p.self-只 是從 綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)p.{keyAlias}-僅 是從特定鍵觸發(fā)時才觸發(fā)回調(diào)p.once-只觸發(fā)一次回調(diào)。p.leftp.right-只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)。p.middle-只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)。p.passive-{passive:true}模式添加偵

nnVuepv-pv-pv-else-pv-n

nv-if、v-else、v-else-ifp這些內(nèi)容只有在條件為truep這三個指令與JavaScript的條件語句if、else、elseifnv-ifpvifp當(dāng)條件為falsep當(dāng)條件為true

n因?yàn)関-ifpp此時我們渲染div，但是我們并不希望divp這個時候，我們可以選擇使用 n te元素可以當(dāng)做不可見的包裹元素，并且在v-if上使用，但是最終 te不會被渲染出來p有點(diǎn)類似于小程序中的

nv-show和v-if

n