当前位置：首页 > article >正文

0x02 js、Vue、Ajax

article 2026/3/27 7:41:44

文章目录

js
- 核心概念
- js脚本引入html的方式
- 基础语法
- 事件监听
Vue
- vue简介
- v-for
- v-bind
- v-if&v-show
- v-model&v-on
Ajax

js

核心概念

JavaScript：是一门跨平台、面向对象的脚本语言，用来控制网页行为实现交互效果，由ECMAScript、BOM、DOM组成

ECMAScript：规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等

BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口

DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内的字体样式

js脚本引入html的方式

内部引入

<body><script>alert('hello world')</script>
</body>

引入外部js文件

<!DOCTYPE html>
<html>
<head><title>外部脚本示例</title><!-- 方式1：在 head 中引入（需谨慎） --><script src="js/script.js"></script>
</head>
<body><button onclick="showMessage()">点击我</button><!-- 方式2：推荐在 body 末尾引入 --><script src="js/script.js"></script>
</body>
</html>

function showMessage() {alert("Hello from external JS!");
}

基础语法

变量和常量

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

变量名：

只能用字母、数字、下划线、**美元符号（$）**组成，且数字不能开头
变量名严格区分大小写
不能使用关键字

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

alert是输出一个窗口，console是输出到控制台，这两种方式可以用于代码调试

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

基本数据类型：

number：数字（整数、小数、NaN）
boolean：布尔。true、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的值默认为undefined
string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

typeof 可以获取数据类型

反引号定义的是模板字符串，类似python中的f字符串

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

function functionName(参数1, 参数2 ...) {...
}
function add(a, b) {return a + b;
}

调用

let result = add(10, 20)
console.log(result)

匿名函数的定义

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

对象类型

let 对象名 = {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,方法名: function (形参列表) {}
} let user = {name: 'Tom',age: 20,gender: '男',sing: function () {alert(`${this.name}唱着最炫民族风`)}//sing () {//    alert(`${this.name}唱着最炫民族风`)//}
}//对象中的函数是可以进行简化的

需要注意的是在对象的方法中，使用箭头函数时，this并不是指向当前对象，而是指向当前对象的父对象

json：JavaScript Object Notation，Javascript对象标记法，由于json语法简单，层次结构鲜明，现多用作为数据载体，在网络中进行数据传输

DOM：Document Object Model，文档对象模型

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

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

DOM操作的核心思想：将网页中所有的元素当作为对象来处理。

操作步骤：

获取要操作的DOM元素对象
操作DOM对象的属性或方法

获取DOM对象最灵活常用的方式是根据css选择器来获取DOM对象

//获取匹配到的第一个元素
document.querySelector('选择器')
//获取匹配到的所有元素，返回的是一个数组
document.querySelectorAll('选择器')

事件监听

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

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

事件监听三要素：

事件源：哪个dom元素触发了事件，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击 click
事件触发执行的函数：要做什么事

常见事件

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

Vue

vue简介

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

渐进式指的是可以使用vue的一部分来构建我们的页面

<body><div id="app"><h1>{{ msg }}</h1></div><script type="module">// 1. 导入Vueimport { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {msg: 'Hello Vue'}}}).mount('#app')</script>

script标签中的type属性module指使用模块化js
.mount('#app')是指让vue接管id为app部分

v-for

在html标签上带有**v-**前缀的就是vue指令

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

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

items为遍历的数组
item为遍历出来的元素
index为索引/下标，从0开始；可以省略v-for="item in items"
key是给元素添加的唯一标识，便于vue进行列表项的正确排序复用

v-bind

v-bind的作用是动态地为HTML标签绑定属性值，如设置href、src、style样式等

语法：

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

简化后的语法：

<img :src="item.image" width="30px">

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

v-if&v-show

v-if和v-show这两类指令都是用来控制元素的显示与隐藏的

<span v-if="gender == 1">男生</span>
<span v-show="gender == 1">男生</span>

v-if：基于条件判断，来控制创建或移除元素节点，可以配合v-else-if、v-else进行使用

v-show：基于css样式display来控制显示与隐藏，都会渲染只是控制显示与隐藏

对用户来说达到的效果是一样的

v-model&v-on

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

语法：

v-model="变量名"

<body><input type="text" id=name v-model="searchForm.name"><script type="module">import {createApp} from  'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {searchForm: {name: '',gender: '',job: ''}}}}).mount('#container')</script>
</body>

v-model中绑定的变量，必须在data中定义

v-on：为html标签绑定事件（添加事件监听）

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

简写为：@事件名="方法名"

<body><div id="app"><button type="button" v-on:click="handle">点我</button><button type="button" @click="handle">再点我</button></div><script type="module">import {createApp} from  'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){...},methods: {handle() {console.log('hello v-on')   }}}).mount('#app')</script>
</body>

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

Ajax

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

XML：Extensible Markup Language 可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

Ajax作用

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

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

要使用Axios，需要先引入，可以通过script标签进行引入

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

0x02 js、Vue、Ajax

文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript：是一门跨平台、面向对象的脚本语言，用来控制网页行为实现交互效果，由ECMAScript、BOM、DOM…...

编程日记 2026/3/19 7:25:32

深入解析数据倾斜：原因、影响与优化方案

在分布式计算和大数据处理中，数据倾斜（Data Skew） 是一个常见且影响性能的难题。它可能导致某些计算节点负载过高，而其他节点资源浪费，从而影响整体吞吐量和任务执行时间。在本文中，我们将深入分析数据倾…...

编程日记 2026/2/11 14:58:30

Python Tornado 框架面试题及参考答案

目录 Tornado 框架的核心组件是什么？解释其作用。 Tornado 与其他 Python 框架（如 Django、Flask）的主要区别是什么？为什么 Tornado 适合高并发场景？其设计哲学是什么？解释 Tornado 的 Application 类和 RequestHandler 类的关系。如何在 Tornado 中配置静态文件路…...

编程日记 2025/12/17 19:22:52

IDEA 使用codeGPT+deepseek

一、环境准备 1、IDEA 版本要求安装之前确保 IDEA 处于 2023.x 及以上的较新版本。 2、Python 环境安装 Python 3.8 或更高版本为了确保 DeepSeek 助手能够顺利运行，您需要在操作系统中预先配置 Python 环境。具体来说，您需要安装 Python 3.8 或更高…...

编程日记 2026/3/26 11:19:30

Linux笔记---一切皆文件

1. 含义 “一切皆文件”是 Linux 对系统资源的高度抽象，通过文件接口屏蔽底层差异，提供了简洁、一致的操作方式。这种设计降低了系统复杂性，使得工具、脚本和应用程序能够以统一模式处理多样化资源，是 Linux 强大灵活性的重要基石…...

编程日记 2026/3/16 20:37:55

ubuntu22.04安装docker engine

在Ubuntu 22.04上安装Docker Engine可以通过以下步骤完成： 更新系统包索引： sudo apt update安装必要的依赖包： 这些包允许apt通过HTTPS使用仓库。 sudo apt install -y apt-transport-https ca-certificates curl software-properties-commo…...

编程日记 2025/3/26 4:37:45

DeepSeek开源周，第五弹再次来袭，3FS

Fire-Flyer 文件系统（3FS）总结： 一、核心特点 3FS 是一个专为 AI 训练和推理工作负载设计的高性能分布式文件系统，利用现代 SSD 和 RDMA 网络，提供共享存储层，简化分布式应用开发。其主要特点包括&#xf…...

编程日记 2026/3/25 13:29:13

RagFlow专题二、RagFlow 核心架构（数据检索、语义搜索与知识融合）

深入解析 RagFlow 核心架构：数据检索、语义搜索与知识融合在前一篇文章中，我们对 RagFlow 的核心理念、与传统 RAG 的区别以及其适用场景进行了深入探讨。我们了解到，RagFlow 通过动态优化检索、增强生成质量以及实时知识管理，使得大模型在复杂任务中的表现更加稳定和高效…...

编程日记 2025/8/13 8:32:38

【音视频】VLC播放器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档一、vlc是什么？ VLC Media Player（简称VLC）是一款免费、开源、跨平台的多媒体播放器，由非营利组织VideoLAN开发，最…...

编程日记 2026/3/25 18:12:45

【软件测试】_使用selenium进行自动化测试示例

目录 1. 导入依赖 2. 使用selenium编写测试代码 3. 运行结果 4. 关于浏览器驱动管理及浏览器驱动配置创建一个空项目用于进行selenium的自动化测试。 1. 导入依赖 <dependencies><!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager…...

编程日记 2026/3/25 18:45:29

【清华大学】DeepSeek从入门到精通完整版pdf下载

DeepSeek从入门到精通.pdf 一共104页完整版下载链接: https://pan.baidu.com/s/1-gnkTTD7EF2i_EKS5sx4vg?pwd1234 提取码: 1234 或链接：https://pan.quark.cn/s/79118f5ab0fd 一、DeepSeek 概述背景与定位 DeepSeek 的研发背景核心功能与技术特点&#xff08…...

编程日记 2026/3/25 11:40:25

Ubuntu 下查看进程 PID 和终止进程方法

查看进程 PID 使用 ps 命令: ps aux | grep <process_name>例如，查看名为 python 的进程： ps aux | grep python使用 pgrep 命令: pgrep <process_name>例如，查看名为 python 的进程： pgrep python使用 top 命令: top…...

编程日记 2025/3/6 23:43:38

JeeWMS graphReportController.do SQL注入漏洞复现(CVE-2025-0392)

免责申明：本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。 0x0…...

编程日记 2025/3/10 21:51:01

题解 | 牛客周赛83 Java ABCDEF

目录题目地址做题情况 A 题 B 题 C 题 D 题 E 题 F 题牛客竞赛主页题目地址牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 做题情况 A 题输出两个不是同一方位的字符中的任意一个就行 import java.io.*; import java.math.*; import java…...

编程日记 2026/3/16 20:37:41

C语言（16）----------＞二维数组

在学习二维数组之前，掌握一维数组是非常重要的。对于一维数组的学习，读者可以参考我写过的博客： C语言（15）--------------＞一维数组-CSDN博客这里面由浅入深地介绍了C语言中一维数组的使用。一、二维…...

编程日记 2026/3/18 16:25:26

【计算机网络基础】-------计算机网络概念

1.什么是计算机网络定义： 图解： 2.最简单的计算机网络其中： 结点可以是计算机、集线器、交换机、路由器等链路可以是有线链路、无线链路 2.1集线器 2.2交换机 3.互连网（internet）与路由器路由器与家用路由…...

编程日记 2026/3/25 8:15:59

C++实现3D(EasyX)详细教程

一、关于3D 我们看见，这两个三角形是相似的，因此计算很简单若相对物体的方向是斜的，计算三角函数即可不会的看代码二、EasyX简介 initgraph(长,宽) 打开绘图或initgraph(长,宽…...

编程日记 2026/3/25 9:56:54

单master节点部署k8s集群(Centos) 一、安装前准备 1、修改主机名按照资源准备修改即可 # master01 hostnamectl set-hostname master01 ; bash # node1 hostnamectl set-hostname node1 ; bash # node2 hostnamectl set-hostname node2 ; bash2、修改hosts文件以下命令所…...

编程日记 2026/3/18 23:31:18

【C】链式二叉树算法题1 -- 单值二叉树

leetcode链接https://leetcode.cn/problems/univalued-binary-tree/description/ 1 题目描述如果二叉树每个节点都具有相同的值，那么该二叉树就是单值二叉树。只有给定的树是单值二叉树时，才返回 true；否则返回 false。示例 1&#xff1…...

编程日记 2026/3/21 7:53:23

系统架构设计师—计算机基础篇—计算机网络

文章目录网络互联模型网络协议与标准应用层协议FTP协议TFTP协议 HTTP协议HTTPS协议 DHCP动态主机配置协议DNS协议迭代查询递归查询传输层协议网络层协议IPV4协议IPV6协议IPV6数据报的目的地址IPV4到IPV6的过渡技术网络设计分层设计接入层汇聚层核心层网络布线综合布线系统工…...

编程日记 2025/12/11 5:10:41

VScode在windows10上使用clang-format

用途：自动调整代码格式，如缩进等。 clang-format官方文档：ClangFormat — Clang 21.0.0git documentation 前提：有一个.clang-format文件下载LLVM：https://github.com/llvm/llvm-project/releases，将可…...

编程日记 2025/12/24 6:55:45

word转换为pdf后图片失真解决办法、高质量PDF转换方法

1、安装Adobe Acrobat Pro DC 自行安装 2、配置Acrobat PDFMaker （1）点击word选项卡上的Acrobat插件，（2）点击“首选项”按钮，（3）点击“高级配置”按钮（4）点…...

编程日记 2026/3/17 6:36:48

CSS3 圆角：实现与优化指南

CSS3 圆角：实现与优化指南随着网页设计的发展，CSS3 圆角已经成为了现代网页设计中不可或缺的元素之一。本文将详细讲解 CSS3 圆角的基本用法、实现方式以及优化技巧，帮助您在网页设计中更好地运用这一功能。一、CSS3 圆角基本用法 1.1 基…...

编程日记 2025/6/10 6:57:44

蓝桥杯灯笼大乱斗【算法赛】

问题描述元宵佳节，一场别开生面的灯笼大赛热闹非凡。NN 位技艺精湛的灯笼师依次落座，每位师傅都有相应的资历值，其中第 ii 位师傅的资历值为 AiAi。从左到右，师傅们的资历值逐级递增（即 A1<A2<⋯<ANA1&l…...

编程日记 2026/3/23 18:24:17

【零基础C语言】第四节数组

【零基础C语言系列】【零基础C语言】第一节 C语言概述【数制进制码制】-CSDN博客【零基础C语言】第二节数据类型、运算符、表达式-CSDN博客【零基础C语言】第三节控制结构-CSDN博客一、一维数组...

编程日记 2025/9/4 18:37:36

【多模态大模型学习】位置编码的学习记录

【多模态大模型学习】位置编码的学习记录 0.前言1. sinusoidal编码1.0 数学知识——复数1.0.1 复数乘法、共轭复数1.0.2 复数的指数表示 1.1 sinusoidal编码来历1.2 代码实现 2. Rotary Positional Embedding (RoPE) ——旋转位置编码2.1 RoPE来历2.2 代码实现2.2.1 GPT-J风格的…...

编程日记 2026/3/16 20:37:46

vector 面试点总结

ps：部分内容使用“AI”查询一、入门 1、什么是vector 动态数组容器，支持自动扩容、随机访问和连续内存存储。 2、怎么创建-初始化vector std::vector<int> v; // 创建空vectorstd::vector<int> v {1, 2, 3}; // 直接初始化std::vec…...

编程日记 2026/3/16 16:51:22