JavaScript学习
二.Web APIs
常用
生成数组长度内的随机数:const random = parseInt(Math.random()*数组名.length)
9.操作表单属性
获取:DOM对象.属性名
设置:DOM对象.属性名=新值
例:
10.H5自定义属性
标准属性:标签自带的属性,比如class、id、title,可以世界使用点语法操作比如disabled、checked、selected
自定义属性:
- 正在html5中推出来的专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
11.定时器-间歇函数
- 开启定时器:
setInterval(函数,间隔时间(毫秒)):每隔一个间隔时间调用函数 - 关闭定时器:
let 变量名=setInterval
clearInterval(变量名)
例:
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id值
12.事件监听
语法:元素对象.addEventListener(‘事件类型’,要执行的函数)
注意:
- 事件类型要加引号
- 函数是点击之后再去执行,每次点击都会执行一次
事件监听的以前版本
DOM L0:事件源.on事件=function(){}
DOM L2:事件源.addEventListener(‘事件类型’,要执行的函数)
发展史:
13.事件类型
鼠标事件:click 鼠标点击,mouseenter 鼠标经过,mouseleave 鼠标离开
焦点事件:focus 获取焦点,blur 失去焦点
键盘触发:keydown 键盘按下触发,keyup 键盘抬起触发
表单输入触发:input 用户输入事件
14.事件对象
事件对象:这个对象里有事件触发时的相关信息
语法:(一般命名为event、ev、e,e最多)
元素.addEventListener(‘click’,function(e){})
在事件绑定的回调函数的第一个参数就是事件对象
事件对象e的常见属性
type:获取当前事件的类型
clientX/clientY:获取光标相对于浏览器可见窗口右上角的位置
offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值(现在不提倡使用keyCode)
常用
.trim():去除字符串左右两侧的空格
15.环境对象
环境对象:指的是函数内部特殊的变量this,它代表当前函数运行时所处的环境(谁调用,this就是谁)
16.回调函数
当一个函数当做参数来传递给另一个函数的时候,这个函数就是回调函数
17.事件流
事件流指的是事件完整执行过程中的流动路径
实际工作以事件冒泡为主
18.事件捕获
概念:从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应代码才能看到效果
addEventListener第三个参数传入true代表是捕获阶段触发
19.事件冒泡
概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被处罚
事件冒泡是默认存在的
L2事件监听第三个参数是false,或者默认都是冒泡
20.阻止冒泡
语法:事件对象.stopPropagation()
注意:次方法既可以阻止冒泡,也可以阻止捕获
21.解绑事件
on事件方式,直接使用null覆盖偶就可以实现事件的解绑
addEventListener方法,必须使用removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
注意:匿名事件无法解绑
22.鼠标经过事件的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
23.事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
原理:给父元素注册事件,当我们触发子元素时,事件会冒泡到父元素身上
实现:事件对象.target.tagName可以获得真正触发事件的元素
node.js学习
一.初识
1.什么是node.js
node.js是一个基于Chrome V8引擎的JavaScript运行环境
浏览器是JavaScript的前端运行环境
node.js是JavaScript的后端运行环境
2.node.js的安装
官网:https://nodejs.org/en/
LTS为长期稳定版
Current为测试版,可能会有隐藏的bug
查看已安装的node.js:在终端输入命令node -v
打开终端的快捷键:win+R打开运行面板,输入cmd+回车打开终端
终端(Terminal)是专门为开发人员设计的,用于实现人机交互的一种方式
3.用node运行js代码
- 打开终端
- 输入node+空格+要执行的js文件的路径
指令cd+路径可以切换终端的目录
定位到js文件,shift+鼠标右键+在此处打开power shell,可以直接定位到js文件的目录
或者定位到js文件,右键+在终端中打开
终端中的快捷键
- ↑键:复制上一次的命令
- tab键:快速补全文件路径
- esc键:快速清空当前输入的命令
- cls命令:可以清空终端
二.fs模块
1.fs-读取文件内容
fs模块式node.js官方提供的、用来操作文件的模块。他提供了一系列的方法和属性
如果要用JavaScript代码中,使用fs模块来操作文件,则需要 const fs = require(‘fs’) 来导入fs
fs.readFile方法
语法:fs.readFile(path, options, callback(err,dataStr))
path是文件路径
options是可选参数,表示以什么编码格式读取文件,默认是utf-8
callback是回调函数,拿到读取失败和成功的结果
如果读取成功,err的值为null,dataStr是读取的结果,如果读取失败,则err的值为错误对象,dataStr的值为undefined
代码示例:
判断文件是否读取成功:
2.fs-写入内容
语法:fs.writeFile(path, data, options, callback(err,dataStr))
path是文件路径
data是要写入的内容
options是可选参数,表示以什么编码格式读取文件,默认是utf-8
callback是回调函数,拿到写入失败和成功的结果
判断文件是否写入成功:
3.处理路径问题
出现路径拼接错误的问题,是因为提供了./或…/开头的相对路径
代码在执行的时候,会以执行node命令时所处的目录,动态拼接出被操作文件的完整路径
解决方案:
- 提供完整路径
- __dirname表示当前文件所处的目录,所以可以在相对路径前加__dirname+
注意:在js中\代表转义,所以写路径要用\ \
三.path模块
1.path初识
path模块式node.js官方提供的、用来处理路径的模块,他提供了一系列的方法和属性
如果要用JavaScript代码中,使用path模块来操作文件,则需要
const path = require(‘path’) 来导入path
2.path.join()方法
作用:可以把多个路径拼接为完整的路径
语法:const 变量名 = path.join(path1,path2,…)
注意:…/会抵消一层路径
3.path.basename()
作用:可以获取路径的最后一部分,经常通过这个方法获取路径中的文件名
语法:const 变量名 = path.basename(path,ext)
ext为可选参数,表示文件的拓展名
4.path.extname()
作用:获取路径中的拓展名
语法:const 变量名 = path.extname(path)
常用
匹配<style>…</style>的正则表达式:/<style>[\s\S]*<\/style>/
匹配<script>…</script>的正则表达式:/<script>[\s\S]*<\/script>/
regStyle.exec(正则表达式)方法可以检索正则表达式匹配的文本
注意:
- fs.writeFile()只能用来创建文件,不能用来创建路径
- 重复调用fs.writeFile()写入同一个文件,新写入的内容会覆盖之前的旧内容
三.http模块
1.初识http模块
http模块式node.js官方提供的、用来创建web服务器的模块
导入语法:const http = require(‘http’)
服务器和普通电脑的区别在于,服务器上安装了web服务器软件,例如:IIS、Apache等。
在node.js中,不用IIs、Apache这些第三方web服务器软件,就能对外提供web服务
2.服务器相关概念
(1)IP地址
IP地址:是互联网上每台计算机的唯一地址
IP地址的格式:通常用"点分十进制"表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~255的十进制整数
注意:
- 互联网中每台web服务器,都有自己的IP地址,例如:可以在windows终端中运行ping www.baidu.com命令,查看百度服务器的IP地址
- 在开发期间,自己的电脑既是一台服务器,又是kewuduan既是一台服务器,又是客户端,为了方便测试,可以在自己的浏览器中输入127.0.0.1这个IP地址,就能把自己的电脑当做一台服务器进行访问了
(2)域名和域名服务器
IP地址不便于记忆,所以人们发明了字符串型的地址,即所谓的域名地址
IP地址和域名是一一对应关系,这份对应关系存放在域名服务器的电脑中
域名服务器就是提供IP地址和域名之间的转换服务的服务器
注意:
- 单纯使用IP地址,电脑也能正常工作
- 在开发测试期间,127.0.0.1对应的域名是localhost,它们在使用效果上没有区别
(3)端口号
每个web服务对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的web服务进行处理
注意:
- 每个端口号不能同时被多个web服务占用
- 在实际应用中,URL中的80端口可以被省略
2.创建基本的web服务器
-
导入http模块
-
创建web服务器实例
调用http.createServer()方法,可以快速创建一个web服务器实例 -
为服务器实例绑定request事件
-
启动服务器
调用服务器实例的.listen()方法,即可启动当前的web服务器实例:
终端里按ctrl+c就能停止服务
(1)req请求对象
只要服务器接收了客户端的请求,就会通过server.on()为服务器绑定的request事件处理函数
(2)res响应请求
(3)解决中文乱码问题
当调用res.end()方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
3.根据不同的url相应不同的html内容
- 获取请求的url地址
- 设置默认的响应内容为404 Not found
- 判断用户请求的是否为/或/index.html
- 判断用户请求的是否为/about.html
- 设置Content-Type响应头,防止中文乱码
- 使用res.end()把内容响应给客户端
vue学习
二.vue指令
常用
绑定回车键:@keyup.enter=“函数名”
获取新id:id: +new Date()
本地化存储:
watch: {
~~
list: {
~~~~
deep: true,
~~~~
函数名 (newValue) {
~~~~~~
localStorage.setItem(‘list’, JSON.stringify(newValue))
~~~~
}
~~
}
}
~
原来的列表里:list: JSON.parse(localStorage.getItem(‘list’)) || [原列表]
27.非父子通信-事件总线
作用:非父子组件之间,进行简易信息传递
-
创建一个都能访问到的事件总线(空的Vue实例)
-
A组件(接收方),监听Bus实例的事件(订阅消息)
-
B组件(发布方),触发事件的方式传递参数(发布消息)
28.非父子关系-provide & inject
作用:跨层级共享数据
provide部分:
inject取值使用:
一般传递复杂数据
29.v-model详解
原理:v-model本质上是一个语法糖(语法的简写)。例如应用在输入框上,就是value属性和input事件的合写
作用:提供数据的双向绑定
这里两个input里的属性等价
注意:$event用于模板中,获取事件的形参
30.表单类组件封装
表单类组件封装->实现子组件和父组件数据的双向绑定
- 父传子:数据是父组件props传递过来的,v-model拆解绑定数据
- 子传父:监听输入,子传父传值给父组件修改
子组件部分:
父组件部分:
31.v-model简化代码
- 子组件中:props通过value接受,事件触发input
- 父组件中:v-model给组件直接绑数据(:value+@input)
v-model写法:
32…sync修饰符
作用:实现子组件和父组件数据的双向绑定
特点:prop属性名,可以自定义,非固定为value
本质::属性名和@update:属性名合写
父组件部分:
子组件部分:
33.ref和$ref
作用:获取dom元素或组件实例
特点:查找范围->当前组件内(更精确稳定)
①获取dom:
-
目标标签-添加ref属性
-
恰当时机,通过this.$refs.xxx,获取目标标签
②获取组件实例:
-
目标组件-添加ref属性
-
恰当时机,通过this.$refs.xxx,获取目标组件,就可以调用组件对象里面的方法
34.vue异步更新、$nextTick
vue是异步更新dom,提升性能
$nextTick:等DOM更新后,才会触发执行此方法里的函数体
语法:
35.自定义指令-基础语法
全局注册-语法:
inserted会在指令所在的元素,被插入到页面中时触发
局部注册(只能在当前组件范围内使用)-语法:
使用语法:
(1)指令的值
语法:在绑定指令时,可以通过等号的形式绑定具体的参数值
通过binding.value可以拿到指令值,指令值修改会触发update函数
36.常用封装指令:v-loading
实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白页面的状态
思路:
- 准备一loading类,通过伪元素定位,设置宽高,实现蒙层
- 开启关闭loading状态(添加溢出蒙层),本质上只需要添加移除类即可
- 结合自定义指令的语法进行封装复用
37.插槽-默认插槽
作用:让组件内部的一些结构支持自定义
语法:
- 组件内需要定制的结构部分,改用<slot></slot>占位
- 在使用组件时,组件标签内填入内容,传入结构替换slot
38.插槽-后备内容
语法:在slot标签内,放置内容,作为默认显示内容
39.插槽-具名插槽
默认插槽:一个的定制位置
具名插槽语法:
-
多个slot使用name属性区分名字
-
template配合v-slot:名字来分发对应标签(v-slot:可以简化成#)
40.插槽-作用域插槽
作用域插槽:定义slot插槽的同时是可以传值的。给插槽绑定数据,将来可以使用
基本步骤:
-
给slot标签,以添加属性的方式传值
-
所有添加的属性,都会被收集到一个对象中
-
在template中,通过’#插槽名=“obj”,接收
默认插槽的插槽名是default
常用
双击事件:@dbclick
自动聚焦:
- $nextTime => $refs
- 封装v-focus指令
41.单页应用程序和路由
单页面应用(SPA):所有功能在一个html网页上实现
单页面性能高
单页面适用于系统类网站、内部网站、文档类网站、移动端网站
vue中路由:路径和组件的映射关系
42.VueRouter
说明:Vue官方的一个路由插件包,是一个第三包
作用:修改地址栏路径时,切换显示匹配的组件
官网:https://v3.router.vuejs.org/zh/
(1)基本步骤
- 下载:vue2对应的版本是3.x,vue3对应的是4.x
yarn add vue-router@3.6.5 - 引入
import VueRouter from ‘vue-router’ - 安装注册
Vue.use(VueRouter) - 创建路由对象
const router = new VueRouter() - 注入,将路由对象注入new Vue实例中,建立关联:
注意:组件的命名应由多个单词组成,可以用name:组件名,来避免报错
(2)核心步骤
①创建需要的组件(views目录),配置路由规则
②配置导航,配置路由出口(路径匹配的组件显示的位置)
router-view就是路由出口
(3)封装
一般路由模块会放在router文件夹里面,取名为index.js
注意:
- index.js里面要重新导入vue
- index.js要导出:export default router
- 注入部分留在main.js中
- main.js需要导入index
43.组件存放目录问题
路由相关的组件要放在view文件夹里面
组件分类:.vue文件分2类:页面组件&复用组件
注意:都是.vue文件(本质无区别)
分类开来更易维护
src/views文件夹:页面组件-页面展示-配合路由用
src/components文件夹:复用组件-展示数据-常用于复用
44.声明式导航-导航链接
vue-router提供了一个全局组件router-link(取代a标签)
注意:能跳转,配置to属性指定路径(必须)。本质还是a标签,to无需#
router-link的类名
router-link-active:模糊匹配(多),to=“/my"可以匹配/my、/my/a、/my/b
router-link-exact-active:精确匹配,to=”/my"仅可以匹配/my
定制类名
45.声明式导航-跳转传参
(1)查询参数传参
语法:to=“/path?参数名=值”,多个参数可在后面加&
对应页面组件接收传递过来的值:$route.query.参数名
对应页面使用组件传递过来的值:this.$route.query.key
(2)动态路由传参
①配置动态路由:
②配置导航链接:to="/path/参数值
③对应页面组件接收传递过来的值:$route.params.参数名
(3)区别
查询参数传参适合传多个参数
动态路由传参简洁,传单个参数比较方便
(4)动态路由参数可选符
配了路由path:“/search/:words”,不传参数,会未匹配到组件,显示空白
/search/:words表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符?
常用
在vue的路径中,@表示src,写绝对路径可用
vue.config.productionTip是Vue的一个配置选项,用于控制在启动时是否生成生产提示。当设置为true时,Vue会在控制台输出一些开发环境下的提示信息,例如性能优化建议和警告。而当设置为false时,Vue会禁止生成这些提示信息,以减少开发环境的干扰
46.路由重定向
网页打开,url默认是/路径,未匹配到组件时,会出现空白
说明:重定向->匹配path后,强制跳转path路径
语法:{path:匹配路径,redirect:重定向的路径}
47.路由-404
作用:当路径找不到匹配时,给个提示页面
位置:path最后面
语法:path:“*”(任意路径)-前面不匹配就会匹配最后这个
48.模式设置
hash路由(默认) 例如:http://localhost:8080/#/home
history路由(常用) 例如:http://localhost:8080/home
49.编程式导航-基本跳转
作用:点击按钮跳转
语法:
①path路径跳转(简易方便)
②name命名路由跳转(适合path路径长的场景)
路由传参
两种跳转方式,对于两种传参方式都支持:
path路径跳转传参:
1:
2:
name命名路由跳转传参:
1:
2:
动态路由传参需要配合路由:$route.params.参数名
本周demo
本周demo用了vue2脚手架
脚手架文件展示:
网页样式:
main.js部分没有改动:
App.vue部分:
组件week8Head部分:
组件lengthOfSide部分:
组件correValue部分: