Web day02 Js Vue Ajax
目录
1.javascript:
1.js的引入方式:
2.js变量 & 数据类型 & 输出语句:
模板字符串:
3.函数 & 自定义对象:
4. json 字符串 & DOM操作:
5. js事件监听:
6.js的模块化导入或者导出:
2.Vue:
1.vue的准备工作:
2.Vue 指令:
1.v-for:
2.v-bind:
3.v-if & v-show:
4.v-model:
5.v-on:
3.Vue生命周期:
3.Ajax:
axios:
1.javascript:
概念:是一门浏览器脚本语言 弱类类型的语言 无需编译 浏览器直接解析执行
1.js的引入方式:
方式1:
方式2:
2.js变量 & 数据类型 & 输出语句:
变量:
常量:
数据类型:
模板字符串:
使用反引号: ` ` 引起来的字符串也称为模板字符串
使用场景:拼接字符串和变量。
-
内容拼接时,使用 ${ } 来引用变量
3.函数 & 自定义对象:
函数方式1:
方式2匿名函数:
箭头方式创造:
自定义对象:
函数可以 以 以下方式进行简化
4. json 字符串 & DOM操作:
json对象: key必须使用双引号标记 value除了数字其他的也必须使用双引号标记
注意:使用 stringify 转换字符串时 如果 person中有函数不会转换 jason 只会转换 属性名 和属性值
JS DOM:
DOM 封装的对象有:
DOM操作:
-
DOM的核心思想:将网页的内容当做对象来处理,标签的所有属性在该对象上都可以找到,并且修改这个对象的属性,就会自动映射到标签身上。
-
document对象
-
网页中所有内容都封装在document对象中
-
它提供的属性和方法都是用来访问和操作网页内容的,如:document.write(…)
-
-
DOM操作步骤:
-
获取DOM元素对象
-
操作DOM对象的属性或方法 (查阅文档)
-
-
我们可以通过如下两种方式来获取DOM元素。
-
根据CSS选择器来获取DOM元素,获取到匹配到的第一个元素:
document.querySelector('CSS选择器');
-
根据CSS选择器来获取DOM元素,获取匹配到的所有元素:
document.querySelectorAll('CSS选择器');
-
注意:获取到的所有元素,会封装到一个NodeList节点集合中,是一个伪数组(有长度、有索引的数组,但没有push、pop等数组方法)
选择器有:
1.元素(标签选择器)
2.类选择器 :' .类名 '
3.id选择器:'#id名'
<script>/* 借助于DOM操作html元素 *///需求一: 把第一个h1标签的内容修改为 我爱柳岩let h1Ele = document.querySelector('#title1')h1Ele.innerHTML = 'new title'//需求二: 把第一个h1标签的颜色修改为红色let h1Ele2 = document.querySelector('h1')h1Ele2.style.color = 'red'//需求三: 把所有的h1标签的背景色修改为绿色let h1Eles = document.querySelectorAll('h1')for(let i=0; i<h1Eles.length; i++){h1Eles[i].style.backgroundColor = 'green'}</script>
5. js事件监听:
核心逻辑: 当在某个地方发生了某件事的时候,会自动的执行一段带代码
实现 鼠标 移入自动变色的效果
常见的事件有:
6.js的模块化导入或者导出:
2.Vue:
1.vue的准备工作:
-
准备一个html文件,并在其中引入Vue模块 (参考官方文档,复制过来即可)【注意:模块化的js,引入时,需要设置
type="module"
】 -
创建Vue程序的应用实例,控制视图的元素
-
准备元素(div),交给Vue控制
本质为运用模块化导入createApp函数 传参为自定义类型 data为自定义类型中的函数
methods为键 值为 {}自定义类型
操纵dom对象:
2.Vue 指令:
指的是HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义,可以实现不同的功能 。例如:v-if,v-for…
1.v-for:
empLIst为有很多自定义对象的数组
2.v-bind:
data为 createApp 中的函数
3.v-if & v-show:
注意:
v-if: 条件不满足,标签不存在
v-show: 条件不满足, 通过display:none控制不显示
4.v-model:
完成数据到表单项的双向绑定
input的数据会同步到 Vue data中的 serchEmp 自定义对象中
5.v-on:
3.Vue生命周期:
vue实例从生到死的过程, 共经历8个阶段,每个阶段都会调用特定的函数
mounted钩子函数
注意:mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据 mounted函数和methots平级
3.Ajax:
概念: asynchronous javascript and xml, 异步的js和xml
同步:发起请求后, 浏览器需要等待请求完毕,才能做其它操作
异步:发起请求后, 浏览器无需等待请求完毕,可以做其它操作
异步的本质为开启子线程不影响主线程的执行
axios:
分为两步:
1.
可以简写为:
async await为js中的关键字
修改前:
search() {//基于axios发送异步请求,请求https://web-server.itheima.net/emps/list,根据条件查询员工列表axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {this.empList = res.data.data})},
修改后:
async search() {//基于axios发送异步请求,请求https://web-server.itheima.net/emps/list,根据条件查询员工列表const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.empList = result.data.data;},
相关文章:
Web day02 Js Vue Ajax
目录 1.javascript: 1.js的引入方式: 2.js变量 & 数据类型 & 输出语句: 模板字符串: 3.函数 & 自定义对象: 4. json 字符串 & DOM操作: 5. js事件监听: 6.js的模块化导入或者导出&a…...
Vue的生命周期
Vue.js 的生命周期是指一个 Vue 实例从创建到销毁的整个过程。在这个过程中,Vue 会提供一系列的钩子函数(也称为生命周期钩子),开发者可以在这些钩子中执行特定的操作。理解 Vue 的生命周期对于编写高效、可维护的 Vue 应用至关重…...
【LeetCode热题100】优先级队列
这盘博客记录了关于优先级队列的几道题,包括最后一块石头的重量、数据流中的第K大元素、前K个高频单词、数据流的中位数。 class Solution { public:int lastStoneWeight(vector<int>& stones) {priority_queue<int> heap;for(auto s : stones) hea…...
用go语言写一个小服务
文章目录 简介重新想到go 小服务main.go部署测试 结束语 简介 golang的优势 响应速度: Go > Java > Python 内存占用: Go < Java < Python 从java转go,然后go又转java,感觉就是go虽然在编译、内存占用都强于java&am…...
shell编程练习巩固
一、用shell写出一个简单的计算器。 其实用shell写个简单的计算器还是很简单,我们不用构建那么复杂的计算功能,只需要复现出简单的加减乘除取余即可。 既然是计算器就要明确一下思路: 用户可以输入一个数字根据数字选择加、减、乘、除、取…...
pytest+allure生成报告显示loading和404
pytestallure执行测试脚本后,通常会在电脑的磁盘上建立一个临时文件夹,里面存放allure测试报告,但是这个测试报告index.html文件单独去打开,却显示loading和404, 这个时候就要用一些办法来解决这个报告显示的问题了。 用命令产生…...
从数据孤岛到数据协同:企业如何构建安全的数据共享生态?
聚焦数据协作与隐私保护技术,探索企业如何在共享中保持安全性。 导读 在数字经济时代,数据已成为企业最宝贵的战略资源。然而,传统的"数据孤岛"模式正阻碍企业价值创新。本文将深度解析如何突破数据壁垒,构建安全高效的…...
数据采集中,除了IP池的IP被封,还有哪些常见问题?
在数据采集的过程中,代理IP池的使用无疑为我们打开了一扇通往信息宝库的大门。然而,除了IP被封禁这一常见问题外,还有许多其他问题可能影响数据采集的效果。本文将探讨在数据采集中,除了IP被封之外,还可能遇到的一些常…...
数据结构--数组
目录 1 定义 1.1 数组内存结构 1.2二维数组 2 练习 2.1 将数组内两个区间内有序元素合并 2.2 leetcode88. 合并两个有序数组 3 缓存与局部性原理 1 定义 1.1 数组内存结构 1 2 3 5 6 给数组添加元素时,应将原来添加位置的元素和之后的元素进行复制 System…...
基础入门-Web应用架构搭建域名源码站库分离MVC模型解析受限对应路径
知识点: 1、基础入门-Web应用-域名上的技术要点 2、基础入门-Web应用-源码上的技术要点 3、基础入门-Web应用-数据上的技术要点 4、基础入门-Web应用-解析上的技术要点 5、基础入门-Web应用-平台上的技术要点 一、演示案例-域名差异-主站&分站&端口站&…...
屏幕触控支持指纹
一、前端navigator.maxTouchPoints获取屏幕是否支持触控。 二、navigator.maxTouchPoints c接口修改。 1、third_party\blink\renderer\core\events\navigator_events.idl // https://w3c.github.io/pointerevents/#extensions-to-the-navigator-interface[ImplementedAsNavi…...
大米中的虫子检测-检测储藏的大米中是否有虫子 支持YOLO,VOC,COCO格式标注,4070张图片的数据集
大米中的虫子检测-检测储藏的大米中是否有虫子 支持YOLO,VOC,COCO格式标注,4070张图片的数据集 数据集分割 4070总图像数 训练组 87% 3551图片 有效集 9% 362图片 测试集 4% 157图片 预处理 自动定向…...
力扣第 74 题是 搜索二维矩阵
题目描述 给定一个 m x n 的矩阵 matrix 和一个目标值 target,请你编写一个函数来判断目标值 target 是否在矩阵中。 每行的元素按升序排列。每列的元素按升序排列。 示例 1 输入: matrix [[1, 4, 7, 11],[2, 5, 8, 12],[3, 6, 9, 16],[10, 13, 14…...
JavaScript实用工具lodash库
Lodash中文文档: Lodash 简介 | Lodash中文文档 | Lodash中文网 Lodash是一个功能强大、易于使用的JavaScript实用工具库,它提供了丰富的函数和工具,能够方便地处理集合、字符串、数值、函数等多种数据类型。通过使用Lodash,开发者可以大幅…...
MySQL之JDBC
我们在学习完了数据库的基本操作后,希望和我们的Java程序建立连接,那么我们今天就来一探究竟JDBC是如何让Java程序与数据库建立连接的 1. 什么是JDBC JDBC(Java Data Base Connectivity, Java数据库连接) 是Java程序和数据库之间…...
家校通小程序实战教程04教师管理
目录 1 创建数据源2 搭建管理后台3 搭建查询条件4 功能测试总结 我们上一篇介绍了如何将学生加入班级,学生加入之后就需要教师加入了。教师分为任课老师和班主任,班主任相当于一个班级的管理员,日常可以发布各种任务,发布接龙&…...
vitess使用记录:vtctldclient,设置分表规则
继续探索未完成的事情。 vitess使用记录系列已经写了好几篇了,记录了在测试过程中遇到的各种问题。《vitess使用:从部署到go客户端连接查询》、《vitess使用记录:vtctldclient》、《vitess使用:基于源码运行vtctldclient工具》整…...
Windows利用conda安装gpu版本Faiss + Ubuntu源码安装Faiss-gpu 记录(待更新~)
前言 由于在cpu上使用对向量检索算法时,发现面对数据量较大时,批量匹配耗时会显著增加,影响业务整体响应。便尝试使用GPU来实现检索计算,限于本人技术有限,写不出好算法。便取巧利用Faiss-gpu来检索(* ^ ▽ ^ *) 以下…...
react学习记录
目录结构react优秀代码之react目录结构简洁之道React 作为一个库,不会决定你如何组织项目的结构。这是件好事,因为这样 - 掘金【React】项目的目录结构全面指南_react项目结构-CSDN博客 生命周期【React 面经】生命周期详解:不同阶段与方法解…...
MaskRCNN训练自己的数据集
一. 数据标注 1. 安装labelme软件 conda install labelme2. 运行labelme # 命令行中直接输入 labelme3. 标注 二、训练数据处理 1. 在根目录下创建datasets/demo1文件夹,创建如下几个文件夹 2. 将标注好的.json文件放在json文件夹中 3. 原图放在pic文件夹中 4. …...
metawrap bin_refinement输入checkm数据库地址
这是运行metawrap bin_refinement -o bin_refinement -t 30 -A binning/metabat2_bins/ -B binning/maxbin2_bins/ -C binning/concoct_bins/ -c 50 -x 10 时遇到的报错(在命令行跑的时候遇到的) 参考metaGEM使用小记(解决各种问题)2024 2(三…...
Spring Web MVC其他扩展(详解下)
文章目录 Spring MVC其他扩展(下)异常处理异常处理机制声明式异常好处基于注解异常声明异常处理 拦截器拦截器概念拦截器使用拦截器作用位置图解拦截器案例拦截器工作原理源码 参数校验校验概述操作演示SpringMVC自定义参数验证ValueObject(VO) 文件上传…...
深度学习之 SegNet
可训练的图像分割引擎,包含一个encoder网络,一个对应的decoder网络,衔接像素级分类层,解码网络与VGG16的13层卷积层相同。解码网络是将低分辨率的编码特征图映射到全分辨率的特征图。解码网络使用最大池化层的池化索引进行非线性上…...
Taro React小程序开发框架 总结
目录 一、安装 二、目录结构 三、创建一个自定义页面 四、路由 1、API 2、传参 3、获取路由参数 4、设置TabBar 五、组件 六、API Taro非常好用的小程序框架,React开发者无缝衔接上。 一、安装 官方文档:Taro 文档 注意,项目创建…...
《Django 5 By Example》阅读笔记:p339-p358
《Django 5 By Example》学习第12天,p339-p358总结,总计20页。 一、技术总结 1.项目(购物网站) django-admin startproject myshop 虽然这里只是示例,但我觉得这种命名为 myxxx 的习惯非常不好,因为在实际应用中,是…...
CSS:Web美学的革新之旅
自HTML的诞生之日起,Web页面设计便踏上了一段不断进化的旅程。起初,HTML作为构建网页的骨架,仅承载着最基本的文本结构与少量显示属性。然而,随着互联网的蓬勃发展和用户对视觉体验需求的日益增长,HTML开始不堪重负&am…...
java全栈day10--后端Web基础(基础知识)之续集
一、Servlet执行流程 二、Http协议(相对Tomcat和servlet重要一点) 2.1Http-概叙 2.2Http-请求协议 2.2.3请求数据格式 2.2.3请求数据获取 先启动服务器 访问/hello Servlet 访问浏览器端Http协议数据 查看数据...
MySQL 与 MongoDB 存储差异分析
MySQL 与 MongoDB 存储差异分析:为什么随机生成数据的存储空间不同? 在实际应用中,我们常常需要选择合适的数据库系统来处理不同类型的数据。在这个过程中,数据库的 存储机制 和 性能优化 起着至关重要的作用。对于很多开发者来说…...
【ArcGIS Pro实操第10期】统计某个shp文件中不同区域内的站点数
统计某个shp文件中不同区域内的站点数 方法 1:使用“空间连接 (Spatial Join)”工具方法 2:使用“点计数 (Point Count)”工具方法 3:通过“选择 (Select by Location)”统计方法 4:通过“Python 脚本 (ArcPy)”实现参考 在 ArcGI…...
Django-Vue3-Admin - 现代化的前后端分离权限管理系统
项目介绍 Django-Vue3-Admin是一个基于RBAC(Role-Based Access Control)模型的综合性基础开发平台,专注于权限控制,支持列级别的细粒度权限管理。该项目采用前后端分离架构,技术栈包括: 后端: Django Django REST …...
【Java基础入门篇】二、控制语句和递归算法
Java基础入门篇 二、控制语句和递归算法 2.1 switch-case多分支选择语句 switch执行case语句块时,若没有遇到break,则运行下一个case直到遇到break,最后的default表示当没有case与之匹配时,默认执行的内容,代码示例如…...
PS的功能学习
背景差色较大,就魔棒 魔棒的连续就是倒水点的跨越问题 魔棒的容差的选择就有点看经验了,看颜色的统一程度选择 Ctrl D 取消当前所有的选区 至于快速选择工具,和对象选择工具也差不多,只不过控制范围变成了一块一块的&#x…...
yolov8的深度学习环境安装(cuda12.4、ubuntu22.04)
目录 一、先安装基础环境包 1.首先给Ubuntu安装Chrome浏览器(搜索引擎换成百度即可) 2、ubuntu 22.04中文输入法安装 3、安装 terminator 4、安装WPS for Linux 5、安装其它之前需要先安装anaconda 6、安装配置anaconda 7、安装完成anaconda后创建…...
《JavaEat:探索 Java 在美食世界的奇妙之旅》
在当今数字化的时代,编程语言的应用领域不断拓展,而 Java 作为一种广泛使用且功能强大的编程语言,其影响力早已超越了传统的软件开发范畴。当我们将目光聚焦在美食领域时,会惊喜地发现 Java 也能在其中发挥独特而重要的作用。本文…...
将excel文件中的信息读取后批量生成word文件
在日常办公过程中,可能需要把excel文件中的信息批量生成成百上千份word文档,便于打印、发邮件或存档等,比如根据excel中的合格人员招聘信息生成word合同文件,或是根据excel中的参会人员名单生成word参会通知等。 首先需要制作wor…...
Android 图形系统之三:SurfaceControl
在 Android 系统中,SurfaceControl 是一个关键的类,用于管理应用窗口和屏幕上的显示内容。它与 SurfaceFlinger 紧密交互,通过 BufferQueue 提供高效的图形缓冲区管理能力。SurfaceControl 是 Android 的显示架构中不可或缺的部分,…...
Nodemailer使用教程:在Node.js中发送电子邮件
目录 1. 简介 2. 安装 3. 基本配置 3.1 创建传输器 3.2 配置说明 4. 发送邮件 4.1 基本发送示例 4.2 发送验证码示例 5. 常见问题解决 5.1 "Greeting never received" 错误 5.2 安全建议 SMTP与邮件加密协议详解 1. SMTP简介 1.1 基本特点 2. 加密协…...
shell第二次作业
1. 使用case实现成绩优良差的判断 read -p "请输入你的成绩:" score if ! [[ "$score" ~ ^[0-9]$ ]];then echo "请输入数字" exit 1 fi if [ "$score" -lt 0 ] || [ "$score" -gt 100 ];then echo …...
MySQL Linux 离线安装
下载 进入官网,下载对应的需要MySQL版本,这里是历史版本。 官网 选择第一个MySQL Community Sever社区版,因为这个是免费的。 选择需要的对应版本: 安装 1.将下载好的安装包上传到服务器端 使用FinalShell 客户端连接服务器 …...
万字长文解读深度学习——多模态模型BLIP2
🌺历史文章列表🌺 深度学习——优化算法、激活函数、归一化、正则化 深度学习——权重初始化、评估指标、梯度消失和梯度爆炸 深度学习——前向传播与反向传播、神经网络(前馈神经网络与反馈神经网络)、常见算法概要汇总 万字长…...
postman使用正则表达式提取数据实战篇!
之前篇章中postman多接口关联使用的是通过JSON提取器的方式进行提取。 除了JSON提取器提取数据外还可通过另一种方式——正则表达式来提取数据。 1、使用正则表达式提取器实现接口关联,match匹配 正则匹配表达式将需要提取的字段key:value都放入表达式中ÿ…...
Docker for Everyone Plus——Unbreakable!
修改一下telnet的端口配置,访问第二小问,sudo -l命令允许提权执行的命令: 发现多了这两个限制--security-optno-new-privileges,表明docker run命令必须带上--security-optno-new-privileges参数,这可以防止通过suid机…...
龙迅#LT6912适用于HDMI2.0转HDMI+LVDS/MIPI,分辨率高达4K60HZ,支持音频和HDCP2.2
1. 描述 LT6912是一款高性能的HDMI2.0转HDMI和LVDS和MIPI转换器。 HDMI2.0 输入和输出均支持高达 6Gbps 的数据速率,为4k60Hz视频提供足够的带宽。此外,还支持 HDCP2.2 进行数据解密(无数据 加密)。 对于 LVDS 输出,…...
Linux自动化部署方法(Linux Automated Deployment Method)
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…...
Jmeter测试工具的安装和使用,mac版本,jmeter版本5.2.1
Jmeter测试工具的安装和使用JSON格式请求 一、安装1、安装jdk包和设置java环境2、去官网下载Jmeter3、解压后,打开mac终端,进入apache-jmeter的bin文件开启jmeter 二、使用jmeter1、添加线程2、添加HTTP请求3、配置请求的协议、IP地址、端口号、请求方法…...
2024-2025 ICPC, NERC, Southern and Volga Russian Regional Contest(cf)(个人记录)
A: 思路:一开始有点懵逼,理解错题意了}, 由于是顺序分配,因此前面的人可以选择的条件更多,后面的人更少,我们从后向前遍历即可 #include<bits/stdc.h>using namespace std;typedef long long ll; ty…...
009 STM32 HAL库介绍
STM32 HAL库(Hardware Abstraction Layer)是STMicroelectronics为STM32系列微控制器提供的一套硬件抽象层库,它旨在简化STM32的开发过程,提高代码的可移植性和可维护性。HAL库通过提供一组统一的API接口,使得开发者无需…...
Java的常识
程序员分类 初级程序员(大学毕业一年以内)大概月薪:2-5K 初中级程序员(工作经验2-3年)大概月薪:6-10K 中级程序员(工作经验4-5年)大概月薪:10-15K 高级程序员(工作经验5++)大概月薪:15K++ 普通公司对于程序员的月薪资天花板25K 工作实景 微信小程序、手机APP、写…...
FreeRTOS——列表及列表项
目录 一、概念及其应用 1.1列表List_t 1.2列表项ListItem_t 1.3迷你列表项MiniListItem_t 二、相关API 三、实现原理 3.1列表初始化 3.2列表项初始化 3.3插入列表项 3.4尾插列表项 3.5列表项的删除 3.6列表的遍历 一、概念及其应用 作为多任务的核心,列…...
ChatGPT 网络安全秘籍(三)
第五章:安全意识和培训 在这一章中,我们将深入探讨网络安全培训和教育的迷人领域,强调了 OpenAI 的大型语言模型(LLMs)在增强和丰富这一关键过程中可以发挥的重要作用。我们将踏上一段旅程,发现 ChatGPT 如…...