使用 petite-vue 构建 AJAX 表单

文章	评论	标签
90	1546	53

　　之前写过一篇使用 Alpine.js 构建一个 ajax 表单，关于Alpine和PetiteVue这里就不介绍了，以后单独开一篇文章讲讲区别。总之，他们两个很相似，主要用于传统MVC站点前端构建增强。
　　这里贴上petite-vue的官方地址：https://github.com/vuejs/petite-vue

开始起步

　　petite-vue 是 Vue 的另一种发行版，针对渐进增强进行了优化。它提供与标准 Vue.js 相同的模板语法。对于熟悉Vue的小伙伴十分亲切。让我们从以下最小表单的 HTML 开始，逐步渐进增强：

<!DOCTYPE html>
<html lang="zh-cn">
  <head></head>
  <body>
    <form>
      <div>
        <label>Name:</label>
        <input type="text" name="name" required />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" required />
      </div>
      <div>
        <label>Message:</label>
        <textarea name="message" required></textarea>
      </div>
      <button>Submit</button>
    </form>
  </body>
</html>

引入PetiteVue

　　引入方式也非常容易，在head标签里添加script就行了。这里我借老东家字节的CDN来引入。另外提一句，字节跳动静态资源公共库用着还是不错的。👉白嫖点我

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/petite-vue/0.4.1/petite-vue.iife.js" type="application/javascript" defer init></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

defer属性使脚本在页面完成解析后执行。
init属性告诉 petite-vue 自动查找和初始化页面上的所有包含 v-scope 的元素。

v-scope属性

　　v-scope属性的作用是标记页面上应由 petite-vue 控制的区域。就像Alpine的x-data，其范围可以存储属性和方法。

<body>
  <form v-scope="ContactForm()">
    <!-- ... -->
  </form>
  <script>
    function ContactForm() {
      return {};
    }
  </script>
</body>

数据双向绑定

　　要设置数据双向绑定，我们需要将formData对象添加到作用域（您可以选择不同的名称）并将其属性通过v-model链接到输入，这个和Vue完全一致。这时候当您在输入元素中键入内容时，属性值会自动更新🧙‍♂。

<body>
  <form v-scope="ContactForm()">
    <div>
      <label>Name:</label>
      <input type="text" name="name" required v-model="formData.name" />
    </div>
    <div>
      <label>Email:</label>
      <input type="email" name="email" required v-model="formData.email" />
    </div>
    <div>
      <label>Message:</label>
      <textarea name="message" required v-model="formData.message"></textarea>
    </div>
    <button>Submit</button>
  </form>
  <script>
    function ContactForm() {
      return {
        formData: {
          name: "",
          email: "",
          message: "",
        },
      };
    }
  </script>
</body>

处理提交事件

　　通过@submit表单元素发出一个提交事件，您可以使用该指令收听。首先注册一个记录表单数据的简单提交监听器。添加.prevent修饰符以防止浏览器提交原生表单请求。

<body>
  <form v-scope="ContactForm()" @submit.prevent="submitForm">
    <!-- ... -->
    <button>Submit</button>
  </form>
  <script>
    function ContactForm() {
      return {
        formData: {
          // ...
        },
        submitForm() {
          console.log(JSON.stringify(this.formData));
        },
      };
    }
  </script>
</body>

　　就是这样，使用 petite-vue 创建表单就完成了🎉。后序可以使用Axios或者原生的Fetch来将数据提供给后端。如有其他问题，欢迎留言交流。