当前位置： 首页 > news >正文

【前端】WebStorm中使用 Vue.js 构建用户信息提交表单

news 来源：原创 2025/5/23 21:02:39

文章目录

  • 前言
  • 一、引入 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 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。

相关文章：

  • [C++面试] 迭代器与指针有什么区别？
  • nacos下载及安装
  • Flutter 学习之旅 之 flutter 不使用插件，实现简单带加载动画的 LoadingToast 功能
  • 力扣热题 100：二叉树专题经典题解析（前8道）
  • 嵌入式学习L6网络编程D3TCP
  • 百度百科更新！树莓集团宜宾项目的深远影响与意义
  • 【Azure 架构师学习笔记】- Azure Databricks (19) --Lakehouse
  • 我与DeepSeek读《大型网站技术架构》（10）- 维基百科的高性能架构设计分析
  • 中国证监会主席吴清：进一步优化差异化安排 更精准支持优质科技企业上市
  • VMware下载安装Ubuntu详解
  • 无头浏览器与请求签名技术-Cloudflare防护
  • Manus 演示案例：小红书笔记创作指南
  • 【UNIAPP】获取视频的第一帧作为封面（基于视频URL，Canvas）复制即用
  • JAVA面试_进阶部分_Ibatis与Hibernate的区别
  • ORB-SLAM2源码学习：总结篇(二)三大线程
  • Redis四种模式在Spring Boot框架下的配置
  • 深度解析：如何在 Vue 3 中安全访问子组件实例
  • 《Python基础教程》附录B笔记：Python参考手册
  • 掌握 ArcGIS Pro：古地图制作技巧与方法
  • 2025华为昇腾CANN训练营 2.0 之旅
  • WordPress添加首页引导页/如何优化搜索引擎
  • 建设音乐主题网站/深圳最好seo
  • 杭州拱墅网站建设/阿里巴巴seo排名优化
  • 网站建设公司违法/网站推广排名
  • 做网站注册页面/优化推广网站推荐
  • 灰色网站怎么做seo/优化网站软文