Web day02 Js Vue Ajax

ops/2024/11/28 4:40:50/

目录

javascript%3A-toc" style="margin-left:0px;">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:


javascript%3A">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名'

javascript"> <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中的关键字

 修改前:

javascript">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})},

修改后:

javascript">  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.ppmy.cn/ops/137256.html

相关文章

Unity 中 Application 四种常用目录总结

Unity 中 Application 提供了多种目录路径用于不同场景&#xff0c;以下是四种常用目录路径的区别、用途和跨平台下的具体路径示例&#xff1a; 1. Application.dataPath 描述 指向项目的 数据目录。在编辑器中指向 Assets 目录&#xff0c;打包后的应用程序中是构建的 Data …

docker compose的安装和使用

1. Docker Compose 简介 Docker Compose 是一个工具&#xff0c;用于定义和运行多容器的 Docker 应用。通过编写一个 docker-compose.yml 文件&#xff0c;可以一次性启动所有容器&#xff0c;并且方便管理容器之间的依赖。 2. 安装 Docker Compose 前提条件 确保已安装 Do…

【设计模式】【结构型模式(Structural Patterns)】之桥接模式(Bridge Pattern

1. 设计模式原理说明 桥接模式&#xff08;Bridge Pattern&#xff09; 是一种结构型设计模式&#xff0c;用于将抽象部分与实现部分分离&#xff0c;使它们可以独立变化。这种模式有助于解决因实现细节的变化而导致的代码膨胀问题。桥接模式的核心思想是通过组合而不是继承来…

ArcGIS 10.2软件安装包下载及安装教程!

今日资源&#xff1a;ArcGIS 适用系统&#xff1a;WINDOWS 软件介绍&#xff1a;ArcGIS是一款专业的电子地图信息编辑和开发软件&#xff0c;提供一种快速并且使用简单的方式浏览地理信息&#xff0c;无论是2D还是3D的信息。软件内置多种编辑工具&#xff0c;可以轻松的完成地…

上天入地 灵途科技光电技术赋能空间感知

近来&#xff0c;人工智能技术频频亮相各大马拉松赛事&#xff0c;成为引人注目的科技亮点。 11月3日&#xff0c;杭州马拉松首次启用了机器狗作为配速员&#xff0c;以稳定的节奏为选手提供科学的跑步节奏。 11月11日&#xff0c;亦庄半程马拉松的终点处&#xff0c;人形机器…

微信小程序:实现定时拍照与自动上传功能攻略——静音版

在之前的文章中&#xff0c;我介绍过可以用ctx.takePhoto来实现定时拍照&#xff0c;但是在实际使用过程中&#xff0c;会有快门声&#xff0c;影响用户体验感&#xff0c;本文中&#xff0c;我们将介绍如何在微信小程序中实现静音定时拍照功能&#xff0c;并将拍摄的照片上传到…

Elasticsearch中的节点(比如共20个),其中的10个选了一个master,另外10个选了另一个master,怎么办?

大家好&#xff0c;我是锋哥。今天分享关于【Elasticsearch中的节点&#xff08;比如共20个&#xff09;&#xff0c;其中的10个选了一个master&#xff0c;另外10个选了另一个master&#xff0c;怎么办&#xff1f;】面试题。希望对大家有帮助&#xff1b; Elasticsearch中的节…

基于Java Springboot点餐系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…