新聞中心
#v-text

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比睢寧縣網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式睢寧縣網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋睢寧縣地區(qū)。費(fèi)用合理售后完善,十載實(shí)體公司更值得信賴。
- 預(yù)期:
string
- 詳細(xì):
更新元素的 textContent。如果要更新部分的 textContent,需要使用 Mustache 插值。
- 示例:
{{msg}}- 參考:數(shù)據(jù)綁定語(yǔ)法 - 插值
#v-html
- 預(yù)期:
string
- 詳細(xì):
更新元素的 innerHTML。注意:內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯。如果試圖使用 v-html 組合模板,可以重新考慮是否通過(guò)使用組件來(lái)替代。
WARNING
在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的,因?yàn)槿菀讓?dǎo)致 XSS 攻擊。只在可信內(nèi)容上使用 v-html,永不用在用戶提交的內(nèi)容上。
在單文件組件里,scoped 的樣式不會(huì)應(yīng)用在 v-html 內(nèi)部,因?yàn)槟遣糠?HTML 沒(méi)有被 Vue 的模板編譯器處理。如果你希望針對(duì) v-html 的內(nèi)容設(shè)置帶作用域的 CSS,你可以替換為 CSS modules 或用一個(gè)額外的全局 元素手動(dòng)設(shè)置類似 BEM 的作用域策略。
- 示例:
- 參考:數(shù)據(jù)綁定語(yǔ)法 - 插值
#v-show
- 預(yù)期:
any
- 用法:
根據(jù)表達(dá)式的真假值,切換元素的 display CSS property。
當(dāng)條件變化時(shí)該指令觸發(fā)過(guò)渡效果。
- 參考:條件渲染 - v-show
#v-if
- 預(yù)期:
any
- 用法:
根據(jù)表達(dá)式的真假值來(lái)有條件地渲染元素。在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是 ,將提取它的內(nèi)容作為條件塊。
當(dāng)條件變化時(shí)該指令觸發(fā)過(guò)渡效果。
當(dāng)和 v-if 一起使用時(shí),v-for 的優(yōu)先級(jí)比 v-if 更高。詳見(jiàn)列表渲染教程
- 參考:條件渲染 - v-if
#v-else
- 不需要表達(dá)式
- 限制:前一兄弟元素必須有
v-if或v-else-if。
- 用法:
為 v-if 或者 v-else-if 添加“else 塊”。
Now you see me
Now you don't
- 參考:條件渲染 - v-else
#v-else-if
- 預(yù)期:
any
- 限制:前一兄弟元素必須有
v-if或v-else-if。
- 用法:
表示 v-if 的“else if 塊”??梢枣?zhǔn)秸{(diào)用。
A
B
C
Not A/B/C
- 參考:條件渲染- v-else-if
#v-for
- 預(yù)期:
Array | Object | number | string | Iterable
- 用法:
基于源數(shù)據(jù)多次渲染元素或模板塊。此指令之值,必須使用特定語(yǔ)法 alias in expression,為當(dāng)前遍歷的元素提供別名:
{{ item.text }}
另外也可以為數(shù)組索引指定別名 (或者用于對(duì)象的鍵):
v-for 的默認(rèn)行為會(huì)嘗試原地修改元素而不是移動(dòng)它們。要強(qiáng)制其重新排序元素,你需要用特殊 attribute key 來(lái)提供一個(gè)排序提示:
{{ item.text }}
v-for 也可以在實(shí)現(xiàn)了可迭代協(xié)議的值上使用,包括原生的 Map 和 Set。
v-for 的詳細(xì)用法可以通過(guò)以下鏈接查看教程詳細(xì)說(shuō)明。
- 參考:
- 列表渲染
#v-on
- 縮寫(xiě):
@
- 預(yù)期:
Function | Inline Statement | Object
- 參數(shù):
event
- 修飾符:
.stop- 調(diào)用event.stopPropagation()。.prevent- 調(diào)用event.preventDefault()。.capture- 添加事件偵聽(tīng)器時(shí)使用 capture 模式。.self- 只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。.{keyAlias}- 僅當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。.once- 只觸發(fā)一次回調(diào)。.left- 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。.right- 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。.middle- 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。.passive-{ passive: true }模式添加偵聽(tīng)器
- 用法:
綁定事件監(jiān)聽(tīng)器。事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語(yǔ)句,如果沒(méi)有修飾符也可以省略。
用在普通元素上時(shí),只能監(jiān)聽(tīng)原生 DOM 事件。用在自定義元素組件上時(shí),也可以監(jiān)聽(tīng)子組件觸發(fā)的自定義事件。
監(jiān)聽(tīng)原生 DOM 事件時(shí),方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語(yǔ)句,語(yǔ)句可以訪問(wèn)一個(gè) $event property:v-on:click="handle('ok', $event)"。
v-on 同樣支持不帶參數(shù)綁定一個(gè)事件/監(jiān)聽(tīng)器鍵值對(duì)的對(duì)象。注意當(dāng)使用對(duì)象語(yǔ)法時(shí),是不支持任何修飾器的。
- 示例:
在子組件上監(jiān)聽(tīng)自定義事件 (當(dāng)子組件觸發(fā)“my-event”時(shí)將調(diào)用事件處理器):
- 參考:
- 事件處理器
- 組件 - 自定義事件
#v-bind
- 縮寫(xiě):
:
- 預(yù)期:
any (with argument) | Object (without argument)
- 參數(shù):
attrOrProp (optional)
- 修飾符:
.camel- 將 kebab-case attribute 名轉(zhuǎn)換為 camelCase。
- 用法:
動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute,或一個(gè)組件 prop 到表達(dá)式。
在綁定 class 或 style attribute 時(shí),支持其它類型的值,如數(shù)組或?qū)ο???梢酝ㄟ^(guò)下面的教程鏈接查看詳情。
在綁定 prop 時(shí),prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒(méi)有參數(shù)時(shí),可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象。
- 示例:
.camel 修飾符允許在使用 DOM 模板時(shí)將 v-bind property 名稱駝峰化,例如 SVG 的 viewBox property:
在使用字符串模板或通過(guò) vue-loader / vueify 編譯時(shí),無(wú)需使用 .camel。
- 參考:
- Class 和 Style 綁定
- 組件 - Props
#v-model
- 預(yù)期:隨表單控件類型不同而不同。
- 限制于:
- components
- 修飾符:
.lazy- 監(jiān)聽(tīng)change而不是input事件.number- 輸入字符串轉(zhuǎn)為有效的數(shù)字.trim- 輸入首尾空格過(guò)濾
- 用法:
在表單控件或者組件上創(chuàng)建雙向綁定。細(xì)節(jié)請(qǐng)看下面的教程鏈接。
- 參考:
- 表單控件綁定
- 組件 - 在輸入組件上使用自定義事件
#v-slot
- 縮寫(xiě):
#
- 預(yù)期:可放置在函數(shù)參數(shù)位置的 JavaScript 表達(dá)式 (在支持的環(huán)境下可使用解構(gòu))??蛇x,即只需要在為插槽傳入 prop 的時(shí)候使用。
- 參數(shù):插槽名 (可選,默認(rèn)值是
default)
- 限用于:
- 組件 (對(duì)于一個(gè)單獨(dú)的帶 prop 的默認(rèn)插槽)
- 用法:
提供具名插槽或需要接收 prop 的插槽。
- 示例:
Header content
Default slot content
Footer content
{{ slotProps.item.text }}
Mouse position: {{ x }}, {{ y }}
更多細(xì)節(jié)請(qǐng)查閱以下鏈接。
- 參考:
- 組件 - 插槽
#v-pre
- 不需要表達(dá)式
- 用法:
跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程??梢杂脕?lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。
- 示例:
{{ this will not be compiled }}#v-cloak
- 不需要表達(dá)式
- 用法:
這個(gè)指令保持在元素上直到關(guān)聯(lián)組件實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí),這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到組件實(shí)例準(zhǔn)備完畢。
- 示例:
[v-cloak] {
display: none;
}
{{ message }}
#v-once
- 不需要表達(dá)式
- 詳細(xì):
只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。
This will never change: {{msg}}
comment
{{msg}}
- {{i}}
- 參考:
- 數(shù)據(jù)綁定語(yǔ)法- 插值
#v-is
注意:本節(jié)僅影響直接在頁(yè)面的 HTML 中寫(xiě)入 Vue 模板的情況。
- 預(yù)期:字符串文本
- 限制于:原生 HTML 元素
- 用法:在 DOM 內(nèi)模板使用時(shí),模板受原生 HTML 解析規(guī)則的約束。某些 HTML 元素,如:
、、


咨詢
建站咨詢
