Java整理12

阿里斯顿k

于 2024-07-25 21:29:33 发布

阅读量82

点赞数

分类专栏： JAVA 文章标签： java 开发语言

本文链接：https://blog.csdn.net/shf1730797676/article/details/140698564

版权

JAVA 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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                                1
	let person={
		name:sh,                        2
		showName:function()
			console.log(this.name)      2
		viewName:()=>
			console.log(this.name)      1
	}
rest参数   
	在形参上使用，和Java中可变参数一样
	let fun=(a,b,c,...arr)=>{
		console.log(a,b,c)              1,2,3
		console.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）分别导出
		首先允许导出的部分前面加：export
		import * 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状态并在其发生变化时响应式地更新DOM
	eg:
		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@版本号/vite
	ctrl+c  停止
	Ts与Js
	SFC(single file component)单文件组件
	vue通过.vue文件将HTML、CSS、JS三种代码集合为一
		<script></script>          JS
		<style></style>            CSS
		<template></template>      HTML
	CSS样式的导入方式：
		（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阻止组件的默认行为