目录

1. 学习概述

2. HTML-CSS课程学习

3. Tlias案例学习

4. JS课程学习

5. Vue课程学习

6. Ajax - Axios课程学习

学习概述

 学习阶段

Web介绍

项目开发流程

前端Web开发标准

Web前端开发使用技术

HTML-CSS课程学习

Visual Studio Code下载

Visual Studio Code  Visual Studio Code - Code Editing. Redefined

插件配置

settings.json配置信息
{
  "workbench.colorTheme": "Default Light+",
  "workbench.statusBar.visible": false,
  "editor.fontFamily": "'Courier New', Consolas, monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.8,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.minimap.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.confirmSync": false,
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

HTML和CSS介绍

HTML CSS JavaScript文档学习网址 MDN Web Docs

HTML-CSS实践

01.Html快速入门 - 学习html骨架
<!-- 01.HTML快速入门.html -->
<!-- 声明文档的类型html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 设置字符集 -->
  <meta charset="UTF-8">
  <!-- 设置网页在移动设备中的显示宽度及缩放比例 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>HTML快速入门</h1>
  <img src="img/2.jpg">
  <!-- 使用Ai自动生成代码 -->
  <!-- 定义一个图片,路径为img/1.png -->
   <img src="img/1.png"></img>

</body>
</html>

浏览器对HTML页面的解析是从上到下逐行解析进行展示

HTML的基本骨架标签是<html> <head> </head> <body> </body> </html>

标签特点    一 : html不区分大小写    二 : 属性值可以使用单引号或者双引号

总结:学习html的骨架

02.央视新闻-标题排版
<!-- 02.央视新闻-标题排版.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello HTML</title>
</head>
<body>
  <!-- 定义一个标题,标题内容为:Hello HTML -->
   <h1 style="font-size: 20px;">Hello HTML</h1>
   <!-- 定义一个超链接,展示央视网 -->
    <!-- a 超链接标签
          href 属性:超链接的网址
          target 属性:超链接打开方式
            _self:当前窗口打开
            _blank:新窗口打开   
    -->
    <a href="https://www.cctv.com" target="_self">央视网</a>
    2024年05月15日 20:07
</body>
</html>

<a>标签属性介绍

<!-- a 超链接标签
    href 属性:超链接的网址
    target 属性:超链接打开方式
        _self:当前窗口打开
        _blank:新窗口打开   
-->
<a href="https://www.cctv.com" target="_self">央视网</a>

总结:学习<title> <meta> <h1> <a> 标签

03.央视新闻-标签样式 - CSS样式引入

CSS引入方式

行内样式: 写在标签style属性中 (配合JavaScript使用)

内部样式: 写在style标签中 (可以写在页面的任何位置,但通常约定写在head标签中)

外部样式: 写在一个独立的.css文件中 (需要通过link标签在网页引入)

颜色样式表现形式

表现方式属性值说明示例
关键字颜色英文单词red,green,bluecolor: grey
rgb表示法rgb(r,g,b)红绿蓝三颜色:0-255rgb(0,0,0)
rgba表示法rgba(r,g,b,a)红绿蓝三颜色,a:透明度:0-1rgba(0,0,0,0.3)
十六进制表示法#rrggbb#开头,数字以十六进制表示#ff0000 -> #f00
<!-- 03.央视新闻-标题样式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello HTML</title>
  <!-- 方式二:内部样式 -->
  <style>
    span{
      /* 关键字表示法 */
      color: grey;
      /* RGB表示法 */
      color:rgb(255,120,0);
      /* RGBA表示法 */
      color: rgba(255,120,0,0.5);
      /* 16进制表示法 */
      color: #FF8000;
    }
  </style>
  <!-- 方式三: 外部样式 -->
   <!-- rel: stylesheet 层叠样式标
      href: 样式文件的路径
      link: 链接标签 -->
   <link rel="stylesheet" href="css/news.css">
</head>
<body>
  <!-- 定义一个标题,标题内容为:Hello HTML -->
  <h1 style="font-size: 20px;">Hello HTML</h1>
  <!-- 定义一个超链接,展示央视网 -->
  <a href="https://www.cctv.com" target="_self">央视网</a>
  <!-- 方式一: 行内样式 -->
  <span style="color: grey">2024年05月15日 20:07</span>
  <!-- 方式二: span标签样式 -->
  <span>2024年05月15日 20:07</span>
</body>
</html>

link链接 外部样式文件 news.css

span{
  color:rgb(178, 178, 178);
}
// link语法
<!-- rel: stylesheet 层叠样式标
    href: 样式文件的路径
    link: 链接标签 -->
<link rel="stylesheet" href="css/news.css">

总结:学习css行内样式 内部样式 外部样式引入; 颜色 关键字(grey) rgb(0,0,0) rgba(0,0,0,0.0) 十六进制#ff0000的表现方式. 

04.央视新闻-标题样式(选择器).html - CSS选择器

CSS选择器设置样式元素

选择器写法说明
元素选择器span{color:rgb(178,178,178}选择页面上所以的<span>标签
类选择器.cls{color:rgb(178,178,178}选择class属性为cls的标签
id选择器#id{color:rgb(178,178,178}选择id属性为id的标签

优先级: id选择器 > 类选择器 > 元素选择器

<!-- 04.央视新闻-标题样式(选择器).html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello HTML</title>
  <style>
    /* 元素选择器 */
    span{
      color: grey;
    }
    /* 类选择器 */
    .cls{
      color:#f00;
    }
    /* id选择器 */
    #id{
      color: blue;
    }
    a {
      /* 取出超链的下划线 */
      text-decoration: none;
    }
  </style>

</head>
<body>
  <!-- 定义一个标题,标题内容为:Hello HTML -->
  <h1 style="font-size: 20px;">Hello HTML</h1>
  <!-- 定义一个超链接,展示央视网 -->
  <a href="https://www.cctv.com" target="_self">央视网</a>
  <!-- 元素选择器 -->
  <span style="color: grey">2024年05月15日 20:07</span>
  <!-- 类选择器 -->
  <span class="cls">2024年05月15日 20:07</span>
  <!-- id选择器 -->
  <span class="cls" id="id">2024年05月15日 20:07</span>
</body>
</html>

总结:学习css选择器 元素选择器span{} 类选择器.cls{} id选择器#id{}  优先级递增

05.央视新闻-正文排版.html - <vedio> <img> <p>
<!-- 05.央视新闻-正文排版.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello HTML</title>
</head>
<body>
  <!-- ------------------------------新闻标题---------------------------------- -->
  <!-- 定义一个标题,标题内容为:Hello HTML -->
  <h1 style="font-size: 20px;">Hello HTML</h1>
  <!-- 定义一个超链接,展示央视网 -->
  <a href="https://www.cctv.com" target="_self">央视网</a>
  <!-- 元素选择器 -->
  <span>2024年05月15日 20:07</span>
  <br>
  <!-- ------------------------------新闻正文---------------------------- -->
  <!-- 定义一个视频,引入../HTML-CSS/video/nwes.mp4 -->
  <video src="../HTML-CSS/video/news.mp4" controls="controls" width="80%"></video>
  <br>
  <!-- 音频引入 -->
  <!-- <audio src="../HTML-CSS/audio/news.mp3" controls="controls"></audio> -->
  <!-- 段落标签 -->
  <p>
    Hello HTML
  </p>
  <p>
    Hello HTML
  </p>
  <img src="img/4.gif"></img>
  <p>
    Hello HTML
  </p>
</body>
</html>

视频标签<vedio>

<!-- 定义一个视频,引入../HTML-CSS/video/nwes.mp4 -->
  <!-- vedio标签属性
      src:视频路径
      autoplay:自动播放
      controls:播放控制件
      width:宽度(建议宽度和高度设置一个即可,另一个会等比例缩放)
      height:高度
        单位:
          px':像素
          %:百分比 (相对于父元素的宽度或高度的百分比)
      loop:循环
      muted:静音
      poster:封面
  -->
  <video src="../HTML-CSS/video/news.mp4" controls="controls" width="80%"></video>

图片标签<img>

  <!-- 定义一个图片，路径为img/4.gif -->
  <!-- img标签属性
      src:图片路径
        1.绝对路径
          1.1绝对磁盘路径:C:/Users/Administrator/Desktop/HTML_CSS01/img/4.gif(不推荐) 
          1.2绝对网络路径:https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
        2.相对路径:img/4.gif
      alt:图片描述
      width:图片宽度
      height:图片高度
  -->
  <img src="img/4.gif"></img>

总结:定义视频标签<vedio src=" " controls=" "> 图片标签<img src=" "> 段落标签<p>

06.央视新闻-正文样式.html - 文本样式
    p {
      /* 设置行高 */
      line-height: 2;
      /* 设置首行缩进 */
      text-indent: 2em;
    }

学习总结:<b>和<strong>标签加粗 <u>下划线 <i>和<em>倾斜 <s>和<del>删除线 缩进 行间距设置 空格实体字符&nbsp;  <实体字符&lt; >实体字符&gt; 

07.央视新闻-整体布局.html - flex布局

通过<div>标签,编写css样式实现居中显示

    /* 整体的版面居中显示 */
    #content-container {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
    }
08.盒子模型.html - flex布局

属性按顺时针定义边距大小

盒子边距展示

  <style>
    #div1 {
      /* 默认内容展示宽度高度 */
      width: 400px;  
      height: 300px;  
      /* 背景色 */
      background-color: #ffff00;
      /* 内边距 */
      padding: 30px;
      /* 盒子大小 */
      /* content-box默认是展示内容的大小,border-box盒子的大小 */
      box-sizing: border-box;
      /* 边框 solid 实线 */
      border: 20px solid red;
      /* 外边距 auto 居中 */
      margin: 30px auto;
    }
  </style>

注意:如果只需要设置某一方位的边框,可在属性后加上-位置,padding-top padding-left padding-right

Tlias案例学习

顶部导航栏

09.Tliasand案例-顶部导航栏.html - 导航栏布局
<!-- 09.Tliasand案例-顶部导航栏.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #header{
            display:flex;
            justify-content: space-between;
            background-color:#808080;
            padding: 10px 20px; /* 内外边距 */
            align-items: center; /* 垂直居中 */
        }
        #header h1{
            color: white;
            font-size: 24px;
            font-weight: bold;
            font-family: KaiTi;
            margin: 0;
        }
        #header a{
            color: white;
            text-decoration: none;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Tlias智能学习辅助系统</h1>
        <a href="#">退出登录</a>
    </div>
</body>
</html>

学习总结 1. 后代选择器.header h1{} \ #header h1{}  2. 子件垂直居中align-items:center

10.flex布局.html - flex布局

<!-- 10.flex布局.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      background-color: #f1eeee;
      width: 400px;
      height: 300px;
      display: flex;
      /* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 */
      /* justify-content: flex-start;*/ /* 从头开始排列  */
      /* justify-content: flex-end; */ /* 从尾开始排列 */
      /* justify-content: center; */ /* 居中排列 */
      /* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */
      justify-content: space-between;
      flex-direction: row;
    }
    #container div {
      background-color: #aeea6a;
      width: 100px;
      height: 50px; 
    }
  </style>
</head>
<body>
  <div id="container">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
  </div>
</body>
</html>

搜索表单区域

11.表单标签.html - form表单

form表单项

    <!-- form 表单:
      action: 表单提交的url地址
      method: 表单提交的方式
        get: 默认
          1. 表单提交的数据会拼接到url后面,不安全,不建议使用
          2. 不适合提交大数据表单
        post: 
          1. 表单提交的数据会放在请求体中,安全,建议使用  
          2. 请求数据不受限制
      注意:表单项想要采集数据就要设置name
      -->
<!-- 11.表单标签.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="/save" method="get">
    姓名:<input type="text" name="name"></input>
    密码:<input type="password" name="password"></input>
    <input type="submit" value="登录"></input>
  </form>
</body>
</html>
12.表单项标签.html - input表单项
<!-- 12.表单项标签.html -->
  <form action="/save" method="post">
    姓名: <input type="text" name="name">
    <br></br>
    密码: <input type="password" name="password">
    <br></br>
    性别: <input type="radio" name="sex" value="1">男
          <label><input type="radio" name="sex" value="2">女</label>
    <br></br>
    兴趣: <label><input type="checkbox" name="habbies" value="java">java</label>
          <label><input type="checkbox" name="habbies" value="read">read</label>
          <label><input type="checkbox" name="habbies" value="learn">learn</label>
    <br></br>
    图片: <input type="file" name="image">
    <br></br>
    生日: <input type="date" name="birthday">
    <br></br>
    时间: <input type="time" name="time">
    <br></br>
    日期时间: <input type="datetime-local" name="datetime">
    <br></br>
    学历: <select name="education">
            <option value="">---------请选择----------</option> 
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
          </select>
    <br></br>
    描述: <textarea name="desc" rows="10" cols="30"></textarea>"
    <br></br>
          <input type="hidden" name="id" value="1">
          <input type="button" value="按钮">
          <input type="reset" value="重置">
          <input type="submit" value="提交">

  </form>
type取值描述
text默认值,定义单行输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
date/time/datetime-local定义日期/时间/日期时间
hidden定义隐藏域
submit/reset/button定义提交按钮/重置按钮/可点击按钮

学习总结  1.<input>表单项,通过type属性控制输入形式 2.<select>定义下拉列表,<option>定义列表项 3.<textarea>文本域 4.<label>关联的表单元素

13.Tliasand案例-搜索表单区域.html - 表单实践
<!-- 13.Tliasand案例-搜索表单区域.html -->
        .search-form{ 
            display: flex;
            align-items: center;
            margin:20px 0;
            flex-wrap:nowrap; /* 禁止换行 */
            gap: 10px; /* 组件间的间隔 */
        }
        .search-form input[type="text"], .search-form select{
            padding:6px; 
            width: 300px;
        }
        .search-form button{
            padding:5px 10px;
            /* background-color: rgb(0, 102, 255); */
            /* color: white;  */
            border: none; /* 边框 */
            cursor: pointer; /* 鼠标样式 */
        }
    </style>
    <!-- -------------搜索表单区域------------ -->
    <form action="/search " method="post" class="search-form">
        <label for="name">姓名</label>
        <input type="text" name="name" id="name" placeholder="请输入姓名"></input>

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

        <label for="position">职位</label>
        <select name="position" id="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>

学习总结: 掌握margin padding <label> <input> <select> <button> width的使用

表格数据展示区

14.Tliasand案例-表格数据展示区域.html - <table>
<!-- 14.Tliasand案例-表格数据展示区域.html -->
        /* 表格主体展示样式 */
        .table {
            min-width: 100%;
            border-collapse: collapse;
            margin: 0 20px;
        }

        /* 设置表格单元格边框 */
        .table td,
        .table th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .avatar {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 50%;
        }
    <!-- 表格展示区 -->
    <table class="table table-striped table-bordered">
        <!-- 表头 -->
        <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 src="https://via.placeholder.com/50" alt="令狐冲" class="avatar"></td>
                <td>讲师</td>
                <td>2021-03-15</td>
                <td>2023-07-30T12:00:00Z</td>
                <td class="btn-group">
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>
标签描述
<table>定义表格整体
<thread>用于定义表格头部(可选)
<tbody>定义表格中的主体部分
<tr>表格的行可以包裹多个<td>
<td>表格单元格(普通),包裹内容;表头单元格可以替换为<th>

底部版权区域

15.Tliasand案例-底部版权区域.html - 布局<div> <margin>
<!-- 15.Tliasand案例-底部版权区域.html -->
        .footer {
            text-align: center;
            padding: 10px;
            background-color: #b5b3b3;
            color: white;
            margin: 30px auto;
        }
        .container {
            width:80%;
            margin: 0 auto;
        }

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

学习总结: 通过div进行整体布局,使用margin的左右边距参数对整体布局进行调整.

HTML学习总结

HTML标签总结
类别标签说明
文本处理标签<h1> - <h6>一级标题 - 六级标题
文本处理标签<br>、<p>换行、段落
文本处理标签<strong>、<em>、<ins>、<del>文本加粗、倾斜、下划线、删除线
文本处理标签<a href=" ">超链接（属性：href、target）
图片、音视频标签<img src=" ">图片（路径：绝对路径、相对路径）
图片、音视频标签<audio src=" ">、<video src=" ">音频、视频
布局标签<div>、<span>没有语义的布局标签，配合 CSS 实现页面布局
表格标签<table>、<thead>、<tbody>表格、表头、表格主体
表格标签<tr> / <th>、<td>行 / 单元格
表单标签<form>定义表单（属性：action、method）
表单标签<input type="text/button">表单项（文本输入框、按钮...）
表单标签<select> / <option>表单项（下拉列表 / 选项）
CSS样式总结
类别属性 / 作用说明说明
盒子模型作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示
width、height高度、宽度
box-sizing高度和宽度的计算方式；content-box、border-box
padding内边距（上、右、下、左；上下、左右）
border边框
margin外边距（上、右、下、左；上下、左右）
flex 弹性布局作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。
displayflex：使用 flex 布局
flex-direction设置主轴方向（row：x 轴，水平方向；column：y 轴，垂直方向）
justify-content子元素在主轴上的对齐方式

JS课程学习

JavaScript介绍

JS核心语法

01.JS-引入方式.html - 内部和外部引入

<!-- 01.JS-引入方式.html  -->
<!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('hello world')
  </script>
  <!-- 方式2.外部脚本 -->
  <script src="js/demo.js"></script>
</body>
</html>
02.JS-基础语法.html - 变量 常量 输出语句

  <script>
    // 1.声明变量
    let a = 10;
    a = 'Hello';
    alert(a);
    // 2.声明常量
    const PI = 3.14;
    // 输出到控制台
    console.log(PI);
    // 弹出框
    alert(PI); 
    // 直接写入到页面中(不常用)
    document.write(PI); 
  </script>
03.JS-数据类型.html - 数据类型

Javascript数据类型 number boolean null undefined string

获取数据类型  typeof 运算符获取数据类型

  <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

    alert(typeof null); // object
    alert(typeof undefined); // undefined

    let a ;
    alert(typeof a); // undefined
    // 2.模板字符串(${}拼接)
    let name = 'JS';
    let age = 18;
    console.log(`${name}的年龄是${age}`);
    // 1.字符串拼接
    console.log(''+name+'的年龄是'+age+'');
  </script>

使用反引号` `进行模板拼接字符串(${}拼接)

    // 2.模板字符串(${}拼接)
    let name = 'JS';
    let age = 18;
    console.log(`${name}的年龄是${age}`);
    // 1.字符串拼接
    console.log(''+name+'的年龄是'+age+'');
04.JS-函数.html - 函数

函数类型:  具名函数  匿名函数  箭头函数

Js是弱类型语言,定义函数时,形参,返回值,都无需指定类型.

  <script>
    // 1.函数的声明(具名函数)
    function add(a,b){
      return a + b;
    }
    // 2.函数的调用
    let result1 = add(10,20);
    console.log(result1);

    // 2.匿名函数
    // 函数表达式
    let add = function(a,b){
      return a + b;
    }
    let result2 = add(10,20);
    console.log(result2);

    // 箭头函数
    let add2 = (a,b) => {
      return a + b;
    }
    let result3 = add2(10,20);
    console.log(result3);
  </script>
05.JS-自定义对象.html - 对象

学习 自定义对象 定义成员函数 定义成员变量 对象属性和方法的访问 

  <script>
    // 1.自定义对象
    let user = {
      name: 'JS',
      age: 18,
      gender: '男',
      sing: function () {
        console.log(this.name + '会唱歌');
      },
      // :function可以省略
      dance(){
        console.log(this.name + '会跳舞');
      },
      // 箭头函数不能使用 this并不指向当前对象而是,指向对象的父级对象,不推荐
      run: () => {
        console.log(this.name + '会跑步');
      }
    }
    // 2.访问对象属性和方法
    console.log(user.name); // JS
    console.log(user['name']); // JS
    user.sing(); // JS会唱歌
 <script>
Js对象与Json数据文本之间的转化

  <script>
    // 3.json - js对象标记法
    let person = {
      name: 'itcast',
      age: 18,
      gender: '男'
    }
    console.log(JSON.stringify(person));
    // let personjson = '{"name":"itcast","age":19,"gender":"男"}';
    let personjson = JSON.stringify(person);
    console.log(JSON.parse(personjson).name);
  </script>
DOM
06.JS-DOM.html - DOM

  <script>
    // 1.修改第一个h1的内容
    // 1.1 获取元素
    let h1 = document.querySelector('#title1');
    // 1.2 修改内容
    h1.innerHTML = '修改后的文本内容';
    // 2.修改所有h1的内容
    // 2.1 获取元素
    let h1s = document.querySelectorAll('h1');
    // 2.2 循环修改内容
    for(let i = 0; i < h1s.length; i++){
      h1s[i].innerHTML = '修改后的文本内容';
    }
  </script>

获取DOM对象 document.querySelector('选择器') document.querySelectorAll('选择器')

调用DOM属性和方法 例: h1s[i].innerHTML = '修改后的文本内容';

JS事件监听

07.JS-事件监听.html 

Js事件监听语法

  <script>
    // 事件监听 -- (可以多次绑定同一事件,会执行两个函数)
    document.querySelector('#btn1').addEventListener('click',function(){
        console.log('你点了我1');        
    })
    document.querySelector('#btn1').addEventListener('click',() =>{
        console.log('你点了我11');        
    })
    // 事件绑定-早期写法 -onclick (只能绑定一次,第二个会覆盖第一个监听)
    document.querySelector('#btn2').onclick = () => {
        console.log('你点了我2');        
    }
    document.querySelector('#btn2').onclick = () => {
        console.log('你点了我22');        
    }
  </script>
8.JS-案例-员工列表.html - 监听事件实践
    <script>
        //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
        //1.获取所有的tr元素
        let trs = document.querySelectorAll("tbody tr");
        //2.遍历trs
        for(let i = 0; i < trs.length; i++){ 
            //3.为tr添加鼠标进入事件//4.设置背景色
            trs[i].addEventListener("mouseenter", () => {
                trs[i].style.backgroundColor = "#91d6f7";
            });
            //5.为tr添加鼠标离开事件//6.设置背景色
            trs[i].addEventListener("mouseleave", () => {
                trs[i].style.backgroundColor = "#fff";
            });
        }
    </script>
9.JS-事件-常见事件

常见事件

鼠标事件: click 鼠标事件 mouseenter 鼠标移入  mouseleave 鼠标移出

键盘事件: keydown 键盘按下事件 keyup 键盘抬起触发

焦点事件: focus 获得焦点触发 blur 失去焦点触发 

表单事件 input 用户输入事触发 submit 用户提交时触发

    <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>

HTML引入JS文件,  type='module' ->  指引入的js文件使用了模块化js语法

<script src='./js/eventDemo.js' type="module"></script>

模块化JS文件: JS文件引入另一个JS文件内容   export 将函数暴露出来-> import导入js文件

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

Vue课程学习

Vue简介

Vue快速入门

准备工作  1. 引入Vue模块  2. 创建Vue程序的使用案例,控制视图元素  3. 准备元素(div),被Vue控制

数据驱动视图 1. 准备数据  2.通过插值表达式渲染页面

  <div id="app">
      <!-- 插值表达式{{}} -->
      <h1>{{ massage }}</h1>
      <h1>{{ count }}</h1>
  </div>
  <script type="module">
    // 创建Vue实例
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data() {
        // 返回json数据
        return {
          massage: 'Hello Vue!',
          count: 100
        }
      }
    }).mount('#app') // 挂载指定区域
  </script>

Vue常用指令

指令: HTML标签带有v-前缀的特殊属性,不同指令有不同含义,实现不同功能.

常用指令

指令作用
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指令

*重点看v-for标签遍历data数据的empList列表

            <!-- 表格主体内容 -->
            <tbody>
                <tr v-for="(e, index) in empList" :key="e.id">
                    <td>{{index + 1}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.gender == 1?'男' : '女'}}</td>
                    <!-- 插值表达式不能出现在标签内部 -->
                    <td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>
                    <td>{{e.entrydate}}</td>
                    <td>{{e.updatetime}}</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
            </tbody>
    <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"
              }]
        }
    ).mount('#container')
    </script>

v-bind指令

作用: 动态为HTML标签绑定属性值,如href, src, style样式等.

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

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

注意: 动态为标签绑定属性值,不能使用插值表达式,使用v-bind命令.且数据必须在data定义.

**重点看标签内属性绑定

<img v-bind:src="item.image" width="30px"
<img :src="item.image" width="30px"

v-if 和 v-show指令

*重点看v-if 和v-show判断展示

                    <!-- v-if控制元素显示与隐藏 -->
                    <td>
                        <span v-if="e.job == 1">班主任</span>
                        <span v-else-if="e.job == 2">讲师</span>
                        <span v-else-if="e.job == 3">学工主管</span>
                        <span v-else-if="e.job == 4">教研主管</span>
                        <span v-else-if="e.job == 5">咨询师</span>
                        <span v-else>其他</span>
                    </td>
                    <!-- v-show:控制元素显示与隐藏 -->
                    <td>
                        <span v-show="e.job == 1">班主任</span>
                        <span v-show="e.job == 2">讲师</span>
                        <span v-show="e.job == 3">学工主管</span>
                        <span v-show="e.job == 4">教研主管</span>
                        <span v-show="e.job == 5">咨询师</span>
                    </td>

v-model和v-on指令

*重点看v-model绑定表单项和data表单数据searchForm,v-on绑定事件监听和methods定义函数

        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="position">职位：</label>
            <select id="position" name="position" v-model="searchForm.position">
            </select>
            <button type="button" v-on:click="search">查询</button>
            <button type="button" @click="clear">清空</button>
        </form>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            searchForm: {
                  name: '',
                  gender: '',
                  position: ''
            }
        },
        methods: {
            search() {
                // 将收索条件封装到控制台
                console.log(this.searchForm)
        },
            clear() {
                this.searchForm = {
                    name: '',
                    gender: '',
                    position: ''
                }
        }
      }
    }     
    ).mount('#container')
    </script>

Ajax - Axios课程学习

Ajax和Axios介绍

14.Axios-入门.html  -- 发送GET和POST请求

15.Axios-请求方式别名.html  -- 简化方式写法

async和await

16.Vue-案例-员工列表(异步交互).html - 发送请求实践

Vue生命周期

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

钩子方法,页面加载时请求数据.

# 学习
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

avatar 天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

avatar 天工造物局

graphify 知识图谱查询实战：query / path / explain 与可审计的答案闭环

本指南以 graphify 的 Trae 版查询技能参考（[graphify/skills/trae/references/query.md](https://link.gitcode.com/i/72a7875d46ec6d3706d31791f3cdcbe0)）为主体，系统讲解如何针对**已构建好的知识图谱**执行三类查询：语义相关节点遍历（query）、两概念间最短路径（path）、单节点关

avatar 天工造物局