Vue.js指令(1)

v-cloak

解決差值表示式的閃爍問題所有使用v-cloak 的元素,都將 display:none

{{msg}}

v-text

它和v-cloak的區別:

1、沒有閃爍問題2、{{msg}} 的前後可以新增任意內容,只替換佔位符的內容。而v-text會覆蓋元素中原本的內容

v-html

div中渲染的佔位符需要是一個html標籤時使用

v-bind

用於繫結屬性的指令

data:{ mytitle:“要顯示的內容”}

v-bind 可以簡寫為一個英文冒號v-bind 會把後面的內容當做html去解析

v-on

用於繫結事件的指令,比如點選事件

//觸發click事件,就會執行show方法,所以在methods中定義該方法methods:{ show:function(){ alert(‘Hello’) }}

事件修飾符

。prevent 阻止預設事件

。capture 新增事件偵聽器時使用事件捕獲模式

。self 只當事件在該元素本身觸發時觸發回撥

。once 事件只觸發一次

。stop 阻止冒泡

<!—— 。stop點選事件 ——>
<!—— 。prevent 阻止預設行為 ——> 百度一下 <!—— 。capture 捕獲 ——>
<!—— 。self 只有點選自己的元素,事件才會觸發,冒泡不會被觸發 ——>
<!—— 修飾符可以連用 ——> 百度一下

v-model 雙向資料繫結

{{ msg }}

v-bind 只能單向繫結 M—>Vv-model 只能運用在表單元素中

未完待續…