Vue3 x中的事件和方法全解

2022-06-24 06:27:12 字數 2346 閱讀 3419

一、vue事件方法的簡單使用

//

template模版

改變msg

獲取msg

//業務邏輯

二、v-bind繫結class當v-bind與class一起使用時,vue提供了特殊的增強功能style,除了字串外,表示式還可以求值為物件或者陣列

2.1 v-bind: class 繫結字串

改變div顏色

2.2 v-bind:class 繫結物件

2.3 v-bind:class 繫結陣列

前端工程師

2.4 v-bind:class 陣列語法:結合三目運算

前端工程師

、v-bind繫結style

案例:迴圈資料 第乙個資料高亮顯示

四、事件方法應用

4.1 傳參

設定title的值1

設定title的值2

4.2 在乙個方法中呼叫另乙個方法

設定msg

獲取msg

方法中呼叫方法改變msg的值

四、事件物件:有時候我們還需要在內聯語句處理程式中訪問原始dom事件,可以使用特殊$event變數將其傳遞給方法

1、單個引數:

// temolate 模版

事件物件

// 業務邏輯

2、多個引數:

多個引數加事件物件

五、多事件處理程式你可以在事件處理程式中,使用逗號分隔多個事件處理程式(點選一次,執行多個方法)

點選按鈕一次執行多個方法

六、事件修飾符vue中阻止冒泡阻止預設行為,可以通過事件物件event.preventdefault(),或event.stoppropagation()實現,還可以通過事件修飾符實現

.stop  阻止冒泡

.prevent  阻止預設事件(跳轉).capture  新增事件傾聽器時使用事件捕獲機制(由外向裡)

.self  只當事件在該元素本身(比如不是子元素)觸發時觸發**

.once  事件只觸發一次.stop 和 .self 的區別:.self 只會阻止自己身上冒泡行為的觸發,並不會真正阻止冒泡的行為

七、按鍵修飾符

.enter

.tab

.delete (同時捕獲刪除或退格鍵)

.esc

.space

.up.down

.left

.right

監聽鍵盤事件時,我們通常要檢查特定的鍵,vue允許在監聽關鍵事件時v-on或@在監聽關鍵事件時新增按鍵修飾符

vue cli2 x和vue 3 x安裝區別

1.npm install vue cli g 安裝vue cli2.x腳手架 2.vue init webpack 使用vue cli2.x來建立乙個名稱為 的專案 3.cd 進入剛建立好的專案的路徑下 4.npm install 安裝依賴 5.npm run dev 啟動專案1.npm inst...

vue2 x和vue3 x實現雙向繫結的不同方式

在vue2.x中,實現雙向繫結,是使用object.defineproperty 方法對屬性設定get和set方法實現。object.defineproperty let obj object.defineproperty obj,name set自帶乙個引數 set value obj.name ...

Vue2 x與Vue3 x的雙向繫結原理

通過object.defineproperty 重新定義物件屬性的set方法 get方法來實現的,從這個屬性中取值時會觸發get方法,改變這個屬性時會觸發set方法,所以我們只要將一些需要更新view的方法放在這裡面就可以實現data更新view了,而view更新data其實可以通過事件監聽實現 o...