Vue3
Vue3快速上手Vue3简介
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
Vue3带来了什么性能的提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
……
源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking
……
拥抱TypeScript
Vue3可以更好的支持TypeScript
新的特性
Composition API(组合API)
setup配置
ref与reactive
watch与watchEffect
provide与inject
……
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 ...
Vue3+TypeScript
1. Vue3简介
2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(n
经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址:Release v3.0.0 One Piece · vuejs/core
截止2023年10月,最新的公开版本为:3.3.4
1.1. 【性能的提升】
打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。
1.2.【 源码的升级】
使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。
1.3. 【拥抱TypeScript】
Vue3可以更好的支持TypeScript。
1.4. 【新的特性】
Composition API(组合API):
setup
ref与reactive
computed与watch
……
新的内置组件:
Fragment
Teleport
Suspense
……
其他改变:
新的生命周期钩子
data 选项应始终被声明为一个函数
移除 ...
无题
https://www.lodashjs.com/
TypeScript
快速入门TS简介
以JS为基础构建的语言,TypeScript是JavaScript的超集
可以在任何支持JS的平台中执行
它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性
TS不能被JS解析器直接执行,TS代码需要通过编译器编译为JS,然后再交由JS解析器执行
TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用
相较于JS(动态类型语言,变量类型不固定)而言,TS拥有了静态类型,更加严格的语法,更强大的功能;
TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;
TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;
同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
TS增加:
类型
支持ES的新特性
添加ES不具备的新特性
丰富的配置选项
强大的开发工具
TS开发环境搭建
使用npm全局安装typescript
进入命令行
输入:npm i -g typescript
查看版本:tsc
使用tsc对ts文件进行编译
进入命令行 ...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post$ hexo new "My New Post"
More info: Writing
Run server$ hexo server
More info: Server
Generate static files$ hexo generate
More info: Generating
Deploy to remote sites$ hexo deploy
More info: Deployment
前端技巧总结
逻辑或操作符||如果||前面的值是0 '' false null undefined NaN其中的任意一种,则直接返回||后面的值
function(obj){ var a = obj || {}}// 等价于 =>>function(obj){ var a; if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined || isNaN(obj) ){ a = {} } else { a = obj; }}
空值合并操作符??如果??前面的值没有定义返回后面。如果定义,则返回前面;有时不想把空字符串或者0也当做false处理可以使用此法
function(obj){ var a = obj ?? {}} ...
Vue2
Vue核心Vue简介介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:将数据通过某种方法编程用户可以看到的界面渐进式:Vue可以自底向上逐层的应用(简单应用:只需一个轻量小巧的核心库;–> 复杂应用:可以引入各式各样的Vue插件)
Vue 的特点
1.遵循MVVM模式
2.采用组件化模式,提高代码复用率,且让代码更好的维护
3.声明式编码,让编码人员无需直接操作DOM,提高开发效率
/* 命令式编码 */// 准备html字符串let htmlStr = '';// 遍历数据拼接html字符串persons.forEach(p => { htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`})// 获取list元素let list = document.getElementById('list')// 修改内容(亲自操作DOM)list.innerHTM ...
Promise
Promise介绍Promise理解
抽象表达
Promise 是 JS 中进行异步编程的新解决方案,旧方案是单纯使用回调函数
具体表达
从语法上:Promise 是一个构造函数
从功能上:promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值
异步编程
fs 文件操作require('fs').readFile('./index.html', (err,data)=>{})
数据库操作
AJAX$.get('/server', (data)=>{})
定时器setTimeout(()=>{}, 2000);
promise 的状态promise状态:promise实例对象的一个属性,属性名:promiseState,属性是内置的,不能直接对属性进行操作
promiseState的值有以下三种
pending 未决定的,初始化的默认值
resolved / fulfilled 成功
rejected 失败
...
ES6-ES11
ES简介ES全称EcmaScript,是脚本语言的规范,而平时编写的JavaScript是EcmaScript的一种实现,所以ES新特性其实质就是JavaScript的新特性
ES6let关键字//声明变量let a;let b, c, d;let e = 100;let f = 521, g = 'iloveyou', h = [];
let 关键字用来声明变量
不允许重复声明
let star = '罗志祥'; // 重复声明变量,变量被污染let star = '小猪'; // 重复声明会报错,var可以重复声明
块儿级作用域 全局, 函数, eval(es5的严格模式)
// if else while for { let girl = '周扬青'; var boy = '周扬';}console.log(girl); // 报错console.log(boy); // 周扬
不存在变量提升
console.log(song); ...
JavaScript基础篇
JavaScript简介JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
JS 编写位置
写在标签属性中
如 button 中的 onclick 和 a 中的 href<button onclick="alert('我是弹窗')">点击出现弹窗</button><a href="javascript:alert('我是弹窗')">点击出现弹窗</a>
页面中的位置
javascript是可以放在任何位置
放在head部分
最长用的方法是在head部分位置放置script元素,浏览器解析head就会执行这个代码
放置body部分
javascript代码在页面读取到该语句时就会被执行
注意:浏览器解析HTML是按先后 ...