第8章:過渡
1.CSS過渡
2.JavaScript過渡
3.漸進過渡
第9章:method
Vue.js的事件一般通過v-on指令配置在HTML中,雖然也可以在js的代碼中使用原生的addEventListener方法添加事件監聽,但並不推薦,因為它並不符合“關注點分離”的設計理念。
使用v-on指令有幾點好處:
通過HTML模板(視圖)就能看到js對應的方法;無需手動綁定事件,ViewModel和DOM完全解耦、易於測試;當一個ViewModel被銷毀時,所有的事件處理器都會被自動刪除,避免內存泄漏。
1.如何綁定事件
對照着看,js使用onclick注冊事件,angularJS使用ng-click指令注冊事件。
step1,使用類似的v-on:click指令
它的特點,首先是“一次綁一個”,這種內聯的方式只能一次綁定一個方法,要綁定多個方法,還得使用原生的javascript的原生方法addEventListener方法。然后,指令的限定表達式除了是一個方法名還可以是js語句。第三,它有縮寫,"@click"。
step2,methods配置
對應的方法需要在Vue實例中的methods屬性中進行定義。
step3:使用特殊變量$event訪問原生DOM事件(optional,補充了解)
2.v-on指令的修飾詞
一共提供了4個v-on事件修飾詞,".prevent"、".stop"、".capture"、".self"。它們可以串聯哦。
3.鍵盤事件(按鍵)的別名
鍵盤事件經常需要檢測keyCode,Vue.js非常貼心的為常用的按鍵提供了別名。
enter、tab、delete、esc、space、up、down、left、right。
第10章:Vue實例方法
Vue所有的實例屬性和方法都是以前綴$開頭的。
1.組件樹訪問
一共有4個實例屬性:$parent(當前組件實例的父實例)、$root(當前組件的根實例)、$children(當前組件的直接子組件實例)、$refs(用來訪問使用了v-ref指令的子組件)。
2.DOM訪問
一共有2個實例屬性:$el(掛載當前組件的dom元素)、$els(使用了v-el指令的DOM元素)。
3.數據訪問
一共有2個實例屬性:$data(數據對象)、$options(初始化選項對象)。
4.實例DOM方法的使用
一共有5個實例DOM方法:
$appendTo()用來將el所指的DOM元素或片段插入到目標元素中(內部插入)。對比:jQuery中的appendTo()方法。
$before()用來將el所指的DOM元素或片段插入到目標元素之前(同級插入)。對比:jQuery中的before()方法。
$after()用來將el所指的DOM元素或片段插入到目標元素之后(同級插入)。對比:jQuery中的after()方法。
$remove()用來將el所指的DOM元素或片段從DOM中刪除(刪除)。對比:jQuery中的remove()方法
$nextTick()用來在下次DOM更新循環后執行指定的回調函數(延遲)。
5.實例Event方法的使用
一共有6個Event方法。
$on()監聽自定義事件。對比:jQuery的on()方法。
$once()監聽自定義事件,但只觸發一次。對比:jQuery的one()方法。
$emit()觸發事件。對比:jquery的trigger()方法。
$dispatch()派發事件。對比:jquery的dispatch()。
$broadcast()廣播事件。對比:angularjs的$broadcast()。
$off()刪除事件監聽器。對比:angularjs的off()。