Vue基礎 三 模板語法 二

2022-01-20 08:14:09 字數 1501 閱讀 9050

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...