Vua学习入门案例

原创已于 2024-12-09 21:57:41 修改 · 786 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #前端框架 #前端

于 2024-11-12 23:52:51 首次发布

管理系统前端案例开发专栏收录该内容

3 篇文章

订阅专栏

一、目标

该案例为一个基于 Vue 3的简单用户信息查询界面，包含 HTML、CSS 和 JavaScript，展示了一个人员信息列表，并支持基本的查询功能。

二、代码解读

总体代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" name="name" v-model="name">

      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>

      职位:
      <select name="job" v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>
    
    
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <!-- v-for 用于列表循环渲染元素 -->
      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <!--?语法为v-bind : 属性名（HTML的属性如：src，herf） = “data中的对应属性”-->
        <td> <img v-bind:src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td>
          <span v-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
  </div>

  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name:'',
          gender:'',
          job:'',
          userList: [”your data“]
        }
      },
      methods: {
        search(){
          console.log(”your mes“);
        }
      },
    }).mount("#app");
  </script>
</body>

</html>

定义个各标签的风格属性：

table, th, td: 设置表格、表头和单元格的边框、线条和对齐方式。

#center, table: 使页面内容水平居中，并设置宽度为页面的 60%。

#center: 调整输入区域和表格之间的间距。

img: 控制头像图片大小为 50px。

input, select: 设置输入框和下拉菜单的样式，包括宽度、内边距、边框和圆角。

.btn: 为查询按钮设置背景颜色。

<style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>

姓名输入框: type="text" 的 <input> 元素，用于输入查询姓名，绑定 v-model="name"。

性别选择: 使用 <select> 下拉框选择“男”或“女”，v-model="gender" 绑定到 Vue 中的 gender 数据。

职位选择: <select> 下拉框，用于选择职位类型，如“讲师”、“班主任”或“其他”，v-model="job" 绑定到 job 数据。

查询按钮: 一个 type="button" 的按钮，点击时会调用 Vue 的 search 方法，在控制台输出查询条件。

    <div id="center">
      姓名: <input type="text" name="name" v-model="name">

      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>

      职位:
      <select name="job" v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>

用户列表表格

表头 (<tr><th>...</th></tr>)：

每列展示的字段包括序号、姓名、头像、性别、职位、入职时间、更新时间。

用户信息行 (<tr v-for="(user, index) in userList" :key="user.id">):

使用 Vue 的 v-for 指令循环渲染 userList 中的每个用户，并指定唯一键 :key="user.id"。

各列数据内容：

序号: {{index + 1}} 使用行号作为序号。

姓名: {{user.name}} 显示用户的姓名。

头像: 使用 v-bind:src 动态绑定头像图片的 src 路径，显示用户的头像。

性别:

用 v-if、v-else-if 和 v-else 判断 user.gender 值并显示“男”、“女”或“其他”。

职位:

使用 v-show 控制显示内容，user.job 为 1 显示“班主任”，为 2 显示“讲师”，否则显示“其他”。

入职时间: {{user.entrydate}} 显示用户的入职日期。

更新时间: {{user.updatetime}} 显示用户信息的最后更新时间。

 <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <!-- v-for 用于列表循环渲染元素 -->
      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <!--?语法为v-bind : 属性名（HTML的属性如：src，herf） = “data中的对应属性”-->
        <td> <img v-bind:src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td>
          <span v-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>

使用 Vue 3 的 <script type="module"> 标签和 createApp 函数来创建 Vue 实例：

name, gender, job:

分别代表查询条件中的姓名、性别和职位，绑定至页面的输入框和下拉框。

userList:

初始化用户数据列表，包含若干用户对象，每个对象包括 id、name、image、gender、job、entrydate、updatetime 等属性，模拟真实数据。

search:

定义了一个 search 方法，用于查询功能。

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name:'',
          gender:'',
          job:'',
          userList: [”your data“]
        }
      },
      methods: {
        search(){
          console.log(”your mes“);
        }
      },
    }).mount("#app");
  </script>