37、使用 Vue.js 开发区块链客户端

使用 Vue.js 开发区块链客户端

1. TransactionForm 展示组件

TransactionForm 组件允许用户输入发送者、接收者的姓名以及交易金额。当用户点击“ADD TRANSACTION”按钮时，这些信息将被发送到父组件 App。该按钮在表单填写完整后才会启用。

在顶级 App 组件的模板中使用 TransactionForm 如下：

<transaction-form
  :disabled="shouldDisableForm()"
  @add-transaction="addTransaction">
</transaction-form>

TransactionForm 组件的模板是一个 HTML 表单，每个输入字段的 disabled 属性由父组件的 shouldDisableForm() 方法控制。如果节点正在挖矿或者区块链中还没有块， shouldDisableForm() 会返回 true 。

表单背后有一个数据模型对象，用于存储用户输入的所有值。Vue 的 v-model 指令用于在表单的输入、文本区域和选择元素之间创建双向数据绑定。

以下是 TransactionForm 组件的 <template> 部分：

<