0x02 js、Vue、Ajax

news2025/4/4 17:32:16

文章目录

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

js

核心概念

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

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. 导入Vue
    import { 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标签绑定属性值,如设置hrefsrcstyle样式等

语法:

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

简化后的语法:

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

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

v-if&v-show

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

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

v-if:基于条件判断,来控制创建或移除元素节点,可以配合v-else-ifv-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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2309131.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IDEA 使用codeGPT+deepseek

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

Linux笔记---一切皆文件

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

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

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

【音视频】VLC播放器

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

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

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

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

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

题解 | 牛客周赛83 Java ABCDEF

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

C语言(16)---------->二维数组

在学习二维数组之前&#xff0c;掌握一维数组是非常重要的。 对于一维数组的学习&#xff0c;读者可以参考我写过的博客&#xff1a; C语言&#xff08;15&#xff09;--------------&#xff1e;一维数组-CSDN博客 这里面由浅入深地介绍了C语言中一维数组的使用。 一、二维…

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

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

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

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

Centos7部署k8s(单master节点安装)

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

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

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

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

1、安装Adobe Acrobat Pro DC 自行安装 2、配置Acrobat PDFMaker &#xff08;1&#xff09;点击word选项卡上的Acrobat插件&#xff0c;&#xff08;2&#xff09;点击“首选项”按钮&#xff0c;&#xff08;3&#xff09;点击“高级配置”按钮&#xff08;4&#xff09;点…

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

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

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

【多模态大模型学习】位置编码的学习记录 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风格的…

vector 面试点总结

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

正式页面开发-登录注册页面

整体路由设计&#xff1a; 登录和注册的切换是切换组件或者是切换内容&#xff08;v-if和 v-else)&#xff0c;因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。登录之后进到首页&#xff0c;有三个大模块&#xff1a;文章分类&…

Spring项目-抽奖系统(实操项目-用户管理接口)(END)

^__^ (oo)\______ (__)\ )\/\ ||----w | || || 一&#xff1a;前言&#xff1a; 活动创建及展示博客链接&#xff1a;Spring项目-抽奖系统(实操项目-用户管理接口)(THREE)-CSDN博客 上一次完成了活动的创建和活动的展示&#xff0c;接下来就是重头戏—…

Kafka面试题及原理

1. 消息可靠性&#xff08;不丢失&#xff09; 使用Kafka在消息的收发过程都会出现消息丢失&#xff0c;Kafka分别给出了解决方案 生产者发送消息到Brocker丢失消息在Brocker中存储丢失消费者从Brocker 幂等方案&#xff1a;【分布式锁、数据库锁&#xff08;悲观锁、乐观锁…

CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select

目录 1.文本 2.字体 3.列表list a.无序列表 b.有序列表 c.定义列表 4.表格table a.内容 b.合并单元格 3.表单input a.input标签 b.单选框 c.上传文件 4.下拉菜单 1.文本 属性描述color设置文本颜色。direction指定文本的方向 / 书写方向。letter-spacing设置字符…