php网站建设的公司国家建设协会官方网站
文章目录
- 前言
- 一、引入 Vue.js
- 二、创建表单结构
- 1. 数据绑定
- 2. 事件处理
- 三、创建 Vue 实例
- 1. 数据初始化
- 2. 提交方法
- 四、外部访问 Vue 实例数据
- 五、完整代码
- html
- css
- javascript
- 浏览器运行结果
- 总结
| 标题 | 详情 |
|---|---|
| 作者 | JosieBook |
| 头衔 | CSDN博客专家资格、阿里云社区专家博主、软件设计工程师 |
| 博客内容 | 开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生 |
| 欢迎感谢 | 👍点赞、✍评论、⭐收藏 |
前言
在现代前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，它使得构建用户界面变得更加简单和高效。本文将通过一个简单的表单示例，介绍如何使用 Vue.js 进行数据绑定和事件处理。
一、引入 Vue.js
首先，我们需要在 HTML 文件中引入 Vue.js。可以通过 CDN 直接引入：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
二、创建表单结构
接下来，我们创建一个简单的表单，包含昵称、年龄、单身状态和喜欢的选项。以下是表单的基本结构：
<div id="form"><label for="username">昵称：</label><input type="text" id="username" v-model.trim="username"><br><label for="age">年龄：</label><input type="number" id="age" v-model.number="age"><br><label for="checkbox">单身：</label><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><br><label>喜欢：</label><input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">码代码</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">码文字</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">买买买</label><br><br><input type="submit" v-on:click="submit"/><br/>
</div>
1. 数据绑定
在这个表单中，我们使用了 v-model 指令来实现数据双向绑定。这样，当用户在输入框中输入内容时，Vue.js 会自动更新对应的数据属性。
v-model.trim：用于过滤用户输入的首尾空格。v-model.number：将输入值自动转换为数字类型。
2. 事件处理
我们在提交按钮上使用 v-on:click 指令来绑定一个提交事件。当用户点击提交按钮时，会调用 submit 方法。
三、创建 Vue 实例
接下来，我们需要创建一个 Vue 实例，并定义数据和方法：
var vm = new Vue({el: '#form',data: {// 初始值username: 'username ',age: 18,checked: false,checkedNames: ['Runoob']},methods: {// 提交表单submit: function() {var params = new Object();params.username = this.username;params.age = this.age;params.checked = this.checked;params.checkedNames = this.checkedNames;alert("formdata：" + JSON.stringify(params));}}
});
1. 数据初始化
在 data 属性中，我们定义了一些初始值，包括 username、age、checked 和 checkedNames。这些值会与表单中的输入控件进行绑定。
2. 提交方法
在 methods 属性中，我们定义了一个 submit 方法，用于处理表单提交。在这个方法中，我们将表单数据打包成一个对象，并通过 alert 显示出来。
四、外部访问 Vue 实例数据
我们还可以在 Vue 实例外部访问这些数据：
console.log(vm.username);
console.log(vm.age);
console.log(vm.checked);
console.log(vm.checkedNames);
五、完整代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>联系我们 - 企业名称</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><link rel="stylesheet" href="myCss.css">
</head><body><div id="form"><label for="username">昵称：</label><input type="text" id="username" v-model.trim="username"><br><label for="age">年龄：</label><input type="number" id="age" v-model.number="age"><br><label for="checkbox">单身：</label><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><br><label>喜欢：</label><input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">码代码</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">码文字</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">买买买</label><br><br><input type="submit" v-on:click="submit"/><br/>
</div>
<!-- Font Awesome -->
<script src="myJsp.js" defer></script></body>
</html>
css
/* 基础重置 */
* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;background-color: #f0f2f5;line-height: 1.6;padding: 2rem;
}/* 表单容器 */
#form {max-width: 600px;margin: 0 auto;background: white;padding: 2rem;border-radius: 12px;box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}/* 表单元素通用样式 */
label {display: block;color: #2d3748;font-weight: 500;margin-bottom: 0.5rem;font-size: 0.9rem;
}input:not([type="checkbox"]) {width: 100%;padding: 0.8rem;border: 2px solid #e2e8f0;border-radius: 8px;font-size: 1rem;transition: all 0.3s ease;
}input:focus:not([type="checkbox"]) {outline: none;border-color: #4F46E5;box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}/* 复选框样式 */
input[type="checkbox"] {position: relative;width: 18px;height: 18px;margin-right: 0.5rem;cursor: pointer;
}input[type="checkbox"]::before {content: "";display: block;width: 18px;height: 18px;border: 2px solid #cbd5e0;border-radius: 4px;background: white;transition: all 0.2s ease;
}input[type="checkbox"]:checked::before {background: #4F46E5;border-color: #4F46E5;
}input[type="checkbox"]:checked::after {content: "✓";position: absolute;left: 4px;top: 1px;color: white;font-size: 12px;
}/* 提交按钮 */
input[type="submit"] {background: linear-gradient(135deg, #4F46E5, #7C3AED);color: white;font-weight: 600;padding: 1rem 2rem;border: none;border-radius: 8px;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;
}input[type="submit"]:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}input[type="submit"]:active {transform: translateY(0);
}/* 显示区域样式 */
span {display: block;margin: 1rem 0;padding: 1rem;background: #f8fafc;border-radius: 8px;color: #475569;
}/* 响应式设计 */
@media (max-width: 480px) {body {padding: 1rem;}#form {padding: 1.5rem;}input:not([type="checkbox"]) {padding: 0.7rem;}
}/* 自定义复选框布局 */
.checkbox-group {display: flex;gap: 1rem;margin: 1rem 0;
}.checkbox-item {display: flex;align-items: center;
}
javascript
//.number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
//<input v-model.number="age" type="number">
//.trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
//<input v-model.trim="msg">var vm=new Vue({el: '#form',data: {//初始值username:'username ',age:18,checked : false,checkedNames: ['Runoob']},methods:{//提交表单submit:function(){var params=new Object();params.username=this.username;params.age=this.age;params.checked=this.checked;params.checkedNames=this.checkedNames;alert("formdata："+JSON.stringify(params));}}
});//vue外部获取vue内部值
console.log(vm.username);
console.log(vm.age);
console.log(vm.checked);
console.log(vm.checkedNames);
浏览器运行结果
点击提交按钮后：
总结
通过这个简单的表单示例，我们学习了如何使用 Vue.js 进行数据绑定、事件处理以及如何访问 Vue 实例中的数据。Vue.js 的双向数据绑定特性使得表单处理变得更加直观和简便，极大地提高了开发效率。
希望本文能够帮助你更好地理解 Vue.js 的基本用法，并在实际项目中灵活运用。
Hello，我是 JosieBook 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。