Web day02 Js Vue Ajax

news2024/11/29 21:04:34

目录

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;
  },

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

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

相关文章

【面向对象的程序设计——集合框架】主要接口

【面向对象的程序设计——集合框架】主要接口

文章目录 主要接口集合框架的主要接口Collect接口Set接口实现Set接口的类SortedSet接口 List接口&#xff1a;线性表实现List接口的类&#xff1a; Queue接口实现Queue接口的类 Map接口Map接口的定义Map接口的方法SortedMap接口 主要接口 集合框架的主要接口 声明了对各种集合…
阅读更多...
工业物联网网关在设备接入物联网中的核心作用

工业物联网网关在设备接入物联网中的核心作用

一、工业物联网网关的定义与功能 工业物联网网关是工业领域中的一种重要设备&#xff0c;它位于工业物联网系统的边缘位置&#xff0c;负责连接、管理和协调工业设备与云平台之间的通信。作为边缘计算的关键组件&#xff0c;工业物联网网关能够实现工业设备、传感器、PLC、DCS…
阅读更多...
2024年第十三届”认证杯“数学中国数学建模国际赛（小美赛）

2024年第十三届”认证杯“数学中国数学建模国际赛（小美赛）

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
阅读更多...
selinux和防火墙实验

selinux和防火墙实验

1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的&#xff0c;如…
阅读更多...
flink学习（12）——checkPoint

flink学习（12）——checkPoint

如何设置checkPoint package com.bigdata.day06;/** * 1、需要三句话 * 2、设置完checkPoint后若程序出现异常&#xff0c;会一直重启 * 3、此时是自动进行checkPoint保存 * 4、注意&#xff1a;此时如果有checkpoint ,是不会出现异常的&#xff0c;需要将checkpoint的代码关…
阅读更多...
前端面试题-1(详解事件循环）

前端面试题-1(详解事件循环）

1.了解浏览器的进程模型 1.什么是进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 2.什么是线程&#xff1f…
阅读更多...
http的文件上传和下载原理

http的文件上传和下载原理

目录 一&#xff1a;上传 1&#xff1a;http请求格式 2&#xff1a;文件上传类型分析 1&#xff1a;md5秒传 2&#xff1a;分片上传 1. 什么是分片上传 2. 分片上传的场景 3&#xff1a;断点续传 1. 什么是断点续传 2. 应用场景 3. 实现断点续传的核心逻辑 4. 实现流…
阅读更多...
【计算机视觉】图像基本操作

【计算机视觉】图像基本操作

1. 数字图像表示 一幅尺寸为MN的图像可以用矩阵表示&#xff0c;每个矩阵元素代表一个像素&#xff0c;元素的值代表这个位置图像的亮度&#xff1b;其中&#xff0c;彩色图像使用3维矩阵MN3表示&#xff1b;对于图像显示来说&#xff0c;一般使用无符号8位整数来表示图像亮度&…
阅读更多...
VSCode 下载 安装

VSCode 下载 安装

VSCode【下载】【安装】【汉化】【配置C环境&#xff08;超快&#xff09;】&#xff08;Windows环境&#xff09;-CSDN博客 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Downloadhttps://code.visualstudio.com/Download 注意&#xff0…
阅读更多...
【Python入门】Python数据类型

【Python入门】Python数据类型

文章一览 前言一、变量1.1.如何使用变量1.2.如何定义变量的名字&#xff08;标识符&#xff09; 二、数据类型2.1 整型数据2.2 浮点型数据2.3 布尔型&#xff08;bool&#xff09;数据2.4 复数型数据2.5 字符串类型1 > 字符串相加&#xff08;合并&#xff09;&#xff08;&…
阅读更多...
算法基础 - 高斯牛顿法（曲线拟合）

算法基础 - 高斯牛顿法（曲线拟合）

文章目录 1. 高斯牛顿法发展历程2、问题的引出3、高斯牛顿法的前世3.1、一阶&#xff0c;二阶梯度法共有原理3.2、最速下降法&#xff08;一阶梯度法&#xff09;3.3、牛顿法&#xff08;二阶梯度法&#xff09; 4、高斯牛顿法4.1 高斯牛顿法的思想4.2 最小二乘问题4.3 高斯牛顿…
阅读更多...
Vue+Element Plus实现自定义表单弹窗

Vue+Element Plus实现自定义表单弹窗

目录 一、基本框架 1.父组件index.vue 2.子组件FormPop.vue 二、细节补充 1&#xff09;input、textarea、select、input number 2&#xff09;daterange、date、monthrange 3&#xff09;数据定义 4&#xff09;没改样式的效果 5&#xff09;最终效果 三、最终代码 …
阅读更多...
VMware Workstation Pro下载安装及简单设置

VMware Workstation Pro下载安装及简单设置

VMware Workstation Pro下载 方法一&#xff1a;官网下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro账号请自行注册&#xff0c;选择最新版本17.6.1 下载后用md5sum_x64.exe验证下载的文件完整性 方法二 百度网盘 通过网…
阅读更多...
ospf协议（动态路由协议）

ospf协议（动态路由协议）

ospf基本概念 定义 OSPF 是典型的链路状态路由协议&#xff0c;是目前业内使用非常广泛的 IGP 协议之一。 目前针对 IPv4 协议使用的是 OSPF Version 2 &#xff08; RFC2328 &#xff09;&#xff1b;针对 IPv6 协议使用 OSPF Version 3 &#xff08; RFC2740 &#xff09;。…
阅读更多...
数据结构之循环链表和栈

数据结构之循环链表和栈

一、循环链表 1、概念 循环链表&#xff1a;就是首尾相连的链表&#xff0c;通过任意一个节点&#xff0c;都能将整个链表遍历一遍 分类&#xff1a;单向循环链表、双向循环链表 2、单向循环链表的类格式 单向循环链表也就是单向链表的最后一个节点的next域不再为None,而是…
阅读更多...
linux安装部署mysql资料

linux安装部署mysql资料

安装虚拟机 等待检查完成 选择中文 软件选择 网络和主机名 开始安装 设置root密码 ADH-password 创建用户 等待安装完成 重启 接受许可证 Centos 7 64安装完成 安装mysql开始 Putty连接指定服务器 在 opt目录下新建download目录 将mysql文件传到该目录下 查看linux服务器的…
阅读更多...
HTML 霓虹灯开关效果

HTML 霓虹灯开关效果

HTML 霓虹灯开关效果 1.简介&#xff1a;该代码为纯html&#xff0c;CSS写在了内部&#xff0c;不需要额外引入&#xff0c;霓虹灯开关效果很漂亮&#xff0c;应用在个人物联网项目中是一个比较不错的选择。 2.运行效果&#xff1a; 3.源码&#xff1a; <!DOCTYPE html&g…
阅读更多...
uniapp开发支付宝小程序自定义tabbar样式异常

uniapp开发支付宝小程序自定义tabbar样式异常

解决方案&#xff1a; 这个问题应该是支付宝基础库的问题&#xff0c;除了依赖于官方更新之外&#xff0c;开发者可以利用《自定义 tabBar》曲线救国 也就是创建一个空内容的自定义tabBar&#xff0c;这样即使 tabBar 被渲染出来&#xff0c;但从视觉上也不会有问题 1.官方文…
阅读更多...
24/11/26 视觉笔记 通过特征提取和透视变换查找对象

24/11/26 视觉笔记 通过特征提取和透视变换查找对象

在本节中我们将检测和跟踪任意大小的对象&#xff0c;这些对象可能是在不同角度或者在部分遮挡的情况下观察到的。 为此我们将运用特征描述子&#xff08;Feature Descriptor&#xff09;&#xff0c;这是捕获感兴趣对象的重要属性的一种方式。我们这样是为了即使将对象嵌入繁…
阅读更多...
【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】 前言一、功能介绍二、硬件部分三、软件部分总结 前言 &#x1f525;这里是小殷学长&#xff0c;单片机毕业设计篇12-基于stm32c8t6的智能称重系统设计 &#x1f9ff;创作不易&#xff0c;拒绝白嫖可私 一、功能介绍 ----…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023