今天主要復習一下我們最熟悉vue指令,想要代碼擼得快,就要多看書,多看看官方的文檔和學習指令,學習編程是一個非常享受的過程,尤其是你不斷地去解決問題,獲得一項技能,實現薪水的上漲。進行Vue的指令烹飪吧。
- v-text :string 用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值
- v-html: string 用法:更新元素的innerHTML;注意:網站動態渲染任意HTML,容易導致XXS攻擊
- v-show:any 用法:根據表達式真假值,切換元素的 display css 屬性
- v-if:any 用法:表達式的真假條件渲染元素。在切換時元素以及它的數據綁定/組件被銷毀並且重建。如果是<template>,並提出它的內容作為條件塊。 條件變化時改指令出發過渡效果。
- v-else :不需要表達式 用法:前面必須用 v-if 或者 v-else-if
- v-else-if:any 用法:前面必須用v-if 或者v-else-if 表示v-if的else if塊。可以鏈式調用
- v-for :Array | Object | number | string 用法:基於源數據多次渲染元素或者模板塊 語法:alias in expression
- v-on: 縮寫@;:Function | Inline Statement 參數 $event( required) 修飾符
.stop---調用 event.stopPropagation(),
.capture --添加事件偵聽器時使用capture模式
.prevent ---調用event.preventDefault()
.self---只當事件是從着特定鍵觸發時才觸發回調
.{keyCode | keyAlias} -- 只當事件是從特定鍵觸發時才觸發回調
(PS:官網是這么說的
.self
- 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調.{keyCode | keyAlias}
- 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
我這里理解成了 特定鍵觸發時才觸發回調,注意偵聽器綁定的元素)
.native ---監聽組件根元素的原生事件
.once----只觸發一次回調
.left---(2.2.0)只當點擊鼠標左鍵時觸發
.right ---(2.2.0)只當點擊鼠標右鍵時觸發
.middle ---(2.2.0)只當點擊鼠標中鍵時觸發
用法:綁定事件監聽器。事件類型由參數指定
9.v-bind:縮寫:;類型: any (with argument) | Object (without argument) 參數:attrOrProp (optional) ;修飾符: .prop ---被用於綁定DOM 屬性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在綁定 class 和 style 特性時,支持其它類型的值。如對象和數組;在綁定prop時,子組件必須聲明prop10.v-model :限制<input> <select> components ;
修飾符:.lazy---取代input 監聽change事件
.number ---輸出字符串轉為數字
.trim----輸入首尾空格
11. v-pre 用法:跳過這個元素和它的子元素的編譯過程
12.v-cloak:用法:{v-cloak} {display:none}可以隱藏未編譯的Mustach標簽直到實例准備完畢
13.v-once :詳細 只能渲染元素和組件一次,隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。
最后致謝 vue官方提供的指令:指令