vue jstree 是一個基于 Vue.js 和 jQuery 的樹形結構插件。通過 vue jstree，我們可以輕松地創建帶有層次結構的樹形菜單、目錄樹、文件樹等等。本文將通過一個簡單的示例來演示如何使用 vue jstree。

首先，我們需要安裝 vue jstree。可以通過 npm 或 yarn 安裝：

npm install vue-jstree
// 或
yarn add vue-jstree

安裝完成后，我們可以在組件中引入 vue jstree：

// 引入 jstree 樣式
import 'jstree/dist/themes/default/style.css';
// 引入 vue jstree 組件
import VueJSTree from 'vue-jstree';
export default {
components: {
VueJSTree,
},
data() {
return {
treeData: [
{
text: 'Parent Node',
children: [
{
text: 'Child Node 1',
},
{
text: 'Child Node 2',
},
],
},
],
};
},
};

在組件中引入 vue jstree 后，我們需要在模板中使用它：

<template>
<div>
<vue-jstree :tree-data="treeData" />
</div>
</template>

這里我們將 treeData 傳遞給 vue jstree，它將會渲染出一個樹形菜單。在 treeData 中，我們指定了樹形結構的節點（包括父節點和子節點）的文本。

以上就是如何使用 vue jstree 的簡要介紹。通過這個簡單的例子，我們可以體驗一下 vue jstree 帶來的便捷和美觀。當然，vue jstree 還支持很多高級功能，例如節點拖拽、節點選中、異步加載等等，可以根據具體場景靈活使用。