新聞中心
#v-text

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


咨詢
建站咨詢
