本文是官網示例的學習https://vuefe.cn/v2/examples/tree-view.html，根據其方法，自行進行編寫。
第一步，獲得樹形數據
對於渲染成一個樹形菜單，也就是我們平時見到的多級菜單，我們首先要將數據處理成樹形結構。這裏筆墨不多寫了，假設我們拿到的demoData就已經是的了。
第二步，渲染數據
假設我們拿到的數據第一層是數組。
在我們的頁面上只需要有一個ul以及一個我們接下來定義的組件item。這裏由於我們第一層數據是數組，因此我們在這裏做了一個循環。這裏同時要注意vue是使用props從父組件向子組件傳遞數據的，因此我們綁定了:leave="leave". 第一個leave是在接下來要說的是item組件中已經定義了的屬性。
下面是組件的最基礎定義：它的基礎結構就是我們希望包含的結構，即item的名字，以及item的子項目的列表，然後在子項目中進行遞歸調用這個結構。這裏在對item進行遞歸調用時，也要注意需要傳入要渲染的數據，也是通過props進行綁定
第三 實現菜單效果
通過以上兩部，我們的數據就可以展現在頁面上，但是這個沒有任何交互效果。我們希望實現的效果是，頁面打開只有一級菜單需要展示的，其它部分都是隱藏的。對於有下級菜單的部分，顯示效果爲粗體，同時有一個加號在一側，點擊可以打開下一級菜單，同時變成減號，點擊減號下級菜單可以收起。
爲了實現以上功能，我們只需要明晰幾點即可：第一，我們需要知道該item是否有下一級，這裏使用vue中新添加的計算屬性功能。牽涉到邏輯運算的都可以放到其中。第二，我們需要顯示下級菜單是否已經展開，這裏可以用一個參數來表明是否開關。第三，就是展開和關上菜單。這裏寫一個函數，來改變存儲開或者關的參數，每次點擊item名字時觸發即可。
完整的代碼 如下
<iframe width="100%" height="300" src="//jsfiddle.net/d7k6vz31/2/embedded/js,html,css,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>