VUE相關指令

2021-08-30 08:53:55 字數 1608 閱讀 2837

一,文字類指令

相互繫結的兩種方式:1,繫結的變數是一樣的,2,插值表示式中的變數值和繫結的變數一致

v-text:文字格式,原文本會被替換

v-html:可以解析帶html標籤的文字資訊

v-once:文字只能被賦值一次

這是p

}原文本}

二,避免閃爍

在vue更改html中的值得時候,重新整理的快會產生閃爍的現象

兩種方式1,把vue的原始檔直接匯入到html檔案的開始

2,在需要更改的div裡面加入v-cloak屬性,在css中利用屬性查詢,查詢到以後display:none

三,v-bind指令

1,該指令繫結的是屬性(html標籤的全域性屬性)

2,繫結之後的屬性的屬性值可以由變數控制

哀其不幸,怒其不爭。

不滿足是向上的齒輪。

渡盡劫波兄弟在,相逢一笑泯恩仇。

躲進小樓成一統,管它冬夏與春秋。

橫眉冷對千夫指,俯首甘為孺子牛。

改造自己,總比禁止別人來得難。

單是說不行,要緊的是做.

簡寫

四 v-on指令(簡寫@)

後面繫結的是事件,直接操作的是方法名

五,v-model指令

資料的雙向繫結:v-model繫結的是value,所以可以省略

(也就是把輸入的值全部賦值給v-model繫結的值,必須在vue中給賦值"")

籃球足球桌球

男:女:

提交

六,條件渲染:

1,條件渲染的值為true|false

2,true代表標籤顯示方式渲染

3,false v-if不渲染到頁面,v-show以display:none渲染到頁面,但是不會顯示

012...

......

七,列表渲染

1,一般列表渲染需要建立快取,需要使用變數key,而使用變數key必須使用v-bind繫結

2,v-for變數陣列時,接收兩個值時,第乙個為元素值,第二個值為元素的索引

3,v-for接收三個值時(並且接受的是個字典時),用(元素值,元素鍵,元素的索引)

} }   

八,todolist案例

vue的相關指令

插槽表示式閃爍問題 事件修飾符 1 click.stop 表示式 函式名 阻止事件冒泡,只執行自身事件不傳遞事件 寫在自身事件上 2 click.prevent 表示式 函式名 阻止預設行為,不響應預設事件 寫在自身事件上 3 click.captuer 表示式 函式名 捕獲事件,先走自身事件在走其...

Vue框架 Vue指令

v cloak 避免螢幕閃爍 class屬性 重點 style屬性 了解 案例 123 data methods 12 3 事件處理 3 v if有家族 v if v else if v else if控制顯隱 你是第1個p 你是第2個p 你是第3個p 案例綠 藍 注意 v for遍歷要依賴於乙個所...

vue常用指令

1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...