vue是通過指令v-on來繫結事件的,例如最常用的點選方法:v-on:click。我們也可以縮寫為@click;
來個簡單的案例:
點選點選1執行的效果:點選2點選3
可以看到,四種寫法都可以實現點選事件的繫結,並且this指向的是vue的例項物件。
前面兩個方案能將num值改變,但是我們不推薦這麼寫,開發中很多時間處理邏輯會更為複雜,所以直接把js**寫在v-on指令中是不可行的,因此v-on還可以接收需要呼叫的方法名稱。
既然是呼叫方法,那麼怎麼能沒有引數呢,那麼我們就通過案例來看看如何傳入引數吧。
點選1執行的效果:點選2
我們傳入了兩個引數,並且接受了兩個引數,都正常列印了,如果引數數量對應不上呢?那麼他只會列印你接收的值,也不會報錯啥的。
還有就是大家注意這個事件物件$event ,小心別跳坑里了。
事件修飾符這個學過js的同學應該都知道吧,在vue中事件修飾符也非常多,
這裡我們只使用最常用的兩個:.stop阻止冒泡行為和.prevent取消預設事件。
點選1執行的效果:
在做專案中有時候會用到鍵盤事件,在監聽鍵盤事件時,我們可能要執行某些操作。vue允許v-on在監聽鍵盤事件時新增按鍵修飾符。
常見按鍵修飾符有哪些?
案例:
delete='clearcontent' v-model='uname'>當我們選中密碼輸入框時,按下f2,就會提交**。密碼:
執行的效果:
選中使用者名稱輸入框時,按下 delete鍵就會清空使用者名列。
怎麼自定義按鍵修飾符?
通過vue.config.keycodes自定義按鍵修飾符別名
vue.config.keycodes.f2 = 113;
注意 113 對應鍵盤的keycode 值
f2可以自定義任何名字
vue基礎 模板語法
1 插值 a.文字 b.純html v html慎用 防止xss,csrf 1 前端過濾 前端採用正則將容易注入的字元 等過濾掉 2 後台轉義 換成 clicka c.表示式 2 指令 是帶有 v 字首的特殊屬性 v bind 動態繫結屬性 v if 動態建立 刪除 v show 動態顯示 隱藏 v...
Vue模板語法 二
vue模板語法 二 樣式繫結 class繫結 使用方式 v bind class expression expression的型別 字串 陣列 物件 1.2 style繫結 v bind style expression expression的型別 字串 陣列 物件 1 2322 2332 3334...
Vue基礎篇 模板語法
a 文字 雙大括號 b html元素 v html指令 c 屬性 v bind指令 v text更新textcontent。直接用雙大括號也是可行的 v html輸出真正的html。一般輸出真正html直接用元件更方便 v pre跳過這個元素和它的子元素解析和渲染。時顯時不顯操作可以用 v cloa...