前端学习week8

JavaScript学习

二.Web APIs

常用

生成数组长度内的随机数:const random = parseInt(Math.random()*数组名.length)

9.操作表单属性

获取:DOM对象.属性名
设置:DOM对象.属性名=新值
例:
请添加图片描述

10.H5自定义属性

标准属性:标签自带的属性,比如class、id、title,可以世界使用点语法操作比如disabled、checked、selected
自定义属性:

  1. 正在html5中推出来的专门的data-自定义属性
  2. 在标签上一律以data-开头
  3. 在DOM对象上一律以dataset对象方式获取

11.定时器-间歇函数

  1. 开启定时器:
    setInterval(函数,间隔时间(毫秒)):每隔一个间隔时间调用函数
  2. 关闭定时器:
    let 变量名=setInterval
    clearInterval(变量名)

例:
请添加图片描述

注意:

  1. 函数名字不需要加括号
  2. 定时器返回的是一个id值

12.事件监听

语法:元素对象.addEventListener(‘事件类型’,要执行的函数)
注意:

  1. 事件类型要加引号
  2. 函数是点击之后再去执行,每次点击都会执行一次
事件监听的以前版本

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代码

  1. 打开终端
  2. 输入node+空格+要执行的js文件的路径
    指令cd+路径可以切换终端的目录
    定位到js文件,shift+鼠标右键+在此处打开power shell,可以直接定位到js文件的目录
    或者定位到js文件,右键+在终端中打开
终端中的快捷键
  1. ↑键:复制上一次的命令
  2. tab键:快速补全文件路径
  3. esc键:快速清空当前输入的命令
  4. 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命令时所处的目录,动态拼接出被操作文件的完整路径
解决方案:

  1. 提供完整路径
  2. __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(正则表达式)方法可以检索正则表达式匹配的文本
注意:

  1. fs.writeFile()只能用来创建文件,不能用来创建路径
  2. 重复调用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的十进制整数
注意:

  1. 互联网中每台web服务器,都有自己的IP地址,例如:可以在windows终端中运行ping www.baidu.com命令,查看百度服务器的IP地址
  2. 在开发期间,自己的电脑既是一台服务器,又是kewuduan既是一台服务器,又是客户端,为了方便测试,可以在自己的浏览器中输入127.0.0.1这个IP地址,就能把自己的电脑当做一台服务器进行访问了
(2)域名和域名服务器

IP地址不便于记忆,所以人们发明了字符串型的地址,即所谓的域名地址
IP地址和域名是一一对应关系,这份对应关系存放在域名服务器的电脑中
域名服务器就是提供IP地址和域名之间的转换服务的服务器
注意:

  1. 单纯使用IP地址,电脑也能正常工作
  2. 在开发测试期间,127.0.0.1对应的域名是localhost,它们在使用效果上没有区别
(3)端口号

每个web服务对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的web服务进行处理
注意:

  1. 每个端口号不能同时被多个web服务占用
  2. 在实际应用中,URL中的80端口可以被省略
图片消失了

2.创建基本的web服务器

  1. 导入http模块

  2. 创建web服务器实例
    调用http.createServer()方法,可以快速创建一个web服务器实例

  3. 为服务器实例绑定request事件
    请添加图片描述

  4. 启动服务器
    调用服务器实例的.listen()方法,即可启动当前的web服务器实例:
    请添加图片描述

终端里按ctrl+c就能停止服务

(1)req请求对象

只要服务器接收了客户端的请求,就会通过server.on()为服务器绑定的request事件处理函数
请添加图片描述

(2)res响应请求
图片消失了
(3)解决中文乱码问题

当调用res.end()方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
请添加图片描述

3.根据不同的url相应不同的html内容

  1. 获取请求的url地址
  2. 设置默认的响应内容为404 Not found
  3. 判断用户请求的是否为/或/index.html
  4. 判断用户请求的是否为/about.html
  5. 设置Content-Type响应头,防止中文乱码
  6. 使用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.非父子通信-事件总线

作用:非父子组件之间,进行简易信息传递

  1. 创建一个都能访问到的事件总线(空的Vue实例)
    请添加图片描述

  2. A组件(接收方),监听Bus实例的事件(订阅消息)
    请添加图片描述

  3. B组件(发布方),触发事件的方式传递参数(发布消息)
    请添加图片描述

28.非父子关系-provide & inject

作用:跨层级共享数据
provide部分:
请添加图片描述

inject取值使用:
请添加图片描述

一般传递复杂数据

29.v-model详解

原理:v-model本质上是一个语法糖(语法的简写)。例如应用在输入框上,就是value属性和input事件的合写
作用:提供数据的双向绑定
请添加图片描述

这里两个input里的属性等价
注意:$event用于模板中,获取事件的形参

30.表单类组件封装

表单类组件封装->实现子组件和父组件数据的双向绑定

  1. 父传子:数据是父组件props传递过来的,v-model拆解绑定数据
  2. 子传父:监听输入,子传父传值给父组件修改

子组件部分:
请添加图片描述

父组件部分:
请添加图片描述

31.v-model简化代码

  1. 子组件中:props通过value接受,事件触发input
  2. 父组件中:v-model给组件直接绑数据(:value+@input)

v-model写法:
请添加图片描述

32…sync修饰符

作用:实现子组件和父组件数据的双向绑定
特点:prop属性名,可以自定义,非固定为value
本质::属性名和@update:属性名合写
父组件部分:
请添加图片描述

子组件部分:
请添加图片描述

33.ref和$ref

作用:获取dom元素或组件实例
特点:查找范围->当前组件内(更精确稳定)
①获取dom:

  1. 目标标签-添加ref属性
    请添加图片描述

  2. 恰当时机,通过this.$refs.xxx,获取目标标签
    请添加图片描述

②获取组件实例:

  1. 目标组件-添加ref属性
    请添加图片描述

  2. 恰当时机,通过this.$refs.xxx,获取目标组件,就可以调用组件对象里面的方法
    请添加图片描述

34.vue异步更新、$nextTick

vue是异步更新dom,提升性能
$nextTick:等DOM更新后,才会触发执行此方法里的函数体
语法:
请添加图片描述

35.自定义指令-基础语法

全局注册-语法:
请添加图片描述

inserted会在指令所在的元素,被插入到页面中时触发
局部注册(只能在当前组件范围内使用)-语法:
请添加图片描述

使用语法:
请添加图片描述

(1)指令的值

语法:在绑定指令时,可以通过等号的形式绑定具体的参数值
请添加图片描述

通过binding.value可以拿到指令值,指令值修改会触发update函数
请添加图片描述

36.常用封装指令:v-loading

实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白页面的状态
思路:

  1. 准备一loading类,通过伪元素定位,设置宽高,实现蒙层
  2. 开启关闭loading状态(添加溢出蒙层),本质上只需要添加移除类即可
  3. 结合自定义指令的语法进行封装复用

37.插槽-默认插槽

作用:让组件内部的一些结构支持自定义
语法:

  1. 组件内需要定制的结构部分,改用<slot></slot>占位
  2. 在使用组件时,组件标签内填入内容,传入结构替换slot
    请添加图片描述

38.插槽-后备内容

语法:在slot标签内,放置内容,作为默认显示内容
请添加图片描述

39.插槽-具名插槽

默认插槽:一个的定制位置
具名插槽语法:

  1. 多个slot使用name属性区分名字
    请添加图片描述

  2. template配合v-slot:名字来分发对应标签(v-slot:可以简化成#)
    请添加图片描述

40.插槽-作用域插槽

作用域插槽:定义slot插槽的同时是可以传值的。给插槽绑定数据,将来可以使用
基本步骤:

  1. 给slot标签,以添加属性的方式传值
    请添加图片描述

  2. 所有添加的属性,都会被收集到一个对象中
    请添加图片描述

  3. 在template中,通过’#插槽名=“obj”,接收
    请添加图片描述

默认插槽的插槽名是default

常用

双击事件:@dbclick
自动聚焦:

  1. $nextTime => $refs
  2. 封装v-focus指令

41.单页应用程序和路由

单页面应用(SPA):所有功能在一个html网页上实现
单页面性能高
单页面适用于系统类网站、内部网站、文档类网站、移动端网站
vue中路由:路径和组件的映射关系

42.VueRouter

说明:Vue官方的一个路由插件包,是一个第三包
作用:修改地址栏路径时,切换显示匹配的组件
官网:https://v3.router.vuejs.org/zh/

(1)基本步骤
  1. 下载:vue2对应的版本是3.x,vue3对应的是4.x
    yarn add vue-router@3.6.5
  2. 引入
    import VueRouter from ‘vue-router’
  3. 安装注册
    Vue.use(VueRouter)
  4. 创建路由对象
    const router = new VueRouter()
  5. 注入,将路由对象注入new Vue实例中,建立关联:
图片消失了

注意:组件的命名应由多个单词组成,可以用name:组件名,来避免报错

(2)核心步骤

①创建需要的组件(views目录),配置路由规则
请添加图片描述

②配置导航,配置路由出口(路径匹配的组件显示的位置)
请添加图片描述

router-view就是路由出口

(3)封装

一般路由模块会放在router文件夹里面,取名为index.js
注意:

  1. index.js里面要重新导入vue
  2. index.js要导出:export default router
  3. 注入部分留在main.js中
  4. 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部分:
请添加图片描述

  • 12
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你好!对于心脏病预测的问题,使用循环神经网络(RNN)是一种常见的方法。RNN适用于处理序列数据,而心电图信号就是一种序列数据。在使用RNN进行心脏病预测时,你可以将心电图信号作为输入序列,然后通过训练RNN模型来预测患者是否患有心脏病。 首先,你需要准备一个合适的数据集,其中包含心电图信号和相应的心脏病标签。可以使用公开的心电图数据集,如PTB数据库或MIT-BIH数据库。然后,你可以对数据进行预处理和特征工程,如数据清洗、滤波、降采样等。 接下来,你可以构建一个RNN模型。RNN模型由一系列循环层组成,每个循环层都会处理一个时间步的输入数据。你可以选择不同类型的RNN单元,如简单循环单元(SimpleRNN)、长短期记忆网络(LSTM)或门控循环单元(GRU)。通过添加适当的全连接层和激活函数,你可以将RNN模型输出映射到二分类问题(有或无心脏病)的结果。 然后,你可以使用训练集对RNN模型进行训练,并使用验证集进行模型调优。在训练过程中,你可以使用适当的损失函数(如交叉熵)和优化算法(如随机梯度下降)来最小化模型的预测误差。 最后,你可以使用测试集对训练好的模型进行评估,并计算模型的性能指标,如准确率、精确率、召回率等。这些指标可以帮助你评估模型的预测能力和泛化能力。 需要注意的是,心脏病预测是一个复杂的医学问题,仅仅使用心电图信号可能不能得到准确的预测结果。通常情况下,还需要结合其他患者的临床信息和医学知识来进行综合评估。因此,在进行心脏病预测时,建议与专业医生合作,并遵循相关的医学准则和规范。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值