Java初学者笔记-12、前端开发基础

Web

三个组成部分：

  • HTML：负责网页的结构（页面元素和内容）。
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
  • Javascript：负责网页的行为（交互效果）。

高级技术：

  • 基于JS封装而来的高级框架——vue。
  • 基于vue的桌面端组件库——Element+。
  • 前后端异步交互的技术——Ajax和Axios。

页面原型：指在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。

HTML

HTML（HyperText Markup Language）：超文本标记语言。

  • HTML标签都是预定义好的。例如：<h1>使用展示标题，<img>使用展示图片，<video>使用展示视频。
  • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML的常用标签

  • <head>：用来存放给浏览器看的信息，如：CSS样式，字符编码，网页标题。
  • <body>：用来存放给用户看的信息，如：文字、图片、视频。
  • <a href="" target=""></a>：超链接，href指定资源访问的url，target: 指定在何处打开资源链接，_self: 默认值，在当前页面打开；_blank: 在空白页面打开。
  • <video src="" controls autoplay width="">： src视频地址；controls显示播放控件；autoplay自动播放；width视频宽度，heignt视频高度，单位是px(像素)或%(相对于父元素的百分比)。
  • <br>：换行。
  • <p>：段落标签。
  • <img src="">：引入图片。
  • <b>/<strong>：加粗/加粗强调。
  • <u>/<ins>：下划线/下划线强调。
  • <i>/<em>：倾斜/倾斜强调。
  • <s>/<del>：删除/删除强调。
  • 实体符号：空格&nbsp;，大于号&lt;，小于号&gt;。
  • <div><span>：无语义的布局标签，配合CSS实现页面布局。
  • <form>：表单标签。
  • <label>：通常配合表单项标签使用，增强用户体验。如下，使用label包裹使得单选按钮和女这个字成为一个整体，点击女这个字也可以将这个单选框选择上。<label>标签有属性for，与<input>的id属性对应，绑定在一起，实现点击<label>里的内容可聚焦到对应id的<input>上。
<label><input type="radio" name="gender" value="1">女</label>
表单标签

表单：在网页中主要负责数据采集功能，如 注册、登录等数据采集。

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

  • <input>：定义表单项，通过type属性控制输入形式（text/password/submit/...）。
  • <select>：定义下拉列表。<option>定义列表项。
  • <textarea>：定义文本域。
  • 表单项的属性：name，有这个属性的表单项才能使用submit提交。
  • 表单项的属性：placeholder，提示信息。
input的type 描述
text 默认值，定义单行的输入字段
password 定义密码字段
radio 定义单选按钮。同一组的单选按钮name属性需要相同
checkbox 定义复选框
file 定义文件上传按钮
date/time/datetime-local 定义日期、时间、日期时间
hidden 定义隐藏域
submit/reset/button 定义提交按钮、重置按钮、可点击按钮

属性：

  • action：规定当提交表单时应向何处发送表单数据，URL
  • method：规定用于发送表单数据的方式。GET，POST。get是默认方法，在url后拼接提交。post在消息体中提交到服务端。
表格设计

<table>定义表格。

<thead>定义表头；<tbody>定义表格主体。

<tr>定义一行。<th>定义表头单元格。<td>定义普通单元格。

<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>
页脚设计
<footer class="footer">
    <p class="company-name">xxx</p>
    <p class="copyright">版权所有 Copyright 1995-2025 All Rights Reserved</p>
  </footer>

CSS

CSS （Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

CSS的引入方式

  1. 行内样式：写在标签的style属性中（配合JavaScript使用），会出现大量的代码冗余，不方便后期的维护，所以不常用。
  2. 内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中），通过定义css选择器，让样式作用于当前页面的指定的标签上。
  3. 外部样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入），html和css实现了完全的分离，企业开发常用方式。

CSS样式选择

选择器 写法 说明
元素选择器 h1{} 选择页面上所有的<h1>标签
类选择器 .cls{} 选择页面上所有class为cls的标签
ID选择器 #hid{} 选择页面上所有id为hid的标签
分组选择器 h1,h2{} 选择页面上所有的<h1>和<h2>标签
属性选择器 `input[type] {};
input[type="text"] {}` 选择页面上有type属性的<input>标签; 选择页面上type属性为text的<input>标签
后代选择器 form input {} 选择<form>标签内的所有 input>标签
  • 复用样式：多个元素共享样式时使用类选择器****.。
  • 唯一元素：单个元素特殊样式使用ID选择器****#。
  • 结构清晰：通过层级选择器避免样式污染，提升代码可维护性。

ID选择器优先级最高，类选择器次之，元素选择器最低。

颜色设置

表示方式 Status
关键字 颜色英文单词
rgb表示法 rgb(r, g, b)
rgba表示法 rgba(r, g, b, a)
十六进制表示法 #rrggbb

CSS常用样式

 /* 设置段落首行缩进 */
p {
   text-indent: 2em; /* 首行缩进2em */
   line-height: 2; /* 行高2倍 */
}

/* 设置超链接取消下划线效果 */
a {
   text-decoration: none;
}

.news-content {
  width:70%;/* 宽度占70% */
  margin: 0 auto; /* 横向居中 */
}

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

布局标签：网页开发中，会使用 div 和 span 这两个没有语义的布局标签。

FmLXheAzFnvqN9DSY_B7XXEXvuHIkUCXd2xRdMNKENc=

<div>标签
  • 一行只显示一个（独占一行）。
  • 宽度默认是父元素的宽度，高度默认由内容撑开。
  • 可以设置宽高（width、height）。
<span>标签
  • 一行可以显示多个。
  • 宽度和高度默认由内容撑开。
  • 不可以设置宽高（width、height）。
div {
    width: 200px;  /* 默认为内容展示区域的宽度 */
    height: 200px;  /* 默认为内容展示区域的高度 */
    box-sizing: border-box; /* 指定width height为盒子的高宽，默认为content-box */
    background-color: aquamarine; /* 背景色 */
            
    padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
    border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
    margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
}

flex弹性布局

一种一维的布局模型。

通过给父容器添加flex的相关属性，来控制子元素的位置和排列方式。

属性 取值 含义
display flex 使用flex布局
flex-direction(设置主轴) row 主轴方向为x轴,水平向右。(默认)
column 主轴方向为y轴,垂直向下。
justify-content(子元素在主轴上的对齐方式) flex-start 从头开始排列
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边,再平分剩余空间 
<style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color:  #c2c0c0;
          padding: 10px 20px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
          text-decoration: none;
          color: #333;
          font-size: 16px;
      }

      /* 搜索表单区域 */
      .search-form {
          display: flex;
          align-items: center;
          padding: 20px;
          background-color: #f9f9f9;
      }

      /* 表单控件样式 */
      .search-form input[type="text"], .search-form select {
          margin-right: 10px;
          padding: 5px 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 200px;
      }

      /* 按钮样式 */
      .search-form button {
          padding: 5px 15px;
          margin-left: 10px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }

      /* 清空按钮样式 */
      .search-form button.clear {
        background-color: #6c757d;
      }

      .table {
         min-width: 100%; 
         border-collapse: collapse;
      }

      /* 设置表格单元格边框 */
      .table td, .table th { 
        border: 1px solid #ddd; 
        padding: 8px; 
        text-align: center;
      }
      
      .avatar { 
        width: 30px; 
        height: 30px; 
        object-fit: cover; 
        border-radius: 50%; 
      }

      /* 页脚版权区域 */
    .footer {
        background-color: #c2c0c0;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
    }

    .footer .company-name {
        font-size: 1.1em;
        font-weight: bold;
    }

    .footer .copyright {
        font-size: 0.9em;
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }
    </style>

vscode

前端常用的插件：

  1. Chinese (Simplified)
  2. HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间。
  3. JavaScript (ES6) code snippets：支持ES6语法提示。
  4. Mithril Emmet：一个能大幅度提高前端开发效率的一个工具，用于补全代码。
  5. Path Intellisense：路径提示。
  6. Vue 3 Snippets：在 Vue 2或者Vue 3开发中提供代码片段，语法高亮和格式化。
  7. Auto Close Tag：自动闭合HTML/XML标签。
  8. Auto Rename Tag：自动完成另一侧标签的同步修改。
  9. open in browser：支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。
  10. Live Server：一个具有实时加载功能的小型服务器，也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
  11. Vue - Official：为 Vue 3 构建的语言支持插件。
  12. File Utils：创建、复制、移动、重命名文件和目录。
  13. IntelliJ IDEA Keybindings：可在VSCode中使用IDEA的快捷键。
  14. prettier：代码保存时自动格式化(设置里Format on save勾选，代码区右键选择格式化方式为prettier)

一些配置

  1. 点击 "设置" 按钮，修改字体、背景样式等偏好设置。
  2. 点击右上角 "打开设置" 的图标，然后在打开的 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"
}

JavaScript

负责网页的行为（交互效果）。

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。

组成

  • ECMAScript：规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
  • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
  • DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

JS核心语法

引入方式

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

变量、常量

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

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

  • 只能用字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头。
  • 变量名严格区分大小写，如 name和 Name 是不同的变量。
  • 不能使用关键字，如：let、var、if、for等。

JS中用const关键字来声明常量。

  • 一旦声明，常量的值就不能改变（不可以重新赋值）。

JS的输出语法。alert()是弹出框。console.log()是输出到控制台。document.write()是输出到HTML的body区域。

数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）。

基本数据类型
  • number：数字（整数、小数、NaN（Not a Number））。
  • boolean：布尔。true,false。
  • null：对象为空。Javascript是大小写敏感的，因此null、NuLl、NULL是完全不同的。
  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
  • string：字符串，单引号、双引号、反引号皆可，推荐使用单引号。
  • 使用typeof运算符可以获取数据类型。
模板字符串语法
  • ``（反引号）。
  • 内容拼接变量时，使用 ${}包住变量。
<script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
</script>

函数

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

JavaScript中的函数通过function关键字进行定义。

具名函数
function add(a1, a2) {
  return a1 + a2;
}

在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

匿名函数

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

let add = function (a,b){
    return a + b;
}

let add = (a,b) => {
    return a + b;
}

匿名函数定义后，可以通过变量名直接调用。

let result = add(10, 20);

自定义对象

<script>
    //自定义对象
    let user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
        }
        eat(){
             console.log("吃~");
        } 
    }

    console.log(user.name);
    user.sing();
    user.eat();
<script>

在自定义对象时，尽量不要使用箭头函数，箭头函数中的this并不指向当前对象，而是指向父级对象。

JSON

概念：Javascript Object Notation, JavaScript对象标记法（JS对象标记法书写的文本）。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

JSON.stringify(...)：作用就是将js对象，转换为json格式的字符串。

JSON.parse(...)：作用就是将json格式的字符串，转为js对象。

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

  • Document： 整个文档对象。
  • Element： 元素对象，每个标签都会封装为一个元素对象。
  • Attribute：属性对象。
  • Text：文本对象。
  • Comment： 注释对象。

JavaScript 通过DOM，就能够对HTML进行操作：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素
DOM操作

DOM操作核心思想：将网页中所有的元素当做对象来处理。（标签的所有属性在该对象上都可以找到）

操作步骤
  1. 获取要操作的DOM元素对象
  2. 操作DOM对象的属性或方法（查文档w3school-javascript）
获取DOM对象
  • 根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')
  • 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('选择器')。注意：得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组）

JS事件监听

事件：HTML事件是发生在HTML元素上的”事情“。比如：

  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。

语法

事件源.addEventListener('事件类型', 事件触发执行的函数);可以多次绑定同一事件。

早期版本写法：事件源.on事件= function(){ ⋯}如果多次绑定同一事件，覆盖。

事件监听三要素
  • 事件源：即DOM对象。哪个DOM元素触发了事件，要获取dom元素。
  • 事件类型：用什么方式触发，比如：鼠标单击 click。
  • 事件触发执行的函数：要做什么事。
<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
        
<script>
  document.querySelector("#btn1").addEventListener('click', ()=>{
     alert("按钮1被点击了...");
  });
  document.querySelector("#btn1").onclick = ()=>{
     alert("按钮1被点击了...");
  }
</script>

常见事件

  1. 鼠标事件：click鼠标点击；mouseenter鼠标移入；mouseleave鼠标移出。
  2. 键盘事件：keydown键盘按下触发；keyup键盘抬起触发。
  3. 焦点事件：focus获得焦点触发；blur失去焦点触发。
  4. 表单事件：input用户输入触发；submit表单提交时触发。
<script>
      //点击列表中每一条记录后面的删除按钮，弹出一个提示框，提示：您是否要删除这条记录？ 如果确定，则移出这条记录
      const deleteButtons = document.querySelectorAll('.delete');
      for (let i = 0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', function () {
          if (confirm('您是否要删除这条记录？')) {
            //点击确定按钮，删除当前记录
            this.parentNode.parentNode.remove();
          }
        });
      }
      
      //通过js实现鼠标移入移出效果，鼠标移入，背景色为 #f2e2e2，鼠标移出，背景色为 白色。
      const trs = document.querySelectorAll('tr');
      for (let i = 1; i < trs.length; i++) {
        trs[i].addEventListener('mouseenter', function () {
          this.style.backgroundColor = '#f2e2e2'; // this表示当前DOM对象
        });
        trs[i].addEventListener('mouseleave', function () {
          this.style.backgroundColor = '#fff';
        });
      }
 </script>

JS模块化的一些操作

  • 建立js文件，src引入，<script src="" type = "module"></script>，模块化的js需要设置类型。
  • 将重复的操作提取成函数，加上export关键字，放入工具类js文件中，使用import {} from "";在另一个js文件中引入。

Vue3(只使用核心包)

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

构建用户界面：基于数据渲染出用户看到的界面。

渐进式：可以根据需要决定使用下图中Vue的组件。一般有两种，只使用核心包或者整站开发。

vWr3Pj0oONj59aq5Poh-M1UKso4BCcFpT5bd0cWnE3I=

框架：一套完整的项目解决方案，用于快速构建项目。大大提升前端项目的开发效率，需要理解记忆框架的使用规则。（参照官网）

Vue快速入门

准备

  • 准备一个html文件，并在其中引入Vue模块 （参考官方文档，复制过来即可）【注意：模块化的js，引入时，需要设置 type="module"】
  • 创建Vue程序的应用实例，控制视图的元素
  • 准备元素（div），交给Vue控制
<div id="app">

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

  }).mount("#app");
</script>

数据驱动视图

  1. 准备数据。
  2. 通过插值表达式{{ }}渲染页面。
<div id="app">
  <h1>{{ message }}</h1>
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  createApp({
    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标签绑定事件 
<table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>头像</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>最后操作时间</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
        <tr v-for="(emp, index) in empList" :key="emp.id">
          <td>{{ index + 1 }}</td>
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
          <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td>
          <td>{{ emp.job === '1' ? '班主任' : (emp.job === '2' ? '讲师' : (emp.job === '3' ? '学工主管' : (emp.job === '4' ? '教研主管' : (emp.job === '5' ? '咨询师' : '未知')))) }}</td>
          <td>{{ emp.entrydate }}</td>
          <td>{{ emp.updatetime }}</td>
          <td class="btn-group">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
          </td>
        </tr>
      </tbody>
</table>


<script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            empList: [
              { "id": 1,
                "name": "xxx",
                "image": "4.jpg",
                "gender": 1,
                "job": "1",
                "entrydate": "2023-06-09",
                "updatetime": "2024-07-30T14:59:38"
              },
              {
                "id": 2,
                "name": "www",
                "image": "1.jpg",
                "gender": 1,
                "job": "1",
                "entrydate": "2020-05-09",
                "updatetime": "2023-07-01T00:00:00"
              },
              {
                "id": 3,
                "name": "kkk",
                "image": "2.jpg",
                "gender": 2,
                "job": "2",
                "entrydate": "2021-06-01",
                "updatetime": "2023-07-01T00:00:00"
              }
            ]
          }
        }
      }).mount('#container')
</script>
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

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

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

语法：v-bind:属性名="属性值" <img v-bind:src="item.image" width="30px">

简化：:属性名="属性值" <img :src="item.image" width="30px">

注意：v-bind 所绑定的数据，必须在data中定义/或基于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来控制显示与隐藏
  • 场景：频繁切换显示隐藏的场景
<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>
    <span v-show="emp.job === '1'">班主任</span>
    <span v-show="emp.job === '2'">讲师</span>
    <span v-show="emp.job === '3'">学工主管</span>
    <span v-show="emp.job === '4'">教研主管</span>
    <span v-show="emp.job === '5'">咨询师</span>
</td>
v-model
  • 作用：在表单元素上使用，双向数据绑定。可以方便获取或设置表单项数据。
  • 语法：v-model="变量名"
  • 双向数据绑定：vue中的数据变化会影响视图中的数据展示。 反过来，视图中的输入的数据变化，也会影响vue的数据模型 。

v-model 中绑定的变量，必须在data中定义，构建出数据模型。

createApp({
        data() {
          return {
            searchEmp: {
              name: '',
              gender: '',
              job: ''
            },
          ...
          }
        }
}).mount('...')
-----------------------------------------------------------
<form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
      <select name="gender" v-model="searchEmp.gender">
          <option value="">性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
      </select>
      <select name="job" v-model="searchEmp.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="submit">查询</button>
      <button type="reset" class="clear">清空</button>
</form>
v-on

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

语法：

  • v-on:事件名="方法名"
  • 简写为 @事件名="…"
  • <input type="button" value="点我一下试试" v-on:click="handle">
  • <input type="button" value="点我一下试试" @click="handle">
  • handle函数，需要在vue应用实例创建的时候创建出来，在methods定义。
<script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {}
        methods: {
          search() {
            console.log(this.searchEmp)
          },
          clear() {
            this.searchEmp = {
              name: '',
              gender: '',
              job: ''
            }
          }
        }
      }).mount('#container')
</script>

methods函数中的this指向vue实例，可以通过this获取到data中定义的数据。

Ajax/Axios

Ajax入门

Ajax：Asynchronous JavaScript And XML，异步 的JavaScript和XML。

Ajax作用

  • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

入门程序

  1. 引入Axios文件（如果网络不通畅，可以使用离线的已经下载好的js文件）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  1. 使用axios函数和then函数。

axios函数的对象属性：

method：请求方式，GET/POST

url：请求路径

data： 请求数据（POST）

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

then函数是成功回调函数。当服务端的数据响应回来后，会调用成功回调函数，将返回的所有数据放在result中，一般只需使用result.data。

catch函数是失败回调函数。

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

  <button id="getData">GET</button>
  <button id="postData">POST</button>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //GET请求
    document.querySelector('#getData').onclick = function() {
      axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        method:'get'
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })
    }
    
    //POST请求
    document.querySelector('#postData').onclick = function() {
      axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        method:'post'
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })
    }
  </script>
</body>
</html>

在使用axios时，在axios之后，输入 thenc 会自动生成成功及失败回调函数结构

异步请求的简化

Axios针对不同的请求，提供了别名方式的api，具体格式如下：

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

方法 描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求 
axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
    console.log(result.data);
})

axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => {
    console.log(result.data);
})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
    <style></style>
</head>
<body>
  <div id="container">
    <!-- 搜索表单区域 -->
    <form class="search-form">
      <input type="text" name="name" placeholder="姓名" v-model="searchForm.name" />
      <select name="gender" v-model="searchForm.gender">
          <option value="">性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
      </select>
      <select name="job" 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="clear">清空</button>
    </form>

    <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 v-for="(emp, index) in empList" :key="index">
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
          <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td>
          
           <!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 -->
          <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>
          <td class="btn-group">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
   </div>


    <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 {
            // 表单模型
            searchForm: {
              name: '',
              gender: '',
              job: ''
            },
            // 表格数据，通过axios异步请求传入
            empList: []
          }
        },
        methods: {
          search() {
            //根据条件查询员工列表
            axios.get(`https://a.com/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {
              this.empList = res.data.data
            })
          },
          clear() {
            this.searchForm= {
              name: '',
              gender: '',
              job: ''
            }
            this.search()
          }
        }
      }).mount('#container')
    </script>
</body>
</html>

异步变同步-async await

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

async search() {
    // 直接用result拿到数据，不用写成功回调和失败回调了
    const result = await axios.get(`https://a.com/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
    this.empList = result.data.data;
  },

页面加载自动请求数据-vue的生命周期

上述只有点击查询页面才有数据。如何页面加载自动请求数据。

四个阶段，八个钩子函数

vue生命周期分为四个阶段

第一阶段（创建阶段）：beforeCreate，created

第二阶段（挂载阶段）：beforeMount（render），mounted

第三阶段（更新阶段）：beforeUpdate，updated

第四阶段（销毁阶段）：beforeDestroy，destroyed

钩子函数自动调用执行。

  1. beforeCreate
    官网：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
    详细：在这个阶段，数据是获取不到的，并且真实dom元素也是没有渲染出来的
  2. created
    官网：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
    详细：在这个阶段，可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来，在这个钩子函数里面，可以进行相关初始化事件的绑定、发送请求操作
  3. beforeMount
    官网：在挂载开始之前被调用：相关的 render 函数首次被调用。
    详细：代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来，这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作
  4. mounted
    官网：实例被挂载后调用，这时el被新创建的 vm.$el替换了，如果根实例挂载到了一个文档内的元素上，当mounted 被调用时，vm.$el也在文档内。
    注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick。
    详细：挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作。
  5. beforeUpdate
    官网：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
    详细：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容
  6. updated
    官网：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
    当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
    详细：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。
  7. beforeDestroy
    官网：实例销毁之前调用。在这一步，实例仍然完全可用。
    详细：当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。
  8. destroyed
    官网：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
    详细：Vue实例失去活性，完全丧失功能。
必须掌握的钩子函数-mounted
createApp({
  data(){},
  methods: {},
  mounted(){
    this.search();
  }
}).mount('#app')
posted @ 2025-02-04 19:45  subeipo  阅读(37)  评论(0)    收藏  举报