阅读量: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阻止组件的默认行为 