Java整理12

1、前端工程化

概念:使用软件工程的方法来单独解决前端开发流程中模块化、组件化、规范化、自动化的问题,提高效率降低成本。
ECMA6Script(VUE3的基础)
let:(1)let不能重复声明(2)let有块级作用域,非函数花括号遇见let会有块级作用域,也就是只能在花括号之间(类似于局部变量)(3)let只能先声明再使用(4)let定义的全局变量不会作用window对象的属性
const:不可修改的let,类似于final修饰的变量let a=10;          const b=7;a=20;	√           b=10;     ×

2、其它

模板字符串:${ }
es6的解构表达式
箭头函数:类似于Java中的lambda表达式let fun=(x)=>{} x为参数列表,{}函数体
this:箭头函数没有自己的this,它的this指外层上下文层次中的this
eg:this                                1let person={name:sh,                        2showName:function()console.log(this.name)      2viewName:()=>console.log(this.name)      1}
rest参数   在形参上使用,和Java中可变参数一样let fun=(a,b,c,...arr)=>{console.log(a,b,c)              1,2,3console.log(arr)	            4,5,6,7,8,9}fun(1,2,3,4,5,6,7,8,9)
spread实参let arr=[1,2,3]let fun=(a,b,c)=>conlole.log(a,b,c)          fun(arr)					 [1,2,3]fun(...arr)同fun(1,2,3)       1,2,3
快速合并数组let a=[1,2,3]let b=[4,5,6]let c=[...a,...b]同[1,2,3,4,5,6]
快速合并对象let person1={name:"sss"}let person2={age:"18"}let person={...person1,...person2}
es6的对象创建与拷贝let arr=[1,2,3]let arr2=arr;			浅拷贝	地址复制let arr2=[...arr]		深拷贝let person2=JSON.parse(JSON.stringify(person))		深拷贝
ES6模块化--暴露和导入方式(1)分别导出首先允许导出的部分前面加:exportimport * as m from 地址(2)统一导出在最后加入export{要导出的量}(3)默认导出在最后加入export default 到导出的量,默认导出,一个js中只能有一个
无论那种导出方式都会将导入的作为对象来处理,所以导入后要接收。
解构表达式,默认导入格式import {default as 别名}from 地址

3、Nodejs简介和安装

npm(node package manager)是node.js包管理工具前端框架的下载工具		npm前端框架的管理工具		vite
修改镜像源npm config set registry https://registry.npm.taobao.org/
查看源npm config get registry
设置本地仓库位置npm config set prefix  "地址"
查看本地仓库npm config get prefix
升级版本npm install -g全局 npm@版本号
npm常见命令npm init 			(-y全部按照默认生成一个JSON文件)npm install -g 		包名npm ls 				查看当前项目的依赖npm ls -g	   	 	查看全局依赖npm run 脚本名称

4、Vue的两个核心功能

(1)声明式渲染	vue基于准HTML拓展了一套模板语法,使我们可以声明式地描述最输出的HTML和JavaScript状态之间的关系。eg:<span v-text=message>sss</span><script>let message=xxx</script>	当message发生变化时span中文本也会跟着变化
(2)响应式渲染vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOMeg:1、导入vue3的依赖 vue3的js文件<body><div id="app"><h1>hello</h1>---><h1 v-text="message">hello</h1>或<h1>{message}</h1><button>change</button></div><script>const app=vue.createApp({setup(){//定义数据、对象let message="hello"}return{message} //在return中返回的变量/方法才能与HTML元素相关联})将app对象挂载在指定的元素上,被挂载的元素内部就可以通过vue框架实现数据的渲染app.mout("#app")绑定属性:v-bind:style="colorstyle"setup中定义	let colorstyle={"background-color":"red"}return添加colorstyle绑定事件@click="fun()"setup中定义fun方法return中返回fun
5、Vite前端工具链npm create vite@版本号/vitectrl+c  停止Ts与JsSFC(single file component)单文件组件vue通过.vue文件将HTML、CSS、JS三种代码集合为一<script></script>          JS<style></style>            CSS<template></template>      HTMLCSS样式的导入方式:(1)在.vue文件中的style标签中书写(2)将CSS样式保存到独立的css文件中,谁用谁引用引入方式:(1)从script引入		import '路径'(2)从style中引用	@import '路径'(3)如果引入样式要在所有的.vue文件中生效,可以在main.js中引入setup的加入可以使代码中重复默认的书写内容省略不写

6、Vue3视图渲染技术

插值表达式{{数据名称、方法名、对象调用的API}},它不依赖标签,即不一定要放在标签里可以单独使用
字符串.split(分割符),返回一个数组,数组.join(拼接符号)再次拼成一个字符串。
v-text:不能识别html结构
v-html:可以解析html语句
Attribute属性渲染v-bind:将数据绑定到元素属性上v-bind:src="  "	v-bind:属性名="数据名"简写成:属性名="数据名"
事件渲染v-on:事件名称="函数名()"简写@事件名
原生js事件名称:onclick、ondbclick、onblur、onfocus
vue事件名称:click、dbclick、blur、focus
事件的修饰符.once事件只绑定一次prevent阻止组件的默认行为

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows USB 设备驱动开发- WinUSB 简介

WinUSB 是 Windows 随附的 USB 设备的通用驱动程序。WinUSB 包括&#xff1a; 内核模式驱动程序 (Winusb.sys)&#xff1b;公开 winusb.h 中所述的 WinUSB 函数的用户模式动态链接库 (Winusb.dll)。 借助这些函数&#xff0c;你可以使用用户模式软件管理 USB 设备&#xff1b;…

12 位运算符

位运算符只能用于整数&#xff0c;其内部执行过程为&#xff1a;首先将整数转换为二进制数&#xff0c;然后右对齐&#xff0c;必要时左侧补0&#xff0c;按位进行运算&#xff0c;最后再把计算结果转换为十进制数字返回。 ① 左移&#xff1a;高位丢弃&#xff0c;低位补0&…

Exponential Moving Average (EMA) in Stable Diffusion

1.Moving Average in Stable Diffusion (SMA&EMA) 1.Moving average 2.移动平均值 3.How We Trained Stable Diffusion for Less than $50k (Part 3) Moving Average 在统计学中&#xff0c;移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …

React 常见的报错及解决方法

1、Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons&#xff08;无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一&#xff09; 原因&#x…

数据结构与算法-插入排序

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、插入排…

unity ui toolkit的使用

UIToolkitExamples (github)样例 GitHub - ikewada/UIToolkitExamples: チュートリアル動画「使ってみようUI Toolkit」のためのサンプルプロジェクトです官网 Unity - Manual: UI Toolkit视频教程 使用 UI Toolkit - 上集_哔哩哔哩_bilibili 使用 UI Toolkit - 下集_哔哩哔哩_…

Java | Leetcode Java题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution {public void moveZeroes(int[] nums) {int n nums.length, left 0, right 0;while (right < n) {if (nums[right] ! 0) {swap(nums, left, right);left;}right;}}public void swap(int[] nums, int left, int right)…

赋能未来教育,3DCAT助力深圳鹏程技师学院打造5G+XR实训室

随着国家对教育行业的重视&#xff0c;实训室建设已成为推动教育现代化的关键。《教育信息化2.0行动计划》、《职业教育示范性虚拟仿真实训基地建设指南》等政策文件&#xff0c;明确指出了加强虚拟仿真实训教学环境建设的重要性。 在这一大背景下&#xff0c;教育行业对于实训…

初识C++ · AVL树(1)

目录 前言&#xff1a; 1 AVL树的创建 2 部分成员函数 2.1 查找 2.2 中序遍历 2.3 插入 2.4 左旋转 2.5右旋转 前言&#xff1a; 上文&#xff0c;上上文提到了map set&#xff0c;二叉搜索树&#xff0c;其实都是为了近两文做铺垫的&#xff0c;虽然map的底层是红黑树…

YOLOv8目标检测网络评估指标介绍

本章主要介绍一下AP的计算方法, 其中会穿插介绍TP、TN、FP、FN、Precision和Recall等概念。 1.类别、置信度和IoU 先来了解下类别、置信度和IoU,这三者的定义很重要,因为在后面的计算过程中会借助这三者的值来计算AP值。 类别是指模型预测的类别概率中的最大的一个类别,置…

openFeign配置okhttp

原来的项目出现了性能问题&#xff0c;老大不知道怎么的&#xff0c;让我改openFeign线程池为okhttp&#xff0c;说原生的不支持线程池性能比较差。 原openFeign配置文章地址 一、pom文件 <dependency><groupId>org.springframework.cloud</groupId><arti…

设计模式实战:媒体播放器的设计与实现

问题描述 设计一个媒体播放器系统,用户可以播放、暂停、停止和切换媒体。系统需要支持多种媒体格式(如音频和视频),并允许在播放过程中应用不同的效果(如音量调节、均衡器等)。 设计分析 状态模式 状态模式允许对象在其内部状态改变时改变其行为。媒体播放器需要在不…

AI学习指南机器学习篇-半监督聚类的优缺点

AI学习指南机器学习篇-半监督聚类的优缺点 引言 半监督聚类是机器学习领域中的一个重要概念&#xff0c;它结合了监督学习和无监督学习的优点&#xff0c;可以应用于许多领域&#xff0c;例如文本分类、图像分类和社交网络分析等。然而&#xff0c;半监督聚类算法也存在着一些…

react配置代理的3中方法

1.使用create-react-app的代理配置 可以在项目根目录下的package.json文件中添加proxy字段来配置代理&#xff1a; {..."proxy": "http://localhost:5000" } //注意&#xff1a;比如当前端口是3000&#xff0c;先在当前端口3000中找对应路径内容&#xff…

c17 新特性 字面量,变量,函数,隐藏转换等

导论 c17新特性引入了许多新的语法&#xff0c;这些语法特性更加清晰&#xff0c;不像传统语法&#xff0c;语义飘忽不定&#xff0c;比如‘a’你根本不知道是宽字符还是UTF-8 字符。以及测试i i&#xff0c;最后结果到底是多少。这种问题很大情况是根据编译器的优化进行猜测&a…

iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部

文章目录 iframe 渲染请求到的 html (邮件预览), 避免样式污染接上一条, 打印 iframe 邮件详情接上一条, iframe 预览邮件时, 要求固定水平滚动条在视口底部 iframe 渲染请求到的 html (邮件预览), 避免样式污染 背景: 之前弄了邮件系统, 但显示邮件内容时是直接 v-html , 导致…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的跳格子游戏(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

手写spring简易版本,让你更好理解spring源码

首先我们要模拟spring&#xff0c;先搞配置文件&#xff0c;并配置bean 创建我们需要的类&#xff0c;beandefito&#xff0c;这个类是用来装解析后的bean&#xff0c;主要三个字段&#xff0c;id&#xff0c;class&#xff0c;scop&#xff0c;对应xml配置的属性 package org…

理解 Kotlin 中的 crossinline 关键字

理解 Kotlin 中的 crossinline 关键字 Kotlin 提供了丰富的功能&#xff0c;用于开发简洁且富有表现力的代码。这些特性包括高阶函数和 Lambda 表达式&#xff0c;它们是 Kotlin 设计的核心部分。在使用这些构造时&#xff0c;您可能会遇到 crossinline 关键字。在本文中&#…

第二讲:NJ网络配置

Ethernet/IP网络拓扑结构 一. NJ EtherNet/IP 1、网络端口位置 NJ的CPU上面有两个RJ45的网络接口,其中一个是EtherNet/IP网络端口(另一个是EtherCAT的网络端口) 2、网络作用 如图所示,EtherNet/IP网络既可以做控制器与控制器之间的通信,也可以实现与上位机系统的对接通…