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

0x02 js、Vue、Ajax

news 2026/2/7 13:42:38

文章目录

  • 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是弱类型语言，变量可以存放不同类型的值。

变量名：

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

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

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

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

基本数据类型：

  1. number：数字（整数、小数、NaN）
  2. boolean：布尔。true、false
  3. null：对象为空
  4. undefined：当声明的变量未初始化时，该变量的值默认为undefined
  5. 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语法简单，层次结构鲜明，现多用作为数据载体，在网络中进行数据传输

1740616432971.png

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

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

  1. Document：整个文档对象
  2. Element：元素对象
  3. Attribute：属性对象
  4. Text：文本对象
  5. Comment：注释对象

1740616777504.png

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

操作步骤：

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

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

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

事件监听

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

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

事件监听三要素：

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

常见事件

  1. 鼠标事件：click（鼠标点击）、mouseenter（鼠标移入）、mouseleave（鼠标移出）
  2. 键盘事件：keydown（键盘按下触发）、keyup（键盘抬起触发）
  3. 焦点事件：focus（获得焦点触发）、blur（失去焦点触发）
  4. 表单事件：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>
  1. script标签中的type属性module指使用模块化js
  2. .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作用

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

1740629844672.png

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

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

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

1740632780655.png

1740633448249.png

相关文章：

0x02 js、Vue、Ajax

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

编程日记 2025/2/28 13:33:26

Windows 11【1001问】删除Win11左下角小组件的6种方法

在Windows 11中&#xff0c;左下角的小组件功能虽然提供了天气、新闻等实用信息&#xff0c;但对于一些用户来说可能显得多余或干扰视线。因此&#xff0c;微软提供了多种方式让用户能够自定义是否显示这些小组件。以下是 6 种常见的设置方法来隐藏或关闭Windows 11左下角的小组…...

编程日记 2025/2/28 13:31:22

【动手学深度学习】基于Python动手实现线性神经网络

深度学习入门&#xff1a;基于Python动手实现线性回归 1&#xff0c;走进深度学习2&#xff0c;配置说明3&#xff0c;线性神经网络4&#xff0c;线性回归从0开始实现4.1&#xff0c;导入相关库4.2&#xff0c;生成数据4.3&#xff0c;读取数据集4.4&#xff0c;初始化模型参数…...

编程日记 2025/2/28 13:27:16

leetcode 912. 排序数组

912. 排序数组 912. 排序数组 题目 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题&#xff0c;时间复杂度为 O(nlog(n))&#xff0c;并且空间复杂度尽可能小。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1…...

编程日记 2025/2/28 13:26:14

【芯片设计】NPU芯片前端设计工程师面试记录·20250227

应聘公司 某NPU/CPU方向芯片设计公司。 小声吐槽两句，前面我问了hr需不需要带简历，hr不用公司给打好了，然后我就没带空手去的。结果hr小姐姐去开会了，手机静音( Ĭ ^ Ĭ )面试官、我、另外的hr小姐姐都联系不上，结果就变成了两个面试官和我一共三个人在会议室里一人拿出…...

编程日记 2025/2/28 13:21:09

BUU40 [CSCCTF 2019 Qual]FlaskLight1【SSTI】

模板&#xff1a; {{.__class__.__base__.__subclasses__()[80].__init__.__globals__[__builtins__].eval("__import__(os).popen(type flag.txt).read()")}} 是个空字符串&#xff0c;.__class__代表这个空字符串的类是什么&#xff08;这里是单引号双引号都行&a…...

编程日记 2025/2/28 13:19:07

WiFi IEEE 802.11协议精读：IEEE 802.11-2007，6，MAC service definition MAC服务定义

继续精读IEEE 802.11-2007 6&#xff0c;MAC service definition MAC服务定义 6.1 MAC服务概述 6.1.1 数据服务 此服务为对等逻辑链路控制&#xff08;LLC&#xff09;实体提供交换MAC服务数据单元&#xff08;MSDU&#xff09;的能力。为支持此服务&#xff0c;本地媒体访…...

编程日记 2025/2/28 13:18:00

2025学年安徽省职业院校技能大赛 “信息安全管理与评估”赛项 比赛样题任务书

2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷&#xff08;五&#xff09; 第一部分&#xff1a;网络平台搭建与设备安全防护任务书第二部分&#xff1a;网络安全事件响应、数字取证调查、应用程序安全任务书任务1 &#xff1a;内存取证&…...

编程日记 2025/2/28 13:16:56

VAE变分自编码器的初步理解

VAE的结构和原理 VAE由两部分组成&#xff1a; 编码器&#xff08;Encoder&#xff09;&#xff1a; 编码器负责将输入数据&#xff08;例如图像&#xff09;压缩成一个潜在空间&#xff08;latent space&#xff09;的表示。这个潜在空间不是一个固定的值&#xff0c;而是一个…...

编程日记 2025/2/28 13:15:49

2025 最新版鸿蒙 HarmonyOS 开发工具安装使用指南

为保证 DevEco Studio 正常运行&#xff0c;建议电脑配置满足如下要求&#xff1a; Windows 系统 操作系统&#xff1a;Windows10 64 位、Windows11 64 位内存&#xff1a;16GB 及以上硬盘&#xff1a;100GB 及以上分辨率&#xff1a;1280*800 像素及以上 macOS 系统 操作系统…...

编程日记 2025/2/28 13:13:46

Rider 安装包 绿色版 Win/Mac/Linux 适合.NET和游戏开发者使用 2025全栈开发终极指南：从零配置到企业级实战

下载链接&#xff1a; https://pan.baidu.com/s/1cfkJf6Zgxc1XfYrVpwtHkA?pwd1234 导语&#xff1a;JetBrains Rider以跨平台支持率100%、深度.NET集成和智能代码分析能力&#xff0c;成为2025年全栈开发者的首选工具。本文涵盖环境配置、核心功能、框架集成、性能调优、团队…...

编程日记 2025/2/28 13:12:45

Python常见面试题的详解24

1. 如何对关键词触发模块进行测试 要点 功能测试&#xff1a;验证正常关键词触发、边界情况及大小写敏感性&#xff0c;确保模块按预期响应不同输入。 性能测试&#xff1a;关注响应时间和并发处理能力&#xff0c;保证模块在不同负载下的性能表现。 兼容性测试&#xff1a;测…...

编程日记 2025/2/28 13:09:41

手机打电话时如何识别对方按下的DTMF按键的字符-安卓AI电话机器人

手机打电话时如何识别对方按下的DTMF按键的字符 --安卓AI电话机器人 一、前言 前面的篇章中&#xff0c;使用蓝牙电话拦截手机通话的声音&#xff0c;并对数据加工&#xff0c;这个功能出来也有一段时间了。前段时间有试用的用户咨询说&#xff1a;有没有办法在手机上&#xff…...

编程日记 2025/2/28 13:06:37

RabbitMQ操作实战

1.RabbitMQ安装 RabbitMQ Windows 安装、配置、使用 - 小白教程-腾讯云开发者社区-腾讯云下载erlang&#xff1a;http://www.erlang.org/downloads/https://cloud.tencent.com/developer/article/2192340 Windows 10安装RabbitMQ及延时消息插件rabbitmq_delayed_message_exch…...

编程日记 2025/2/28 13:04:35

IDEA 2024.1 最新永久可用（亲测有效）

今年idea发布了2024.1版本&#xff0c;这个版本带来了一系列令人兴奋的新功能和改进。最引人注目的是集成了更先进的 AI 助手&#xff0c;它现在能够提供更复杂的代码辅助功能&#xff0c;如代码自动补全、智能代码审查等&#xff0c;极大地提升了开发效率。此外&#xff0c;用…...

编程日记 2025/2/28 13:02:29

【R包】pathlinkR转录组数据分析和可视化利器

介绍 通常情况下&#xff0c;基因表达研究如微阵列和RNA-Seq会产生数百到数千个差异表达基因&#xff08;deg&#xff09;。理解如此庞大的数据集的生物学意义变得非常困难&#xff0c;尤其是在分析多个条件和比较的情况下。该软件包利用途径富集和蛋白-蛋白相互作用网络&…...

编程日记 2025/2/28 13:01:24

RPA 与 AI 结合：开启智能自动化新时代

RPA 与 AI 结合&#xff1a;开启智能自动化新时代 在当今数字化快速发展的时代&#xff0c;企业面临着海量的数据处理和复杂的业务流程&#xff0c;如何提高效率、降低成本、优化业务流程成为了企业关注的焦点。而 RPA&#xff08;Robotic Process Automation&#xff0c;机器…...

编程日记 2025/2/28 12:56:13

[免费]Springboot+Vue在线文档管理系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringbootVue在线文档管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue在线文档管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着科学技术的飞速发展&#xff0c;社会的方方面…...

编程日记 2025/2/28 12:55:09

内容选题与商业布局

内容选题与商业布局 提示词 1&#xff1a;人群链&#xff08;User Chain&#xff09;提示词 2&#xff1a;需求链&#xff08;Demand Chain&#xff09;提示词 3&#xff1a;环境 需求 优势 三要素提示词 4&#xff1a;垂直于“人性”而非只“赛道”提示词 5&#xff1a;基于…...

编程日记 2025/2/28 12:54:08

文字描边实现内黄外绿效果

网页使用 <!DOCTYPE html> <html> <head> <style> .text-effect {color: #ffd700; /* 黄色文字 */-webkit-text-stroke: 2px #008000; /* 绿色描边&#xff08;兼容Webkit内核&#xff09; */text-stroke: 2px #008000; /* 标准语法 *…...

编程日记 2025/2/28 12:52:05

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/1/25 10:02:40

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/1/26 19:25:32

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09