使用 Vue 例項 指令 修飾符

一、 指令

1.1 更新元素的文字內容

1.2 更新元素的html內容

1.3 條件指令

1.4 迴圈指令

1.5 事件繫結

1.6 屬性繫結

1.7 在表單上建立雙向資料繫結

1.8 插槽

1.9 不編譯，原樣輸出

1.10 編譯完成後再顯示

1.11 只渲染元素和元件一次

二、修飾符

2.1 .native修飾符

2.2 .sync修飾符

指令系統是vue的一大特色，dom的接管首先是由瀏覽器來完成的，瀏覽器不能識別指令，從而避開瀏覽器的接管，然後轉入vue的接管，指令裡面可以寫語句，它是一種特殊的html自定義屬性，用來操作dom, 裡面的this返回window，相當於封裝了一些js邏輯用來便捷的操作dom。

v-show="布林"

v-if="布林"

區別操作 css

操作 dom

場景適合頻繁切換

適合不頻繁切換

效能初始渲染消耗

頻繁切換會有消耗

}   
} data() ,
test:[1,2,3,4]
}}

bar = val">

Vue指令之事件修飾符

stop 阻止冒泡 prevent 阻止預設事件 capture 新增事件偵聽器時使用事件捕獲模式 self 只當事件在該元素本身 比如不是子元素 觸發時觸發 once 事件只觸發一次 div class box click divhandler input type button value 戳他...

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

Vue 指令及修飾符 sync 詳解

目錄 1 指令及其語法 2 指令的修飾符 3 都有哪些指令修飾符 4 深入理解 sync 指令修飾符 vue 模板語法中的 v text v html v pre 都是指令，它起到一種命令或指示的效果，語法 如下 v 指令名 引數 值如 v on click add 如果值裡沒有特殊字元，則可以不加...