之前写过一篇 使用 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来将数据提供给后端。如有其他问题,欢迎留言交流。
网站地址:https://blog.yujiay.wang
网站图标地址:https://blog.yujiay.wang/img/BlogHsvg.png
网站介绍:爱 Codeing 爱生活
简介:中国执业律师,热爱生活,分享法律知识和随笔文章,提供“商务+法务+财务+税务”四务一体化服务。
链接:https://wucongjiang.com
图标:https://wucongjiang.com/wp-content/uploads/2024/12/avatar.jpg
已添加友链,也请贵站做一下友链。
网站名称: 小鱼饼干
网站链接: https://cookiesyu.wuaze.com/
网站LOGO: https://cookiesyu.wuaze.com/logo.png
网站描述 : 计算机运维爱好者个人心得分享blog,交流学习,希望交个朋友