事件處理器
**實現
頁面效果
使用方式:v-bind:class=「expression」
expression的型別:字串、陣列、物件
v-bind:style=「expression」
expression的型別:字串、陣列、物件
vue通過由點(.)表示的指令字尾來呼叫修飾符,
.stop
.prevent
.capture
.self
.once
v-on:click.stop
="dothis"
>
a>
v-on:submit.prevent
="onsubmit"
>
form
>
v-on:click.stop.prevent
="dothat"
>
a>
v-on:submit.prevent
>
form
>
v-on:click.capture
="dothis"
>
...div
>
v-on:click.self
="dothat"
>
...div
>
v-on:click.once
="dothis"
>
a>
vue為最常用的按鍵提供了別名
v-on:keyup.enter
="submit"
>
全部的按鍵別名:見下文**塊
.lazy
預設情況下, v-model在input事件中同步輸入框的值與資料,但你可以新增
乙個修飾符lazy,從而轉變為在change事件中同步
.number
將使用者的輸入值轉為 number 型別
.trim
自動過濾使用者輸入的首尾空格
除了vue自帶的指令(v-on|v-model)等, vue也允許註冊自定義指令,根據作用範圍又分為:全域性指令/區域性指令
vue.directive("focus",{});//全域性指令
new vue(
}});
>
>
charset
="utf-8"
/>
>
title
>
src=
"">
script
>
head
>
>
.clstyle
>
>
>
>
} }p
>
:class
="textcolor"
>
打五的div
>
@click
='click1'
>
顯示button
>
/>
type
="text"
v-model
="text"
/>
} @click
="click2"
>
傳遞button
>
@click.once
="click2"
>
傳遞button
>
/>
type
="text"
@keyup.enter
="click2"
v-model
="text"
/>
} @click
="click2"
>
傳遞button
>
/>
v-for
="d in data"
>
type
="checkbox"
v-model
="ids"
:value
="d.name"
/>
} div
>
}/>
type
="text"
v-model.number
="text"
/>
@click
="click3"
>
傳遞button
>
}>
div>
body
>
>
var vm =
newvue(,
text:'',
ret:'',
data:[,
,], ids:
}}, methods:
, click2:
function()
, click3:
function()
}});
script
>
html
>
因為我懶,所以建議cope**自己乙個個慢慢新增執行測試,不要一次性複製去執行,不然**幹了啥你都分不清。
網頁控制台記得開著除錯和看部分執行效果。
這些C 基礎知識的基礎知識你都學會了嗎?
一 c 基礎知識 新的資料型別 c語言中的資料型別 練習 定義乙個命名空間為mynum,在該命名空間中定義乙個整型變數x,並給該變數賦值為105 使用c 新特性判斷mynum命名空間下的變數是奇數還是偶數。using namespace std namespace mynum using names...
最厲害的VUE指令,看完你就會了!!!
vue.js 自身不是乙個全能框架 它只聚焦於檢視層。因此它非常容易學習,非常容易與其它庫或已有專案整合。另一方面,在與相關工具和支援庫一起使用時 vue.js 也能完美地驅動複雜的單頁應用。vue.js 讀音 vju 類似於 view 是一套構建使用者介面的漸進式框架。與其它大型框架不同的是,vu...
Vue的基礎語法(一)
v once h2 v html url h2 data 123h2 v text message 123h2 h2 v pre h2 v cloak h2 v cloak style 動態繫結class 物件語法 class h2 class getactive h2 methods 動態繫結cl...