新聞中心
#v-text

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


咨詢
建站咨詢
