身為一個碼農，種一點奇奇怪怪的菜也是挺合理的。目前看起來 VueJS 好像很潮的樣子，所以就挑了幾個種子來試試看。只是，說好的 ReactJS 呢（欸
JavaScript 戰國時代
小時候，約莫是 1996 年，開始寫 JavaScript 的時候，那個時候大概是 IE3.0，然後大家會用 document.all 來檢查是不是 IE，或是 Netscape（聽過代表你透露年紀了！
當時也是 CSS 1.0 進入草案的階段，約莫一年多以後，市面上開始零星的出現 CSS 的書，然後 2000 年出現了 Firefox，正式進入大亂鬥時代。
我第一個用過的 JavaScript 框架（或許那時候不叫做框架，是自己寫的（喂！基本上都是用 prototype 的方式去做出一些自己想要，或是需要的功能。例如檢查瀏覽器，檢查 getElementById 與 document.all 是否可用之類的。還有一些 DOM 的 Selector 的操作。
多年後，有個東西叫 Sizzle，做的事情大概就是這樣。
當時的啟蒙書，是一本寫 Dynamic HTML 的教學，裡面是大量的 JavaScript/CSS/DOM 的操作。對於當時網頁沒有很興盛的年代，能透過 HTML 做出非 GIF/Flash 的動態效果就是潮（欸
然後就這樣過了快十年。
2000 年後，JavaScript ESMA-262 3rd edition 正式定案，IE5.5，Netscape 6.0（國內還是以 IE 為大宗，更不用說 Opera 或是 Safari 了。
我持續用著自己做的東西度過了大學四年，當時還很愛用 document.write 或是 innerHTML（遮臉
2005 年後，出現了 Prototype，對於當時使用原生 JavaScript 的寫法的我來說，他確實相當方便。因為我幾乎不用大改之前寫過的，只要調整一下就能使用，對我來說相當容易上手。
然後我大學畢業後，就去外島當兵了。
退伍之後，第一個工作開始沒多久，就出現了 jQuery（大概是 2006 年，只是當時對於他並沒有很熟悉，用起來也沒特別方便（如果要操作 DOM，還不如用我自己的 prototype 比較方便。
後續還有 Mootools 這類的工具（2007 年，我也用過，不知道為什麼，當時覺得他比 jQuery 好用，某部分來說。當時用他開發過無限捲軸，還有排序功能，但是，受限於當時的客戶端硬體（這無關 IE，因為連 Firefox 或是早期的 Chrome（2008 年，其實整體效能並不好。當然，也可能是我 code 寫的太爛。
然後還有 Dojo Toolkit，當時覺得他的 AJAX 很好用。也持續有寫過一些工具，或是把自己原本的東西改用這個來寫。然後不知道為什麼，就是沒有用 jQuery 來寫東西（應該是某種奇怪的堅持？
直到 2008 年，我才開始真的用上 jQuery，然後寫了幾個自嗨的 Plugins 這樣。
最後來到 AngularJS 框架與 ReactJS，歐，中間還去玩了 Famo.us 然後還去 WebConf 講過（但是他大改架構之後，我就放置 play 了（哭，你現在看到的 Famo.us 跟我當年玩的東西是不一樣的，是 他媽的完全不一樣 的這種等級！
接著就是今天的 VueJS
VueJS
因為我不會寫 ReactJS，然後我也只會寫一點點 AngularJS，所以，什麼比較之類的東西就不要班門弄斧。直接寫一點我從 ng 轉換過去得一些小小心得就好了。
- Components 很好用，雖然 Vue 也有 directive，但是跟 ng 的操作方式完全不同。大概可以這樣來區分，
- Vue 的 component 類似於 ng 的 directive
restrict: E - Vue 的 elementDirective 也類似於 ng 的 directive
restrict: E - Vue 的 directive 類似於 ng 的 directive
restrict: A - 可以非同步載入，也就是要用的時候才載入。
- 有
props可以用，跟 ReactJS 頗類似，也可以指定傳入型別、預設值等等，避免意外。 - 可以使用 Slot，雷同於 ng 的 transclusion。
- Vue 的 component 類似於 ng 的 directive
- 預設單向綁定（
one-way，如果有需要也可以使用two-way - 一個
.vue可以包含template,script與style，蠻好管理的。- 皆可加裝 NPM 套件
*-loader來使用不同的寫法。例如<template lang="jade">，然後 NPM 裝一下，就能用 jade 寫樣版。<script lang="coffee">你就可以喝咖啡，<style lang="sass">就能寫 SASS 了。 <style scoped>加入scoped可以限制這個樣式只能在單一個 Components 裡面被渲染，而不會污（ㄑㄧㄤˊ）染（ㄐㄧㄢ）其他地方的樣式。<script>可以再各別import你要用的東西進來，不用寫在最外面（對，我就是偷婊 ng<template>對 Recursive Component 比較友善一點，官方還有直接提出來講，至於你說 ng 嘛，基本上還是要用一點奇技淫巧才能解決。
- 皆可加裝 NPM 套件
computed很好用，可以用來取代一些$watch的動作，例如資料組合或是變更，但是！他必須要在template當中呼叫使用，<template>{{ getName }}</template><script>... computed: { getName () { return 'Hina'; } ...</script>- 以上 JS 是 ES2015 的寫法，詳細的說明官方也有寫。
- 不想用
$watch或是資料需要呈現在template的時候，可以用computed來代替。
$el直接綁著原生的 DOM 的資料，個人覺得比較方便。例如，可以這樣來拿東西，this.$el.offsetWidth如果是 ng 就變成angular.element(el)[0].offsetWidth- Conditional Rendering 有
v-if然後可以搭配v-else挺好用的（但是寫起來會覺得怪怪的就是了 - 可以寫
mixins，類似 ng 的 service 的動作。 - 可以自己包 Plugins，當然市面上寫好的也可以直接用。
- DevTool 錯誤訊息比 ng 好一億倍！
- DevTool 錯誤訊息比 ng 好一億倍！
- DevTool 錯誤訊息比 ng 好一億倍！
目前大概就這樣，之後還有其他心得或是踩雷再來補。然後我正再做一個小工具，或許寫好之後可以拿來測試 Vue 的效能。
