Web day02 Js Vue Ajax

devtools/2024/11/28 19:42:41/

目录

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/devtools/137743.html

相关文章

C++虚函数面试题及参考答案

目录 什么是虚函数?它的作用是什么? 如何在 C++ 中声明一个虚函数?请举个例子说明。 虚函数如何实现多态?请给出简单示例。 解释什么是动态绑定(dynamic binding)与静态绑定(static binding)。 如果基类的函数是虚函数,派生类的对应函数是否需要再次声明为虚函数…

深入理解Go语言中的`sync.Pool`与常规内存分配

在Go语言的并发编程中&#xff0c;内存管理是一个不可忽视的话题。sync.Pool作为Go标准库中的一个特殊工具&#xff0c;提供了一种对象池化机制&#xff0c;以优化内存分配和垃圾回收&#xff08;GC&#xff09;。本文将深入探讨sync.Pool与常规内存分配的主要区别&#xff0c;…

uni-app 自定义平台如何进行 static 目录的条件编译

一. 自定义平台如何进行 static 目录的条件编译 关于如何自定平台&#xff0c;参考之前文章&#xff1a; uni-app 玩转条件编译&#xff1a;自定义平台的条件编译实战详解https://blog.csdn.net/qq_24956515/article/details/143951206 由于官方不支持创建自定义平台下的 st…

设计模式简介

设计模式的八个原则&#xff1a; 依赖倒置原则&#xff1a;高层次的代码&#xff08;稳定&#xff09;不应该依赖低层次的代码&#xff08;变化&#xff09;&#xff0c;高层次的代码应该依赖于抽象。抽象的代码不应该依赖实现细节&#xff0c;实现细节应该依赖抽象。开放封闭…

C/C++基础知识复习(30)

1) 什么是 C 中的 Lambda 表达式&#xff1f;它的作用是什么&#xff1f; Lambda 表达式&#xff1a; 在 C 中&#xff0c;Lambda 表达式是一种可以定义匿名函数的机制&#xff0c;可以在代码中快速创建一个内联的函数对象&#xff0c;而不需要显式地定义一个函数。Lambda 表…

Vue2中 vuex 的使用

1.安装 vuex 安装vuex与vue-router类似&#xff0c;vuex是一个独立存在的插件&#xff0c;如果脚手架初始化没有选 vuex&#xff0c;就需要额外安装。 yarn add vuex3 或者 npm i vuex3 233 Vue2 Vue-Router3 Vuex3 344 Vue3 Vue-Router4 Vuex4 2. 新建 store/index.j…

Android 用 platform.pk8 和 platform.x509.pem 生成 keystore 系统签名文件

一&#xff0c;背景介绍 最近需要开发一个拥有系统级权限的应用&#xff0c;就了解了下系统应用的签名方式&#xff0c;这里来简单介绍下。 在进行 Android 应用开发的时候&#xff0c;如果开发的是系统应用&#xff0c;那么就需要有系统签名才能正常运行&#xff0c;而系统应用…

高级 SQL 技巧:提升数据库操作效率与灵活性

SQL(Structured Query Language)是关系型数据库管理系统中用于访问和管理数据库的标准语言。在数据库开发和优化过程中,掌握高级 SQL 技巧是提升开发效率和查询性能的关键。本文将介绍一些高级 SQL 技巧,帮助开发者在复杂查询中提高效率、优化性能,并在实际项目中灵活应对…