Vue模組語法(二)

2021-09-27 06:10:19 字數 2328 閱讀 9635

1. 樣式繫結

2. 事件處理器

...

...

2.2 按鍵修飾符

vue允許為v-on在監聽鍵盤事件時新增按鍵修飾符:

vue為最常用的按鍵提供了別名

全部的按鍵別名:

.enter

.tab

.delete (捕獲 "刪除" 和 "退格" 鍵)

.esc

.space

.up.down

.left

.right

.ctrl

.alt

.shift

.meta

今天被綠了

明天綠回來

}傳送多次

只能傳送一次

3. vue表單用v-model指令在表單控制項元素上建立雙向資料繫結

.lazy

預設情況下, v-model在input事件中同步輸入框的值與資料,但你可以新增乙個修飾符lazy,從而轉變為在change事件中同步

.number

將使用者的輸入值轉為 number 型別

.trim

自動過濾使用者輸入的首尾空格

4. 自定義指令指令定義函式提供了幾個鉤子函式用來幫助實現功能(可選)

bind: 只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個在繫結時執行一次的初始化動作

inserted: 被繫結元素插入父節點時呼叫(父節點存在即可呼叫,不必存在於 document 中)。

update: 被繫結元素所在的模板更新時呼叫,而不論繫結值是否變化。通過比較更新前後的繫結值,可以忽略不必要的模板更新(詳細的鉤子函式引數見下)。

componentupdated: 被繫結元素所在模板完成一次更新週期時呼叫。

unbind: 只呼叫一次, 指令與元素解綁時呼叫。

鉤子函式的引數有

el: 指令所繫結的元素,可以用來直接操作 dom 。

binding: 乙個物件,包含以下屬性:

name: 指令名,不包括 v- 字首。

value: 指令的繫結值, 例如: v-my-directive="1 + 1", value 的值是 2。

oldvalue: 指令繫結的前乙個值,僅在 update 和 componentupdated 鉤子中可用。無論值是否改變都可用。

expression: 繫結值的表示式或變數名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。

arg: 傳給指令的引數。例如 v-my-directive:foo, arg 的值是 "foo"。

modifiers: 乙個包含修飾符的物件。 例如: v-my-directive.foo.bar, 修飾符物件 modifiers 的值是 。

vnode: vue 編譯生成的虛擬節點。

oldvnode: 上乙個虛擬節點,僅在 update 和 componentupdated 鉤子中可用。

5. vue元件

接收自定義元件中內部的值}

6. 自定義事件監聽事件:$on(eventname)

觸發事件:$emit(eventname)

注1:vue自定義事件是為元件間通訊設計   

vue中父元件通過prop傳遞資料給子元件,而想要將子元件的資料傳遞給父元件,則可以通過自定義事件的繫結

父vue例項->vue例項,通過prop傳遞資料

子vue例項->父vue例項,通過事件傳遞資料

注2:事件名

不同於元件和prop,事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱

建議使用「短橫線分隔命名」,例如:three-click

Vue模板語法 二

vue模板語法 二 樣式繫結 class繫結 使用方式 v bind class expression expression的型別 字串 陣列 物件 1.2 style繫結 v bind style expression expression的型別 字串 陣列 物件 1 2322 2332 3334...

Vue筆記二 Vue基本語法及指令

new vue 方法用於建立乙個vue例項 乙個vue應用由至少乙個vue例項作為根元件 以及可選的多個巢狀元件組成 vue 使用基於html的模板語法 當然也可以不用模板直接寫渲染 render 函式使用jsx語法,此處不做討論 文字插值 在html文字中標記可能發生變化的位置的 語法 musta...

Vue基礎 三 模板語法 二

vue是通過指令v on來繫結事件的,例如最常用的點選方法 v on click。我們也可以縮寫為 click 來個簡單的案例 點選點選1 點選2點選3 執行的效果 可以看到,四種寫法都可以實現點選事件的繫結,並且this指向的是vue的例項物件。前面兩個方案能將num值改變,但是我們不推薦這麼寫,...