vue.js基礎知識篇(5):過渡、Method和Vue實例方法


第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()。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM