Web开发 Day1

keyborad pianist2026-02-19 11:11

目录

HTML

页面基本结构

表单标签

表格标签

常见的其他标签

CSS

CSS引入方式

行内样式

内部样式

外部样式

CSS选择器

JS

引用

内部脚本

外部脚本

js基础语法

变量、常量

数据类型

函数

JS自定义对象

定义格式

调用格式

动态加载数据

DOM操作

JS事件监听

Ajax

Axios

Axios-请求方式别名

实现动态加载数据

总结

VUE基础

Vue快速入门

Vue常用指令

v-for

v-bind

v-if

v-model

v-on

我是一个前端小白，正处于学习阶段。

欢迎各位将文章有问题的地方在评论区提出指正！！！

HTML

页面基本结构

html 复制代码 
<!-- 声明文档类型 -->
<!DOCTYPE html>
<html lang="en">
    <!-- 头部 -->
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 移动设备显示方式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题 -->
    <title>HTML入门</title>
</head>



<!-- 主体 -->
<body>
    <h1>HTML入门</h1>
    <img src="img/ll.jpg" >
</body>
</html>

基本语法

1）不区分大小写，推荐小写

2）属性值单引号和双引号都可以，推荐双引号

表单标签

<form>

表单项：不同类型的 input 元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式 (text/password/...)

<select>：定义下拉列表

<textarea>：定义文本域

<button>: 定义按钮

属性：

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式。GET、POST

GET：请求参数通过URL查询字符串传递，如 url?key1=val1&key2=val2；请求参数长度有限制，受URL长度限制（取决于浏览器）；不安全。

POST：请求参数通过请求体传递；请求参数长度无限制 ；相对安全。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <form>
        <label for = "name">用户名:</label>
        <input type="text"  name="name" placeholder="请输入用户名">

        <label for = "gender">性别:</label>
        <select name = "gender">
            <option value="">请选择</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>

        <!-- <button type="button">查询</button> -->
        <!-- 提交按钮 有数据交互-->
        <button type="submit">查询</button>
        <button type="reset">重置</button>
       

    </form>
</body>
</html>

如果是button属性，没有数据的交互

表格标签

<table>：定义表格

<thead> 定义表格头部(可选)

<tr> 定义行，可以包含多个<th>

<th> 表头单元格，具备居中效果，可以包裹内容

<tbody> 定义表格主体(可选)

<tr> 定义表格中的一行，可以包含多个 <td>

<td> 普通单元格，可以包裹内容

html 复制代码 
 <!-- 表格 -->
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>用户名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>

常见的其他标签

标题标签：<h1> - <h6>

音频标签：<audio>

视频标签：<video>

段落标签：<p>...</p>

换行标签：<br>

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML其他常见标签</title>
</head>
<body>
  <!-- 标题标签 -->
  <h1>HTML其他常见标签</h1>
  <h2>1. 标题标签</h2>
  <h3>1.1 标题标签</h3>
  <h4>1.1.1 标题标签</h4>
  <h5>1.1.1.1 标题标签</h5>
  <h6>1.1.1.1.1 标题标签</h6>

  <!-- 图片标签 -->
  <img src="img/1.png">

  <!-- 超链接标签 
    href: 超链接的地址; 
    target: 超链接的打开方式; 
      _self: 默认值, 在当前页面打开; 
      _blank: 在新窗口打开; 
  -->
  <a href="https://www.baidu.com" target="_blank">百度</a>

  <!-- 视频标签 
    src: 视频的地址; 
    controls: 是否显示控制条; 
    一般建议: 宽度和高度 , 只设置一个, 另一个会等比例缩放 ;
  -->
  <video src="video/news.mp4" controls width="500px"></video>

  <!-- 音频标签 
    src: 音频的地址; 
    controls: 是否显示控制条; 
    一般建议: 宽度和高度 , 只设置一个, 另一个会等比例缩放 ;
  -->
  <audio src="audio/news.mp3" controls></audio>

  <!-- 段落 -->
  <p>这是一个段落时代就开始的开发建设看到JFK数据库的房间</p>
  <p>这是一个段落时代就开始的开发建设看到JFK数据库的房间</p>
  <p>这是一个段落时代就开始的开发建设看到JFK数据库的房间</p>

  <!-- 换行 -->
  这是一个段落时代就开始的开发建设看到JFK数据库的房间<br>
  这是一个段落时代就开始的开发建设看到JFK数据库的房间<br>
  这是一个段落时代就开始的开发建设看到JFK数据库的房间<br>
</body>
</html>

CSS

CSS引入方式

行内样式：写在标签的style属性中（配合JavaScript使用）

内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

外部样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

行内样式

html 复制代码 
<h1 style="color: gray;">测试</h1>

内部样式

html 复制代码 
<style>
  span {
    color: gray;
  }
</style>

外部样式

html 复制代码 
<link rel="stylesheet" href="css/news.css">

CSS选择器

html 复制代码 
<style>
  span {
    color: gray;
  }
</style>

JS

引用

内部脚本

将JS代码定义在HTML页面中

JavaScript代码必须位于 <script></script> 标签之间

在HTML文档中，可以在任意地方，放置任意数量的 <script>

一般会把脚本置于 <body> 元素的底部，可改善显示速度

html 复制代码 
<body>
  <!-- 页面内容 -->
  
  
  <script>
    alert('Hello World');//弹窗
  </script>
</body>

外部脚本

将 JS代码定义在外部 JS文件中，然后引入到HTML页面中

javascript 复制代码 
alert('Hello World');
html 复制代码 
<script src="js/demo.js"></script>

js基础语法

变量、常量

JS中用let 关键字来声明变量 (弱类型 语言，变量可以存放不同类型的值)。

变量名需要遵循如下规则：

只能用 字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头

变量名严格区分大小写，如 name 和 Name 是不同的变量

不能使用关键字，如：let、var、if、for等

javascript 复制代码 
<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
弹窗结果是Hello
</script>

JS中用 const关键字来声明常量 。 一旦声明，常量的值就不能改变（不可以重新赋值）。

javascript 复制代码 
<script>
    //常量
    const PI = 3.14;
    
    console.log(PI);
</script>

数据类型

基本数据类型和引用数据类型（对象）。

基本数据类型：
number ：数字（整数、小数）

boolean ：布尔。true，false

null ：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的

undefined ：当声明的变量未初始化时，该变量的默认值是 undefined

string ：字符串，单引号("")、双引号('')、反引号(``)皆可，推荐使用单引号

输出方式

alert('')

Console.log('')

函数

①.具名函数

javascript 复制代码 
function add(参数1, 参数2 ...){
   //要执行的代码
}
javascript 复制代码 
//定义函数
function add(a,b){
    return a + b;
}
//调用函数
let result = add(10,50);
console.log(result);

②.匿名函数(函数表达式)

javascript 复制代码 
let add = function(参数1, 参数2){
   //要执行的代码
}
javascript 复制代码 
//定义匿名函数
let add = function(a,b){
    return a + b;
}

//调用函数
let result = add(10,50)
consule.log(result)

箭头函数

javascript 复制代码 
let add = (参数1, 参数2) => {
   //要执行的代码
}
javascript 复制代码 
let add = (a,b) =>{
    return a + b;
}

函数调用

javascript 复制代码 
let result = add(10,20);
alert(result);

JS自定义对象

定义格式
javascript 复制代码 
let 对象名 = {
    属性名1 : 属性值1,
    属性名2 : 属性值2,
    属性名3 : 属性值3,
    方法名: function(形参列表){}
}
javascript 复制代码 
let user = {
    name : 'Tom',
    age : 20,
    gender : '男',
    sing: function(){
        alert(this.name+'唱歌')

  //sing:(){
        //alert(this.name+'唱歌')
    }

}
调用格式
javascript 复制代码 
对象名.属性名;
对象名.方法名();
javascript 复制代码 
console.log(user.name);
user.sing();

动态加载数据

1)点击查询按钮时，搜索选项中的内容，并将其打印到控制台。（使用js新语法）

2）点击清空按钮时，清空搜索栏

DOM操作

文档对象模型（Document object model）

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text:文本对象

Comment:注释对象

核心思想：将网页中所有的元素当做对象处理。

操作步骤

1）获取需要操作的DOM元素对象

2）操作DOM对象的属性或方法https://www.w3school.com.cn/js/js_htmldom.asp

获取DOM对象

1）根据CSS选择器来获取DOM元素，获取匹配到的第一个元素:document.querySelector('选择器')

2）根据CSS选择器来获取DOM元素，获取匹配到的第一个元素:document.querySelectorAll('选择器')

javascript 复制代码 
    <script>
        //1. 在点击 查询 按钮时, 获取搜索栏中输入的姓名、性别、职位，然后将其输出到控制台 （使用JS新语法）
        //1.1 DOM操作、事件监听
        document.querySelector(".search-btn").addEventListener("click", () => {
            let name = document.querySelector("#name").value;
            let gender = document.querySelector("#gender").value;
            let job = document.querySelector("#job").value;
            console.log(name, gender, job);
        });

        //2. 点击 清空 按钮时, 清空搜索栏中的内容（使用JS新语法）
        document.querySelector(".clear-btn").addEventListener("click", () => {
            document.querySelector("#name").value = "";
            document.querySelector("#gender").value = "";
            document.querySelector("#job").value = "";
        });
    </script>

JS事件监听

事件是什么？

鼠标移动到元素中，按钮被点击。

事件监听是什么？

按钮点击出现一个弹窗。也好吃呢各位事件绑定或注册事件。

语法:

事件源.addEventListener('事件类型',事件触发执行的函数);

事件源：哪个dom元素出发了事件，要获取Dom元素

事件类型:用什么方法触发，比如：鼠标单击click

事件触发执行的函数：要做什么事

javascript 复制代码 
<body>

  <button id="btn1">点击1</button>

  <button id="btn2">点击2</button>

  <script>
    //1. 事件监听 --- 事件源.addEventListener(事件类型, 事件处理函数) ---> 推荐
    //1.1 click --- 单击事件
    document.querySelector("#btn1").addEventListener('click', () =>{
      alert("点击1");
    })
    document.querySelector("#btn1").addEventListener('click', () =>{
      alert("点击1111");
    })
    
    //1.2 onclick --- 单击事件 (了解)
    document.querySelector("#btn2").onclick = function(){
      alert("点击2");
    }
    document.querySelector("#btn2").onclick = function(){
      alert("点击2222");
    }
  </script>
</body>

Ajax

是什么？

Asynchronous JavaScript And XML，异步的JavaScript和XML

有什么用？

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面 的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

像这种推荐，他动态进行变换，但是并没有更改地址。

Axios

Axios 对原生的Ajax进行了封装，简化书写，快速开发

官网：https://www.axios-http.cn/

步骤：

1）引入Axios的js文件

2）使用Axios发送请求，并获取响应结果

javascript 复制代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
javascript 复制代码 
  axios({
    method: 'GET',
    url: 'https://......../list'
  }).then((result) => {
    console.log(result.data);     //成功回调函数
  }).catch((err) => {
    alert(err);                    //失败回调函数
  });

method：请求方式，GET/POST

url：请求路径

data：请求数据(POST)

params：发送请求时携带的url参数 如：...?key=val

javascript 复制代码 
<body>
  
  <button id="btn">获取数据</button>

  <!-- 第一步: 引入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    document.querySelector("#btn").addEventListener("click", () => {
      //发送异步请求 - https://web-server.../emps/list
      axios({
        url: "https://web-server.../emps/list",
        method: "get"
      }).then((result) => { // 成功回调
        console.log(result.data);
      }).catch((err) => { // 失败回调
        console.log(err);
      });
    });
  </script>
</body>

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名

格式：axios.请求方式(url [, data [, config]])

javascript 复制代码 
    //请求方式别名:get,post,putt,delette,patch
  axios.get('https://web-server....../emps/list').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

我们代码是从上到下写的，但是有的时候执行并不是按照写代码的顺序执行，这对于网络的维护成本很大。

可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。

javascript 复制代码 
const search = async () => {
  const result = await axios.get('https:...../emps/list');
  const empList = result.data;
}

注意： await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值 。

javascript 复制代码 
<body>
  
  <button id="btn">获取数据</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    document.querySelector("#btn").addEventListener("click", async () => {
      const result = await axios.get("https://.../emps/list");
      console.log(result.data);
    });
  </script>
</body>
javascript 复制代码 
<body>
  
  <button id="btn">获取数据</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    document.querySelector("#btn").addEventListener("click", () => {
       //请求方式别名
       axios.get("https://web-server...../emps/list").then((result) => { // 成功回调
        console.log("--------------------------------");
        console.log(result.data);
       }).catch((err) => { // 失败回调
        console.log(err);
       });
       
       console.log("========================");
       console.log("========================");
       console.log("========================");
    });
  </script>
</body>

第一段代码执行顺序：点击按钮 → 执行 await axios.get（暂停函数，等待接口请求完成）→ 请求完成后，执行 console.log(result.data) → 函数结束。

✅ 特点：console.log(result.data) 一定等请求完成后才执行。

第二段代码执行顺序：点击按钮 → 执行 axios.get（发起异步请求，但不暂停函数）→ 立即执行后面的 3 行 console.log("========================") → 接口请求完成后，才执行 .then 里的 console.log(result.data)。

✅ 特点：console.log("========================") 先执行，console.log(result.data) 后执行（因为异步请求需要时间）。

实现动态加载数据

修改后为

总结

javascript 复制代码 
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //1. 在点击 查询 按钮时, 获取搜索栏中输入的姓名、性别、职位，然后将其输出到控制台 （使用JS新语法）
        //1.1 DOM操作、事件监听
        document.querySelector(".search-btn").addEventListener("click", () => {
            let name = document.querySelector("#name").value;
            let gender = document.querySelector("#gender").value;
            let job = document.querySelector("#job").value;
            
            //2. 发送请求获取数据 https://..../emps/list?name=&gender=&job=
            query(name, gender, job);
        });

        // `` 引起来的字符串(模板字符串) -- 可以换行, 可以字符串拼接
        function query(name, gender, job) {
            let tbody = document.querySelector("#tbody");
            tbody.innerHTML = '';

            axios.get(`https://...../emps/list?name=${name}&gender=${gender}&job=${job}`).then((result) => {
                let empList = result.data.data;
                //3. 遍历empList, 将数据展示到表格中
                empList.forEach((item) => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td><img src="${item.image}" alt="头像" class="avatar"></td>
                            <td>${item.gender == 1 ? '男' : '女'}</td>
                            <td>${item.job == 1 ? '班主任' : item.job == 2 ? '讲师' : item.job == 3 ? '学工主管' : item.job == 4 ? '教研主管' : '咨询师'}</td>
                            <td>${item.entrydate}</td>
                            <td>${item.updatetime}</td>
                        </tr>`
                });
            });
        }

        //2. 点击 清空 按钮时, 清空搜索栏中的内容（使用JS新语法）
        document.querySelector(".clear-btn").addEventListener("click", () => {
            document.querySelector("#name").value = "";
            document.querySelector("#gender").value = "";
            document.querySelector("#job").value = "";

            //查询
            query("", "", "");
        });

        //3. 页面加载完成后, 发送请求获取数据
        query("", "", "");
    </script>

VUE基础

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

构建用户界面

渐进式

Vue快速入门

准备

1）引入Vue模块（官方提供）

2）创建Vue程序的应用实例，控制视图的元素

3）准备元素(div)，被Vue控制

数据驱动视图

1）准备数据

2）通过插值表达式渲染页面

javascript 复制代码 
// 3）准备元素(div)，被Vue控制
div id="app">

</div>

// 1）引入Vue模块
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; 
//2)创建Vue程序的应用实例，控制视图的元素
 createApp({
    
      
    
  }).mount("#app"); //被Vue控制
  
  
</script>
javascript 复制代码 
<div id="app">
    //2）通过插值表达式渲染页面
    <h1>{{message}}</h1>
</div>


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

 createApp({
        //1）准备数据
        data() {
      return {
        message: "Hello Vue"
      }
    }     
      
    
  }).mount("#app");
  
  
</script>

Vue常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令 具有不同的含义，可以实现不同的功能。 常用指令：

<p v-xxx="..."> ... </p>

|-----------------------|--------------------------------|
| 指令 | 作用 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-if/v-else-if/v-else | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

要在哪个标签循环展示多次，就写在哪个标签上。

语法：

javascript 复制代码 
<tr v-for="(item,index) in items" :key="item.id"> {{item}}</tr>

参数说明：

items 为遍历的数组

item 为遍历出来的元素

index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for="item in items

key：

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

javascript 复制代码 
    <tr v-for="(emp,index) in empList" :key="emp.id">
              <td>{{index + 1}}</td>
              <td>{{emp.name}}</td>
              <td>
                <img class="avatar" :src="emp.image" v-bind:alt="emp.name" />
              </td>
              <td>{{emp.gender == 1 ? '男' : '女'}}</td>
              <td>
                <span v-if="emp.job == 1">班主任</span>
                <span v-else-if="emp.job == 2">讲师</span>
                <span v-else-if="emp.job == 3">学工主管</span>
                <span v-else-if="emp.job == 4">教研主管</span>
                <span v-else-if="emp.job == 5">咨询师</span>
                <span v-else>其他</span>
              </td>
              <td>{{emp.entrydate}}</td>
              <td>{{emp.updatetime}}</td>
            </tr>

v-bind

由于 {{emp.image}} 插值表达式, 不能出现在标签内; 所以我们引用v-bind功能

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"

javascript 复制代码 
<img v-bind:src="item.image" width="30px">

简化:属性名="属性值"

javascript 复制代码 
<img :src="item.image" width="30px">

注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据，必须在data中定义。

v-if

可以在表单拉框选项时使用到

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

场景：要么显示，要么不显示，不频繁切换的场景

其它：可以配合 v-else-if / v-else 进行链式调用条件判断

javascript 复制代码 
<span v-if="gender == 1">男生</span>
<span v-else-if="gender == 2">女生</span>
<span v-else>未知</span>

v-model

用于数据的动态加载展示

作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据

语法：v-model="变量名"

javascript 复制代码 
createApp({
   data() {
      return {
        //定义数据模型，采集员工搜索表单数据
          name: '',
          gender: '',
          job: ''
      }
}).mount('#container')
javascript 复制代码 
<input type="text" id="name" v-model="name">

数据模型 与页面渲染彼此相互影响

javascript 复制代码 
<form class="search-bar">
        <label for="name">姓 名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="name"/>

        <label for="gender">性 别：</label>
        <select id="gender" name="gender" v-model="gender">
          <option value="">请选择</option>
          <option value="1">男</option>
          <option value="2">女</option>
        </select>

        <label for="job">职 位：</label>
        <select id="job" name="job" v-model="job">
          <option value="">请选择</option>
          <option value="1">班主任</option>
          <option value="2">讲师</option>
          <option value="3">学工主管</option>
          <option value="4">教研主管</option>
          <option value="5">咨询师</option>
        </select>
        <button type="button" class="query" v-on:click="search">查询</button>
        <button type="button" class="clear" @click="clear">清空</button>
      </form>
javascript 复制代码 
     //数据模型
        data() {
          return {
            name: '',
            gender: '',
            job: '',
            empList: []
          }
        },

v-on

作用：为html标签绑定事件**（添加事件监听）**

语法：

v-on:事件名="方法名"

简写为 @事件名="..."

javascript 复制代码 
<div id="app">
   <button type="button" v-on:click="search">查询</button>
   <button type="button" @click="clear">清空</button>
</div>

定义方法

javascript 复制代码 
 const app = createApp({
      data() {
          //...
      },
      methods: {
        search() {
          console.log('查询');
        },
        clear() {
          console.log('清空');
        }
      }
  }).mount("#app");

完整版

javascript 复制代码 
    <div class="container" id="app">
      <div class="title">员工信息管理</div>
      <form class="search-bar">
        <label for="name">姓 名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="name"/>

        <label for="gender">性 别：</label>
        <select id="gender" name="gender" v-model="gender">
          <option value="">请选择</option>
          <option value="1">男</option>
          <option value="2">女</option>
        </select>

        <label for="job">职 位：</label>
        <select id="job" name="job" v-model="job">
          <option value="">请选择</option>
          <option value="1">班主任</option>
          <option value="2">讲师</option>
          <option value="3">学工主管</option>
          <option value="4">教研主管</option>
          <option value="5">咨询师</option>
        </select>
        <button type="button" class="query" v-on:click="search">查询</button>
        <button type="button" class="clear" @click="clear">清空</button>
      </form>

      <div class="table-section">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>头像</th>
              <th>性别</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>更新时间</th>
            </tr>
          </thead>
          
          <!-- 注意:  {{emp.image}} 插值表达式, 不能出现在标签内; -->
          <tbody>
            <tr v-for="(emp,index) in empList" :key="emp.id">
              <td>{{index + 1}}</td>
              <td>{{emp.name}}</td>
              <td>
                <img class="avatar" :src="emp.image" v-bind:alt="emp.name" />
              </td>
              <td>{{emp.gender == 1 ? '男' : '女'}}</td>
              <td>
                <span v-if="emp.job == 1">班主任</span>
                <span v-else-if="emp.job == 2">讲师</span>
                <span v-else-if="emp.job == 3">学工主管</span>
                <span v-else-if="emp.job == 4">教研主管</span>
                <span v-else-if="emp.job == 5">咨询师</span>
                <span v-else>其他</span>
              </td>
              <td>{{emp.entrydate}}</td>
              <td>{{emp.updatetime}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
javascript 复制代码 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      
      createApp({
        //数据模型
        data() {
          return {
            name: '',
            gender: '',
            job: '',
            empList: []
          }
        },
        //方法
        methods: {
          async search(){
            //发送请求
            const result = await axios.get(`https://......../emps/list?name=${this.name}&gender=${this.gender}&job=${this.job}`);
            this.empList = result.data.data; 
          },
          clear(){
            this.name = '';
            this.gender = '';
            this.job = '';
            //查询
            this.search();
          }
        },
        //页面加载完成后, 执行查询 --> Vue初始化完毕后, 自动调用
        mounted(){
          this.search();
        }
      }).mount('#app')
相关推荐
坚持就完事了1 小时前
Python的类型注解
开发语言·python
wjs20241 小时前
HTML URL 编码
开发语言
Never_Satisfied1 小时前
在HTML & CSS中，可能导致父元素无法根据子元素的尺寸自动调整大小的情况
前端·css·html
wjs20242 小时前
Lua 循环
开发语言
We་ct2 小时前
LeetCode 101. 对称二叉树：两种解法（递归+迭代）详解
前端·算法·leetcode·链表·typescript
Evand J2 小时前
matlab GUI制作界面的一些笔记（入门）
开发语言·笔记·matlab
我是大猴子2 小时前
Java面经
java·开发语言
lyyl啊辉2 小时前
6. Vue开源三方UI组件库
vue.js
码云数智-大飞2 小时前
微前端架构落地实战：qiankun vs Module Federation 2026 深度对比与选型指南
前端·架构
热门推荐
01从零搭建一个 PHP 登录注册系统（含完整源码）02GitHub 镜像站点03使用 1panel面板 部署 php网站04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05openClaw安装飞书插件｜核心踩坑：spawn EINVAL 错误终极解决指南06AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot07让你的代码更整洁：10 个必知的 Kotlin 扩展函数08Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services09如何解决 OpenClaw “Pairing required” 报错：两种官方解决方案详解10openclaw 配置飞书 报错 应用未建立长连接