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值改變,但是我們不推薦這麼寫,...