今天給各位分享VUE模板的知識，其中也會對vue模板語法進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、vue模板，鉤子函數(shù)
• 2、Vue3基礎(chǔ)-模板語法
• 3、[vue3快速入門] 9.vue模板語法
• 4、Vue模板渲染的原理是什么
• 5、vue-cli3攜手rollup、github-actions打造自動部署的vue組件模板（使用篇）

vue模板，鉤子函數(shù)

vue腳手架：

在vue腳手架中有一個

template 模板：

在模板里面只有一個子類，子類里面可以有其他的類

script? 腳本：

style 樣式

vue的語法：

當(dāng)使用{{}}的時候，里面只可以傳入文本，如果傳入標(biāo)簽也會被認(rèn)為文本；

v-html： 可以傳入標(biāo)簽，

設(shè)置屬性的時候，使用v-bind:id 可以簡寫為? :id = 'id'

在html中的變量都需要在data里面進(jìn)行定義

在{{}}里面可以使用表達(dá)式

v-if 與 v-else： 如果if條件成立的話，就會顯示if里面的內(nèi)容，如果沒有成立的話，就會顯示else里面的內(nèi)容，

v-show? 條件成立就顯示內(nèi)容，條件不成立，不會顯示內(nèi)容。他會修改display屬性

vue中的鉤子函數(shù)：

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調(diào)用， 但是可能發(fā)生在其子 VNode 更新之前 。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

鉤子函數(shù)參數(shù)

指令鉤子函數(shù)會被傳入以下參數(shù)：

el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：

name：指令名，不包括?v-?前綴。

value：指令的綁定值，例如：v-my-directive="1 + 1"?中，綁定值為?2。

oldValue：指令綁定的前一個值，僅在?update?和?componentUpdated?鉤子中可用。無論值是否改變都可用。

expression：字符串形式的指令表達(dá)式。例如?v-my-directive="1 + 1"?中，表達(dá)式為?"1 + 1"。

arg：傳給指令的參數(shù)，可選。例如?v-my-directive:foo?中，參數(shù)為?"foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar?中，修飾符對象為?{ foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛擬節(jié)點，僅在?update?和?componentUpdated?鉤子中可用。

除了?el?之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進(jìn)行。

使用vue計算屬性:

鏈接：

來源：

Vue3基礎(chǔ)-模板語法

如果我們希望把數(shù)據(jù)顯示到模板（template）中，使用最多的語法是 “Mustache”語法 (雙大括號) 的文本插值。

并且我們前端提到過，data返回的對象是有添加到Vue的響應(yīng)式系統(tǒng) 中，當(dāng)data中的數(shù)據(jù)發(fā)生改變時，對應(yīng)的內(nèi)容也會發(fā)生更新。

當(dāng)然，Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達(dá)式：

下面這種寫法是語句不是表達(dá)式，所以是錯誤的：

v-once用于指定元素或者組件只渲染一次，當(dāng)數(shù)據(jù)發(fā)生變化時，元素或者組件以及其所有的子元素將視為靜態(tài)內(nèi)容并且跳過，該指令可以用于性能優(yōu)化。

如果添加到父節(jié)點，那么所有的子節(jié)點也是只會渲染一次：

用于更新元素的 textContent，等價于"Mustache"語法，而且"Mustache"語法更靈活。

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

效果如下：

v-pre用于跳過元素和它的子元素的編譯過程，顯示原始的Mustache標(biāo)簽。

跳過不需要編譯的節(jié)點，加快編譯的速度。

效果如下：

這個指令保持在元素上直到關(guān)聯(lián)組件實例結(jié)束編譯。

v-cloak 和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到組件實例準(zhǔn)備完畢，主要用于解決閃動問題，現(xiàn)在Vue3一般不會出現(xiàn)這個問題了。

div 不會顯示，直到編譯結(jié)束。

前面講的一系列指令，主要是將值插入到模板內(nèi)容中。但是，除了內(nèi)容需要動態(tài)來決定外，某些屬性我們也希望動態(tài)來綁定。比如動態(tài)綁定a元素的href屬性，動態(tài)綁定img元素的src屬性。

綁定屬性我們使用 v-bind: ，縮寫 : ，用于動態(tài)地綁定一個或多個 attribute，或一個組件 prop 到表達(dá)式。

v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值（這個學(xué)到組件時再介紹），在開發(fā)中，有哪些屬性需要動態(tài)進(jìn)行綁定呢？還是有很多的，比如圖片的鏈接src、網(wǎng)站的鏈接href、動態(tài)綁定一些類、樣式等等。

v-bind有一個對應(yīng)的語法糖，也就是簡寫方式，在開發(fā)中，我們通常會使用語法糖的形式，因為更簡潔。

注意 ：Vue2 template模板中只能有一個根元素，Vue3 template模板中允許有多個根元素。

在開發(fā)中，有時候我們的元素class也是動態(tài)的，比如：當(dāng)數(shù)據(jù)為某個狀態(tài)時，字體顯示紅色，當(dāng)數(shù)據(jù)另一個狀態(tài)時，字體顯示黑色。

綁定class有兩種方式：對象語法，數(shù)組語法。

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

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

我們可以利用v-bind:style來綁定一些CSS內(nèi)聯(lián)樣式，這是因為某些樣式我們需要根據(jù)數(shù)據(jù)動態(tài)來決定，比如某段文字的顏色，大小等等。

CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。

綁定style有兩種方式：對象語法，數(shù)組語法。

① 對象語法：

② 數(shù)組語法： :style 的數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上

在某些情況下，我們屬性的名稱可能也不是固定的。

前面我們無論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=“值” 的格式來定義，這種綁定的方式，我們稱之為動態(tài)綁定屬性。

如果我們希望將一個對象的所有屬性，綁定到元素上的所有屬性，應(yīng)該怎么做呢？非常簡單，我們可以直接使用 v-bind 綁定一個對象。

如下：info對象會被拆解成div的各個屬性。

前面我們綁定了元素的內(nèi)容和屬性，在前端開發(fā)中另外一個非常重要的特性就是交互。

在前端開發(fā)中，我們需要經(jīng)常和用戶進(jìn)行各種各樣的交互，這個時候，我們就必須監(jiān)聽用戶發(fā)生的事件，比如點擊、拖拽、鍵盤事件等等。

在Vue中如何監(jiān)聽事件呢？使用v-on指令。接下來我們來看一下v-on的用法：

我們可以使用v-on來監(jiān)聽一下點擊的事件：

v-on:click可以寫成@click，是它的語法糖寫法：

當(dāng)然，我們也可以綁定其他的事件：

如果我們希望一個元素綁定多個事件，這個時候可以傳入一個對象：

當(dāng)通過methods中定義方法，以供@click調(diào)用時，需要注意參數(shù)問題：

情況一：如果該方法不需要額外參數(shù)，那么方法后的()可以不添加，并且方法的實現(xiàn)不用參數(shù)，直接就可以打印event。

情況二：如果需要同時傳入某個參數(shù)和event時，可以通過$event傳入事件，并且方法的實現(xiàn)必須按順序?qū)懨鲄?shù)。

@keyup.enter 代表enter鍵彈起的時候會調(diào)用onEnter方法，我們一般在方法里面獲取輸入的值：

在某些情況下，我們需要根據(jù)當(dāng)前的條件決定某些元素或組件是否渲染，這個時候我們就需要進(jìn)行條件判斷了。

Vue提供了下面的指令來進(jìn)行條件判斷：

下面我們來對它們進(jìn)行學(xué)習(xí)。

v-if、v-else、v-else-if 用于根據(jù)條件來渲染某一塊的內(nèi)容，這些內(nèi)容只有在條件為true時，才會被渲染出來，這三個指令與JavaScript的條件語句 if、else、else if 類似。

v-if 的渲染原理：v-if是惰性的，當(dāng)條件為false時，其判斷的內(nèi)容完全不會被渲染或者會被銷毀掉，當(dāng)條件為true時，才會真正渲染條件塊中的內(nèi)容。

因為v-if是一個指令，所以必須將其添加到一個元素上，但是如果我們希望切換的是多個元素呢？

如果此時我們使用div包裹，div會被渲染到界面上來，但是我們并不希望div被渲染，這個時候，我們可以選擇使用template，template元素可以當(dāng)做不可見的包裹元素，并且 v-if 可以添加到 template 上，但是最終template不會被渲染出來，類似于小程序中的block。

v-show和v-if的用法看起來是一致的，也是根據(jù)一個條件決定是否顯示元素或者組件。

首先，在用法上的區(qū)別：

其次，本質(zhì)的區(qū)別：

開發(fā)中如何進(jìn)行選擇呢？

在真實開發(fā)中，我們往往會從服務(wù)器拿到一組數(shù)據(jù)，并且需要對其進(jìn)行渲染。這個時候我們可以使用v-for來完成，v-for類似于JavaScript的for循環(huán)，可以用于遍歷一組數(shù)據(jù)。

v-for的基本格式是 "item in 數(shù)組" ，數(shù)組通常是來自data或者prop，也可以是其他方式，item是我們給每項元素起的一個別名，這個別名可以自定來定義。

我們知道，在遍歷一個數(shù)組的時候會經(jīng)常需要拿到數(shù)組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數(shù)組" ，注意順序，數(shù)組元素項item在前面，索引項index在后面。

類似于v-if，你可以使用 template 元素來循環(huán)渲染一段包含多個元素的內(nèi)容。

我們使用template來對多個元素進(jìn)行包裹，而不是使用div來完成，因為div會被渲染，template不會被渲染。而且如果有ul，ul里面不推薦放div，只推薦放li。

Vue 將被偵聽的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會觸發(fā)視圖更新，這些被包裹過的方法包括：

上面的方法會直接修改原來的數(shù)組，所以視圖會跟著更新。但是某些方法不會替換原來的數(shù)組，而是會生成新的數(shù)組，比如 filter()、concat() 和 slice()，這時候我們可以通過重新賦值的方式觸發(fā)視圖更新，如下：

在使用v-for進(jìn)行列表渲染時，我們通常會給元素或者組件綁定一個key屬性。

這個key屬性有什么作用呢？

我們先來看一下官方的解釋：key屬性主要用在Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法，而使用key時，它會基于key的變化重新排列元素順序，并且會移除/銷毀key不存在的元素。

官方的解釋對于初學(xué)者來說并不好理解，比如下面的問題：

什么是新舊nodes，什么是VNode？

沒有key的時候，如何嘗試修改和復(fù)用的？

有key的時候，如何基于key重新排列的？

我們先來解釋一下VNode的概念：

VNode的全稱是Virtual Node，也就是虛擬節(jié)點。事實上，無論是組件還是元素，它們最終在Vue中表示出來的都是一個個VNode。VNode的本質(zhì)是一個JavaScript的對象。

如果我們不只是一個簡單的div，而是有一大堆的元素，那么它們應(yīng)該會形成一個VNode Tree。

我們先來看一個案例：這個案例是當(dāng)我們點擊按鈕時會在li中間插入一個f。

我們可以確定的是，這次更新對于ul和button是不需要進(jìn)行更新，需要更新的是我們li的列表。在Vue中，對于相同父元素的子元素節(jié)點并不會重新渲染整個列表，因為對于列表中 a、b、c、d它們都是沒有變化的。在操作真實DOM的時候，我們只需要在中間插入一個f的li即可。

那么Vue中對于列表的更新究竟是如何操作的呢？

Vue事實上會對于有key和沒有key會調(diào)用兩個不同的方法，有key，那么就調(diào)用 patchKeyedChildren方法，沒有key，那么就調(diào)用 patchUnkeyedChildren方法。

沒有key的diff算法：

我們會發(fā)現(xiàn)上面的diff算法效率并不高，c和d來說它們事實上并不需要有任何的改動，但是因為我們的c被f所使用了，所有后續(xù)所有的內(nèi)容都要一次進(jìn)行改動，并且最后進(jìn)行新增。

有key的diff算法：

所以我們可以發(fā)現(xiàn)，Vue在進(jìn)行diff算法的時候，會盡量利用我們的key來進(jìn)行優(yōu)化操作，在沒有key的時候我們的效率是非常低效的，在進(jìn)行插入或者重置順序的時候，保持相同的key可以讓diff算法更加的高效。

[vue3快速入門] 9.vue模板語法

首先我們還是像上節(jié)課一樣，用vue cli的create命令新建一個項目，名字可以隨便起

創(chuàng)建完項目一樣把用不著的內(nèi)容先刪掉，保持一個最簡內(nèi)容

App.vue內(nèi)容是這樣的

這節(jié)課我們講解一下vue的基本模板語法，也就是我們在template這個標(biāo)簽里面寫的語法，

首先vue的模板語法繼承了html的語法，我們在template里寫的也都是標(biāo)準(zhǔn)的html標(biāo)簽，只有在需要動態(tài)綁定一些內(nèi)容的時候，我們才用到vue的模板語法，大概有一下幾種

插值的方式就是我之前用過的雙花括號的形式{{}}，一般在花括號內(nèi)就是我們綁定的vue對象的變量了

比如我們在data里增加一個字符串msg，

通過插值把這個字符串綁定到模板里

最后渲染出來就是

除了直接綁定一個數(shù)據(jù)，雙花括號里還既可以寫簡單的js表達(dá)式

甚至還可以調(diào)用methods里的方法，比如在methods里增加一個方法

在模板里使用

最后的結(jié)果同樣是：

但是這種方式并不常用，知道就行了

在工作中有一個常見的需求，就是發(fā)布文章的時候，文章內(nèi)容往往是一段html字符串，我們叫做富文本

我們可以先試試用雙花括號的方式，綁定到頁面上行不行

我們看到顯示的效果是這樣的

顯然老板是不會滿意的，

這時候就需要用到一個新的綁定數(shù)據(jù)的方式v-html，

這時候我們就可以看到內(nèi)容正常顯示了

根據(jù)官網(wǎng)的定義，指令就是寫在標(biāo)簽上用v-開頭的特殊屬性，這么說有點抽象，其實我們已經(jīng)學(xué)過幾個指令了，比如v-if、v-show

還有我們剛學(xué)習(xí)的v-html

使用v-bind指令可以給一個html標(biāo)簽動態(tài)的綁定一個屬性，比如我們之前在循環(huán)中動態(tài)綁定的key

以后我們都簡寫為一個冒號:

還有綁定事件用的v-on，以后我們都簡寫為@

小伙伴們現(xiàn)在掌握這些指令的用法就行，以后指令還有很多內(nèi)容，我們以后再學(xué)習(xí)。

這節(jié)課我們就到這里了，主要講解了在template模板中綁定動態(tài)數(shù)據(jù)的集中方式，大部分之前也都用過，現(xiàn)在再鞏固一遍。

Vue模板渲染的原理是什么

vue中的模板template無法被瀏覽器解析并渲染，因為這不屬于瀏覽器的標(biāo)準(zhǔn)，不是正確的HTML語法，所有需要將template轉(zhuǎn)化成一個JavaScript函數(shù)，這樣瀏覽器就可以執(zhí)行這一個函數(shù)并渲染出對應(yīng)的HTML元素，就可以讓視圖跑起來了，這一個轉(zhuǎn)化的過程，就成為模板編譯。

模板編譯又分三個階段，解析parse，優(yōu)化optimize，生成generate，最終生成可執(zhí)行函數(shù)render。

parse階段：使用大量的正則表達(dá)式對template字符串進(jìn)行解析，將標(biāo)簽、指令、屬性等轉(zhuǎn)化為抽象語法樹AST。

optimize階段：遍歷AST，找到其中的一些靜態(tài)節(jié)點并進(jìn)行標(biāo)記，方便在頁面重渲染的時候進(jìn)行diff比較時，直接跳過這一些靜態(tài)節(jié)點，優(yōu)化runtime的性能。

generate階段：將最終的AST轉(zhuǎn)化為render函數(shù)字符串。

vue-cli3攜手rollup、github-actions打造自動部署的vue組件模板（使用篇）

旨在讓開發(fā)者在開發(fā)時擁有

的一條龍服務(wù)。(接下來，我們攜手...)

假設(shè) 項目經(jīng)理提了個 需求 ：要開發(fā)一個組件，名叫 chaste-component。

準(zhǔn)備工作

準(zhǔn)備工作完畢

打包

默認(rèn)使用package.json的name打包

構(gòu)建出了預(yù)發(fā)布文件

只需關(guān)注src文件內(nèi)的組件開發(fā)，開發(fā)完成就可以

發(fā)布組件了（有特殊需求配置的除外）

運行

監(jiān)聽src文件變動，熱更新

新開一個終端

運行在8080端口， 打開

Home 頁面

上手 頁面

頁面基礎(chǔ)內(nèi)容也是自動生成的，只需要對docs-src/views文件的組件示例做調(diào)整

支持eslint風(fēng)格檢查及自動格式化，在 ctrl+s 保存的時候自動格式化，沒用過格式化的都說直接 飛起來了

eslint風(fēng)格檢查

需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，這些都已經(jīng)做好了

自動格式化

需要編輯器設(shè)置的支持，這里在 .vscode/settings.json 文件配置好了

2019年11月github正式開放了github-actions，感動！

這里我們只介紹怎么用她完成demo自動構(gòu)建，想要更多了解的可以看看阮一峰老師的這篇文章 GitHub Actions 入門教程

添加密鑰并提交項目

然后提交項目到chaste-component倉庫

github pages

設(shè)置source為gh-pages分支

打開 ，就進(jìn)入了demo頁面

之后 chaste-component 項目的每次提交都回自動更新demo

已配置的 workflows/ci.yml 如下

下一篇博客將分享 vue-cli3攜手rollup、github-actions打造自動部署的vue組件模板（搭建篇）

github地址 （覺得有幫助，歡迎star）

VUE模板的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vue模板語法、VUE模板的信息別忘了在本站進(jìn)行查找喔。