JS-Vue

什么是 JavaScript？

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是语法类似。
组成
- ECMAScript：规定了 JS 基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文件对象模型，用于操作 HTML 文档，如：改变标签内的内容、改变标签内字体样式等。

JS 核心语法

引入方式

内部脚本：将 JS 代码定义在 HTML 页面中
- JavaScript 代码必须位于<script></script>标签之间
- 在 HTML 文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

alert("Hello JavaScript!");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-引入方式</title>
</head>
<body>
  
  <!-- <script>
    // 内部脚本
    alert("Hello JS!");
  </script> -->
  
  <!-- 外部脚本 -->
  <script src="js/demo.js"></script>
</body>
</html>

基础语法

变量
数据类型
函数
自定义对象

变量&常量

变量

JS 中用 let 关键字来声明变量（弱类型语言，变量可以存放不同类型的值）。
变量名需要遵循如下规则：
- 只能用字母、数字、下划线(_)、美元符号($)组成，且数字不能开头
- 变量名严格区分大小写，如 name 和 Name 是不同的变量
- 不能使用关键字，如：let、var、if、for 等

常量

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-基础语法</title>
</head>
<body>
  

  <script>
    // 变量
    let a = 10;
    a = "Hello";
    a = true;
    alert(a);// 弹出警告框，结果为 true

    // 常量
    const PI = 3.14;
    console.log(PI);// 输出到浏览器控制台
    document.write(PI);// 输出到 body 区域，不常用
  </script>
</body>
</html>

数据类型

JavaScript 的数据类型分为：基本数据类型和引用数据类型（对象）。
基本数据类型：
- number：数字（整数、小数、NaN(Not a Number)）
- boolean：布尔。true，false
- null：对象为空。JavaScript 是大小写敏感的，因此 null、Null、NULL 是完全不同的
- undefined：当声明的变量未初始化时，该变量的默认值是 undefined
- string：字符串，单引号、双引号、反引号皆可，推荐使用单引号
使用 typeof 运算符可以获取数据类型
模板字符串语法：
- ``（反引号）
- 内容拼接变量时，使用 ${} 包住变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-数据类型</title>
</head>
<body>
  

  <script>
    //1. 数据类型
    // alert(typeof 10); // number
    // alert(typeof 1.5); // number
    
    // alert(typeof true); // boolean
    // alert(typeof false); // boolean

    // alert(typeof "Hello");// string
    // alert(typeof 'JS'); // string
    // alert(typeof `JavaScript`); // string

    // let b = null;
    // alert(typeof b); // object
    // alert(b === null); // true，正确判断 null 写法

    // let a ;// 只声明，未手动赋值
    // alert(typeof a); // undefined
    
    // 2. 模板字符串
    let name = "张三";
    let age = 18;
    alert('我是' + name + '，我今年' + age + '岁');
    alert(`我是${name}，我今年${age}岁`);
    
  </script>
</body>
</html>

函数

介绍：函数（function）是被设计用来执行特定任务的代码块，方便程序的封装复用。

具名函数

定义：JavaScript 中的函数通过 function 关键字进行定义，语法为：

function functionName(参数1, 参数2 ...){
    // 要执行的代码
}

调用：函数名称（实际参数列表）

let result = add(10, 20);
alert(result);

注意：由于 JS 是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

匿名函数

匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数

// 函数表达式
let add = function(a, b){
    return a + b;
}

// 箭头函数
let add = (a, b) => {
    return a + b;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-函数</title>
</head>
<body>
  

  <script>
    // 1. 函数的定义及调用 - 具名函数
    // function add(a, b){
    //   return a + b;
    // }
    // alert(add(10, 20, 30));// 30

    // 2. 函数的定义及调用 - 匿名函数
    // 2.1 函数表达式
    // let add = function(a, b){
    //   return a + b;
    // }
    // alert(add(10, 20));// 30

    // 2.2 箭头函数
    let add = (a, b) => {
      return a + b;
    }
    alert(add(10, 20));// 30
  </script>
</body>
</html>

自定义对象

定义格式

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名: function (形参列表) {}// 其中，: function 可以省略
}

调用格式

// 对象名.属性名;
console.log(user.name)
// 对象名.方法名();
user.sing();

json

概念：JavaSript Object Notation，JavaScript 对象标记法（JS 对象标记法书写的文本）。
由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-函数</title>
</head>
<body>
  

  <script>
    // 1. 自定义对象
    // let person = {
    //   name: "张三",
    //   age: 18,
    //   sex: "男",
    //   // 方法
    //   sayHello: function(){
    //     alert("我是" + this.name + "，我今年" + this.age + "岁");
    //   }
    // }
    // let person = {
    //   name: "张三",
    //   age: 18,
    //   sex: "男",
    //   // 方法
    //   sayHello(){
    //     alert("我是" + this.name + "，我今年" + this.age + "岁");
    //   }
    // }
    // let person = {
    //   name: "张三",
    //   age: 18,
    //   sex: "男",
    //   // 方法
    //   sayHello : () => {// 注意：在箭头函数中，this 并不指向当前对象，指向的是当前对象的父级对象【不推荐】
    //     alert("我是" + this.name + "，我今年" + this + "岁");// 这里的 this 是 [object Window]
    //   }
    // }
    // alert(person.name);
    // person.sayHello();
    
    // 2. json
    let person = {
      name: "Scroll",
      age: 0
    }
    alert(JSON.stringify(person));// {"name":"Scroll","age":0}，将 js 对象转换为 json 字符串
    let jsonStr = '{"name":"Scroll","age":0}';
    alert(JSON.parse(jsonStr).name);// Scroll，将 json 字符串转换为 js 对象
    alert(JSON.parse(jsonStr).age);// 0，将 json 字符串转换为 js 对象
  </script>
</body>
</html>

DOM

概念：Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过 DOM，就能够对 HTML 进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 时间作出反应
- 添加和删除 HTML 元素

DOM 操作

DOM 操作核心思想：将网页中所有的元素当作对象来处理。（标签的所有属性在该对象上都可以找到）
操作步骤：
- 获取要操作的 DOM 元素对象
- 操作 DOM 对象的属性或方法（查文档或 AI）
获取 DOM 对象
- 根据 CSS 选择器来获取 DOM 元素，获取匹配的第一个元素：document.querySelector('选择器')
- 根据 CSS 选择器来获取 DOM 元素，获取匹配到的所有元素：document.querySelectorAll('选择器')
  
  注意：得到的是一个 NodeList 节点集合，是一个伪数组（有长度、有索引的数组，但没有数组的操作方法）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    // 1. 修改第一个 h1 标签中的文本内容
    // 1.1 获取 DOM 对象
    // let title1 = document.querySelector("#title1");
    let h1 = document.querySelectorAll("h1");
    // 1.2 调用 DOM 对象中属性或方法
    // title1.innerHTML = "22222";
    h1[0].innerHTML = "22222";
  </script>
</body>
</html>

JS 事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript 可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。
语法：事件源.addEventListener('事件类型', 事件触发执行的函数);
事件监听三要素
- 事件源：哪个 dom 元素触发了事件，要获取 dom 元素
- 事件类型：用什么方式触发，比如：鼠标单击 click
- 事件触发执行的函数：要做什么事
早期版本写法（了解）：事件源.on事件 = function() { ... }
区别：on 方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS事件</title>
</head>
<body>
  
  <input type="button" id="btn1" value="点我一下试试1">
  <input type="button" id="btn2" value="点我一下试试2">

  <script>
    // 元素.onclick = 函数，属于DOM0 级事件，写法老旧；只能设置一个点击事件；不能解绑单个事件，只能清空，不推荐
    // DOM0 级事件：最早最老的事件写法，没有正式标准，浏览器默认支持
    // DOM2 级事件：W3C 制定正式标准，规范统一，功能更强
    document.getElementById('btn1').onclick = function() {
      alert('点击了按钮1')
    }
    // 元素.addEventListener('事件名', 函数)，DOM2 级标准事件，兼容性强、功能最全；支持事件解绑、事件冒泡 / 捕获控制；
    // 同一个元素可以绑定多个点击事件，互不覆盖，推荐使用
    document.querySelector('#btn2').addEventListener('click', () => {
      alert('点击了按钮2')
    });
  </script>
</body>
</html>

案例：实现表格数据行鼠标移入移出隔行换色效果

需求：实现鼠标移入数据行时，背景色改为#f2e2e2，鼠标移出时，再将背景色改为白色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px; /* 控件之间的间距 */
            margin: 20px 0;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 260px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd; /* 边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 左对齐 */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .avatar {
            width: 30px;
            height: 30px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #b5b3b3; /* 灰色背景 */
            color: white; /* 白色文字 */
            text-align: center; /* 居中文本 */
            padding: 10px 0; /* 上下内边距 */
            margin-top: 30px;
        }

        #container {
            width: 80%; /* 宽度为80% */
            margin: 0 auto; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>

        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名">

            <label for="gender">性别：</label>
            <select id="gender" name="gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="position">职位：</label>
            <select id="position" name="position">
                <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="submit">查询</button>
            <button type="reset">清空</button>
        </form>

        <!-- 表格展示区 -->
        <table>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <!-- 表格主体内容 -->
            <tbody>
                <tr>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
                    <td>讲师</td>
                    <td>2021-06-15</td>
                    <td>2024-09-16 15:30</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>任盈盈</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
                    <td>咨询师</td>
                    <td>2021-07-20</td>
                    <td>2024-09-17 09:00</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>向问天</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>任我行</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>教研主管</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>田伯光</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
                    <td>班主任</td>
                    <td>2021-06-15</td>
                    <td>2024-09-16 15:30</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>不戒</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
                    <td>班主任</td>
                    <td>2021-07-20</td>
                    <td>2024-09-17 09:00</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>左冷禅</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>定逸</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>东方兄弟</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>讲师</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>金庸</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>咨询师</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 页脚版权区域 -->
        <footer class="footer">
            <p>江苏传智播客教育科技股份有限公司</p>
            <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
        </footer>
    </div>

    <script>
        //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
        // 1. 获取所有 tr 行
        const trs = document.querySelectorAll('tr');

        // 2. 循环每一行，逐个添加事件
        trs.forEach(tr => {
            // 鼠标移入
            tr.addEventListener('mouseenter', () => {
                tr.style.backgroundColor = '#f2e2e2';
            });

        // 鼠标移出
            tr.addEventListener('mouseleave', () => {
                tr.style.backgroundColor = '#fff';
            });
        });
    </script>
</body>
</html>

常见事件

鼠标事件
- click：鼠标点击
- mouseenter：鼠标移入
- mouseleave：鼠标移出
键盘事件
- keydown：键盘按下触发
- keyup：键盘抬起触发
焦点事件
- focus：获得焦点触发
- blur：失去焦点触发
表单事件
- input：用户输入时触发
- submit：表单提交时触发

<!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>JS-事件-常见事件</title>
</head>

<body>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

    
    <script>
        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keyup: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })
    </script>
</body>

</html>

思考：在 html 中，我们引入了大量的 js 代码，这样代码的复用性会比较差，而且难以维护，我们该如何改进？

答：将其中的 js 代码抽取成一个独立的 .js 文件，再引入即可。同时，还可以将常用的方法抽取到工具类中，作为工具方法使用。

<!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>JS-事件-常见事件</title>
</head>

<body>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
    
    <script src="js/eventDemo.js" type="module"></script>
</body>

</html>

import { printLog } from './utils.js';
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
  printLog("我被点击了...");
})

//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
  printLog("鼠标移入了...");
})

//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
  printLog("鼠标移出了...");
})

//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
  printLog("键盘被按下了...");
})

//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
  printLog("键盘被抬起了...");
})

//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
  printLog("失去焦点...");
})

//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
  printLog("获得焦点...");
})

//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
  printLog("用户输入时触发...");
})

//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
  alert("表单被提交了...");
})

export function printLog(msg) {
  console.log(msg);
}

什么是 Vue？

Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。（官方： https://cn.vuejs.org/ ）
- 构建用户界面：基于数据渲染出用户看到的界面
- 框架：就是一套完整的项目解决方案，用于快速构建项目
  - 优点：大大提升前端项目的开发效率
  - 缺点：需要理解记忆框架的使用规则（参照官网）

案例：Vue 快速入门

准备
- 引入 Vue 模块（官方提供 https://unpkg.com/vue@3/dist/vue.esm-browser.js ）
- 创建 Vue 程序的应用实例，控制视图的元素
- 准备元素（div），被 Vue 控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
      data(){
        return{
          msg:'Hello Vue'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

Vue 常用指令

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

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

v-for

作用：列表渲染，遍历容器的元素或者对象的属性
语法：<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（会变化，不对应）
注意：遍历的数组，必须在 data 中定义；要想让哪个标签展示多次，就在哪个标签上使用 v-for 指令

v-bind

作用：动态为 HTML 标签绑定属性值，如设置 href，src，style 样式等。
语法：v-bind:属性名="属性值"
简化：:属性名="属性值"
注意：动态地为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在 data 中定义

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
- 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，不频繁切换的场景
- 其它：可以配合v-else-if / v-else进行链式调用条件判断
  - 注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if / v-else-if之后
v-show
- 语法：v-show="表达式"，表达式值为true，显示；false，隐藏
- 原理：基于 CSS 样式 display 来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景

v-if 和 v-show 的区别

v-if

v-show

v-model

作用：在表单元素上使用，双向数据绑定。可以方便地获取或设置表单项数据
语法：v-model="变量名"
注意：v-model中绑定的变量，必须在 data 中定义

v-on

作用：为 html 标签绑定事件（添加事件监听）
语法：
- v-on：事件名="方法名"
- 简写为：@事件名="..."

案例：员工列表数据渲染展示

将 empList 中的数据展示到表格中
搜素栏中当用户点击查询按钮时，需要获取到用户输入的表单数据，并输出出来

<!-- 由于代码过多，这里只展示修改部分 -->
<!-- 表格数据遍历渲染 -->
<tr v-for="item in empList" :key="item.id">
    <td>{{index + 1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.gender == 1 ? '男' : '女'}}</td>
    <!-- 注意：动态地为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据，必须在 data 中定义 -->
    <td><img :src="item.image" :alt="item.name"></td>
    <!-- 使用 v-if 来判断职位 -->
    <td>
        <span v-if="item.job == 1">班主任</span>
        <span v-else-if="item.job == 2">讲师</span>
        <span v-else-if="item.job == 3">学工主管</span>
        <span v-else-if="item.job == 4">教研主管</span>
        <span v-else-if="item.job == 5">咨询师</span>
        <span v-else>其他</span>
    </td>
    <!-- v-show：控制元素的显示与隐藏 -->
    <!-- <td>
        <span v-show="item.job == 1">班主任</span>
        <span v-show="item.job == 2">讲师</span>
        <span v-show="item.job == 3">学工主管</span>
        <span v-show="item.job == 4">教研主管</span>
        <span v-show="item.job == 5">咨询师</span>
	</td> -->
    <td>{{item.entrydate}}</td>
    <td>{{item.updatetime}}</td>
    <td>
        <button type="button">编辑</button>
        <button type="button">删除</button>
    </td>
</tr>

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

    createApp({
      data() {
        return {
          empList: [
            {
              "id": 1,
              "name": "谢逊",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2023-06-09",
              "updatetime": "2024-09-30T14:59:38"
            },
            {
              "id": 2,
              "name": "韦一笑",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2020-05-09",
              "updatetime": "2024-09-01T00:00:00"
            },
            {
              "id": 3,
              "name": "黛绮丝",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              "gender": 2,
              "job": "2",
              "entrydate": "2021-06-01",
              "updatetime": "2024-09-01T00:00:00"
            }
          ],
          searchForm: {
              name: '',
              gender: '',
              job: ''
          }  
        }
      },
      methods: {
          search() {
              console.log(this.searchForm)
          },
          reset() {
              this.searchForm = {
                  name: '',
                  gender: '',
                  job: ''
              }
          }
      }    
    }).mount('#container')
</script>

<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">

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

    <label for="position">职位：</label>
    <select id="position" name="position" v-model="searchForm.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" @click="search">查询</button>
    <button type="button" @click="reset">清空</button>
</form>

什么是 Ajax

介绍：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
作用：
- 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等
XML：（英文：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发
官网：https://www.axios-http.cn/

步骤：

引入 Axios 的 js 文件（参照官网）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

// method：请求方式，GET / POST
// url：请求路径
// data：请求数据（POST）
// params：发送请求时携带的 url 参数，如：...?key=val
axios({
	method: 'GET',
    url: 'https://web-server.faxont.net/emps/list'
// 成功回调函数    
}).then((result) => {
    console.log(result.data);
// 失败回调函数    
}).catch((err) => {
    alert(err);
});

Axios-请求方式别名

为了方便起见，Axios 已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data [, config]])，中括号[]代表可选参数，可传可不传

<!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>Ajax-Axios</title>
</head>
<body>
    
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script>
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
            // 对象解构赋值：从一个对象里，直接把里面的属性「单独拿出来」变成变量，不用再一遍遍写 对象.属性。
           axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then(({ data }) => {
                console.log(data);
           }).catch(({ message }) => {
                alert(message);
           })
        })
        
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then(({ data }) => {
                console.log(data);
           }).catch(({ message }) => {
                alert(message);
           })
        })
    </script>
</body>
</html>

async & await

可以通过 async、await 可以让异步变为同步操作。async 就是来声明一个异步方法，await 是用来等待异步任务执行的
注意：await 关键字只在 async 函数内有效，await 关键字取代 then 函数，等待获取到请求成功的结果值

Vue 生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
挂载 = 把 Vue 组件虚拟 DOM，渲染插入到真实页面 HTML 结构里，页面上能看见组件内容

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
update	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

<script type="module">
    import { createApp } from 'https://.../vue.esm-browser.js'
    const app = createApp({
        data() {
            return {
                message: "Hello Vue"
            }
        },
        // 生命周期-钩子函数 mounted
        mounted() {
            console.log('Vue 挂载完毕，发送请求获取数据 ...')
        }
    }).mount("#app")
</script>

案例：从服务器端动态获取数据渲染展示列表

服务端 url 地址：https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx

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

    createApp({
        data() {
            return {
                empList: [],
                searchForm: {
                    name: '',
                    gender: '',
                    job: ''
                }
            }
        },
        methods: {
            // search() {
            //     // 发送 ajax 请求，获取数据
            //     axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(({ data }) => {
            //         this.empList = data.data
            //     }).catch(({ message }) => {
            //         alert(message);
            //     })
            // },
            // 异步变同步
            async search(){
                let { data } = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
                this.empList = data.data
            },
            reset() {
                this.searchForm = {
                    name: '',
                    gender: '',
                    job: ''
                }
                this.search()
            }
        },
        mounted() {
            this.search()
        }  
    }).mount('#container')
</script>

posted @ 2026-05-24 10:42 弋湖阅读(11) 评论(0) 收藏举报

刷新页面返回顶部

faxont