vue 事件基礎

2022-02-26 11:42:46 字數 2113 閱讀 9818

縮寫:@

v-on:click="handle($event)"     $event可以獲取到該dom的基礎資訊           

其他的onafterprint

script

文件列印之後執行的指令碼。

onbeforeprint

script

文件列印之前執行的指令碼。

onbeforeunload

script

文件解除安裝之前執行的指令碼。

onerror

script

在錯誤發生時執行的指令碼。

onhaschange

script

當文件已改變時執行的指令碼。

onload

script

頁面結束載入之後觸發。

onmessage

script

在訊息被觸發時執行的指令碼。

onoffline

script

當文件離線時執行的指令碼。

ononline

script

當文件上線時執行的指令碼。

onpagehide

script

當視窗隱藏時執行的指令碼。

onpageshow

script

當視窗成為可見時執行的指令碼。

onpopstate

script

當視窗歷史記錄改變時執行的指令碼。

onredo

script

當文件執行撤銷(redo)時執行的指令碼。

onresize

script

當瀏覽器視窗被調整大小時觸發。

onstorage

script

在 web storage 區域更新後執行的指令碼。

onundo

script

在文件執行 undo 時執行的指令碼。

onunload

script

例如:onload 換成vue的寫法就是 v-on:load="handle($event)"      或    @load="handle($event)" 

v-on:  就相當於  onload 字首的on用法,其他的用法類似

其他的我沒試過不知道是不是這樣的額,猜想應該是這樣的額

@load的用法

<

div

class

="imgall"

>

<

ul>

<

li v-for

="(value,key) in imageurls"

class

="imgbox"

>

<

div

class

="box"

>

<

img

:src

="value"

@load

="drawimage_box($event)"

class

="imsg"

>

div>

<

i class

="delimg"

v-on:click

="delimg(key)"

> x

i>

li>

<

li >

<

div

class

="z_file"

>

<

input

type

="file"

name

="file"

class

="inputstyle"

@change

="previewimage"

/>

div>

li>

ul>

div>

//

獲取縮圖盒子寬高後再執行縮放

drawimage_box(e),

//縮放居中核心功能

drawimage(imgid,width_s, height_s)

else}}

},

Vue基礎 3 v on 元素事件

v on為元素繫結事件 事件名不需要寫on 指令可以簡寫為 繫結的方法定義在methods屬性中 方法內部通過this關鍵字可以訪問定義在data中資料 例1 button value v on 單擊指令 v on click doit button value v on 介入指令 v on mou...

Vue基礎(2) 事件修飾符及冒泡事件

滑板瑜伽 旅遊 可以自動獲取被選中的value值 data 男女 獲取單選框的value值 data 美國土耳其 俄羅斯 grandfather.addeventlistener click function true 新增事件 addeventlistener click 函式 去除事件用 rem...

Vue事件機制

眾所周知,vue.js為我們提供了四個事件api,分別是 on,once,off,emit。初始化事件 初始化事件在vm上建立乙個 events物件,用來存放事件。events的內容如下 存放事件名以及對應執行方法。初始化事件 export function initevents vm compon...