1. 程式人生 > >vue元件 與 angularJS 的指令

vue元件 與 angularJS 的指令

在找工作,angularjs被各種嫌棄,哎,人,都是喜新厭舊的。

vue的元件 加上指令 == angularjs的 指令

angularjs裡指令沒有明確的劃分,但一般分成,裝飾器型和元件型,也就是vue裡的 指令和元件了。

元件

vue的元件非常清晰,比angularjs學起來要好很多,沒有那一堆的引數,寫法也更優雅。

1 註冊方式
vue有兩種註冊方式,一是全域性(Vue)上 二是new Vue()上。
angualrjs就只有後一種。

2 功能

這個有點多。額。。
vue裡沒有restrict,元件對應angularjs的E。指令是A
template: 相比,angularjs,它只有這一個。

data: 這個是vue裡抽出來的, 在angularjs裡是$scope,不過這個scope沒有細分。

props: 對應 angularjs裡的scope,vue裡只有單向資料流,一下子少了好多東西,寫法的區別是,vue有v-bind來繫結動態的資料。在angularjs裡比較多,簡單說就是雙向 直接寫 ,單向用{{}} 函式用 fn()
而且,angularjs中scope預設是 false的,在vue裡他永遠是true的。在vue裡它還能驗證資料的型別。這個在angularjs裡是沒看到的。
3 元件通訊
同樣的onemit 沒太大的區別,就是angularjs裡還有個$broadcase
vue裡丟擲的(emit)事件必須要在元件上監聽(on),然後執行父的method ,在angularjs這些是 controller裡的了。
差不多的套路
父 > 子 props
子 > 父 事件
元件 > 元件
用中央事件匯流排 或vuex
第一個詞什麼意思呢,其實很熟悉了,類似jq裡的自定義事件了,或node中的 自定義event。用法簡單講就是 on(‘evnet’) 然後 emit/trigger 這樣就可以聯絡兩個兩個元件了。,這個on寫在元件裡,這樣就可以拿到它的data了。簡單用下還是不錯的。
在angularjs中 有個 還有廣播,類似吧。

slot 內容分發,angualrjs裡叫 trsclude
動態元件 這個好像沒見過
refs 直接訪問子元件
非同步元件: 這個很贊啊,ng要麻煩很多
遞迴元件:差不多,,

指令

註冊和也元件是一樣的
指令上的鉤子函式:….
引數:el binding ==element attrs

生命週期,零寫一篇吧。。
官方文件不是多,看來好多東西要自己去體驗了。