formBuilder vue是一個基于Vue.js構(gòu)建的輕量級表單生成器，通過簡單的配置，可以讓你獲得強大易用的表單創(chuàng)建功能。它允許你快速創(chuàng)建HTML表單，并提供了強大的API實現(xiàn)表單數(shù)據(jù)的操作和驗證。下面，我們來詳細了解一下它的使用。

首先，安裝formBuilder vue的方式很簡單：

npm install formbuilder-vue

在你的vue組件中，使用如下代碼來渲染它：

<template>
<div>
<form-builder
:formItems="formItems"
/>
</div>
</template>
<script>
import FormBuilder from 'formbuilder-vue';
export default {
components: {
FormBuilder
},
data() {
return {
formItems: [
{
type: 'input',
label: '用戶名',
rules: [
{ required: true, message: '請輸入用戶名', trigger: 'blur' }
]
},
{
type: 'password',
label: '密碼',
rules: [
{ required: true, message: '請輸入密碼', trigger: 'blur' }
]
}
]
}
}
}
</script>

以上代碼中，我們引入了formBuilder vue組件，并將表單的配置項傳遞給了它的formItems屬性。formItems是一個數(shù)組，每一個元素代表一個表單項。這里我們定義了兩個表單項，一個是普通的文本輸入框，另一個是密碼輸入框，每個表單項都有相應(yīng)的label和rules屬性來定義它們的顯示文字和驗證規(guī)則。

如果你需要在提交表單時獲取表單數(shù)據(jù)，可以使用formBuilder vue提供的getData方法：

this.$refs.formBuilder.getData();

getData方法將返回一個包含所有表單數(shù)據(jù)的Object對象，每個屬性代表一個表單項，屬性值為表單項的value屬性。

這就是formBuilder vue的基本使用方法了。它允許你快速地創(chuàng)建并驗證HTML表單，節(jié)省了大量繁瑣的代碼工作。如果你對它感興趣，請查閱它的官方文檔以了解更多使用細節(jié)。