第一個動畫示例：
這其實是一個很常見的彈出層效果，滑鼠點選按鈕切換彈出層的顯示，點選其他區域彈出層消失，用javascript綁定事件可能幾行代碼就搞定了，但是
vue.js
的狀态驅動模式和javascript的事件驅動模式是不同的，下面是使用
vue.js
的實作方式：
滑鼠點選button會切換一個布爾值show，用show來控制彈出層的顯示，而包裹着
<transition>
标簽的彈出層在show的狀态改變時就會觸發動畫，下面就可以用css3寫一個彈出層的動畫：
關于不同的過渡狀态對應的css聲明，官網上是這樣解釋的：
v-enter
: 定義進入過渡的開始狀态。在元素被插入時生效，在下一個幀移除。
v-enter-active
: 定義進入過渡的結束狀态。在元素被插入時生效，在 transition/animation 完成之後移除。
v-leave
: 定義離開過渡的開始狀态。在離開過渡被觸發時生效，在下一個幀移除。
v-leave-active
: 定義離開過渡的結束狀态。在離開過渡被觸發時生效，在 transition/animation 完成之後移除。
相對于jQuery來說，
vue.js
的動畫效果完全帶來了一種全新的體驗。
那麼如何點選其他區域讓彈出層消失呢？
首先想到的是直接阻止按鈕和彈出層的事件冒泡，然後給document綁定事件讓彈出層消失。但是顯然這種方法太簡單粗暴了，使用的場景也很苛刻，要求頁面中隻有一個彈出層效果才行，雖然不建議使用，但是也提供了一種思路。
然後想到可以檢驗事件的target，如果target不是按鈕和彈出層就可以讓彈出層消失，這也是用jQuery 的常用寫法，那麼關鍵點就是用
vue.js
定位到按鈕和彈出層，
vm.$refs
可以解決這個問題，使用 ref 為子元件指定一個索引 ID，在 JavaScript 中就可以直接通路子元件了。下面是實作過程：
這裡定義了一個生命周期鈎子mouted，也就是說在該vue執行個體綁定節點之後觸發，在document綁定的事件裡判斷是不是按鈕和彈出層，如果是則傳回，否則将show的狀态設定為false。
在寫完這個之後我也去網上找了找有沒有更好的思路可以實作，後來閱讀了一下大名鼎鼎的
vue.js
架構Element這部分的源碼，發現它也是這個思路實作了。大家有好的實作思路歡迎交流哈！
第二個動畫示例：
第二個執行個體是關于标簽頁切換的，先看一下效果：
這也是一個很常見的互動效果，以往正常的javascript寫法是給各個按鈕綁定事件來切換不同的層，當然也可以用純css寫，給上面的三個切換的層分别添加一個單選按鈕的兄弟節點，再用絕對定位把單選按鈕定位在三個button上面，這樣就可以用:checked僞類來單選按鈕的兄弟元素，即對應的不同的層，我簡單的寫了一下DOM結構，大概就是這樣：
那麼用
vue.js
實作上述的效果，其實也有兩種途徑，一種使用
vue-router
，
vue-router
是
vue.js
的一個路由元件，在單頁面應用中非常非常流行，如果切換的層資料量非常大的話，比如每個層都要有伺服器進行大量的資料互動，那麼強烈建議使用
vue-router
，因為
vue-router
在每次切換路由的過程中，都會自動銷毀（destroyed）前面的元件，這樣在頻繁的操作中頁面也不會卡，而且
vue-router
也定義了頁面切換過程中的過渡動畫。
如果資料量并不複雜的話，可以直接通過
vue.js
定義切換狀态來切換不同的層。
首先先把template和css寫好：
其中introduce、chatbar、videobar分别代表三個需要跟随button切換的元件，接下來就可以給
vue.js
的button節點綁定事件來操控點選狀态：
點選不同的button，會讓active的狀态改變，同時這個狀态會作用到button上面，比如讓被點選的button有個高亮的效果等等。
那麼如何讓active的狀态作用到彈出層呢？其實定義一個computed函數就可以了：