重学 Vue.js
Vue.js渐进式 MVVM 单向数据流 双向绑定Vue 官网Vue.js 技术揭秘
Nuxt 2Nuxt 3
VueUse
组件通信
父子组件通信
props / $emit + v-on
v-model
$attrs / $listeners（inheritAttrs: false）
兄弟组件通信
$parent.$children, 在 $children 中通过组件 name 查询到需要的组件实例
Vue3: $refs
跨层级组件通信
provide inject
任意组件通信
Vuex
EventBus
自定义 v-model123456789101112131415161718192021222324<template> <input :value="modelValue" @input="inputHandler"></template><script>export default { name: 'VModel' ...
通信方式知多少
JSONP12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSONP</title></head><body> <input type="text" id="input" /> <ul id="list"></ul> <script> function jsonp(url, callback, success) { le ...
重学 Node.js
Node.jsNode.js 诞生于 2009 年，Node.js 采用 C++ 语言编写而成，是一个基于 Chrome V8 引擎的 JavaScript 运行环境，让 JavaScript 的运行脱离浏览器，可以使用 JavaScript 语言编写服务器端代码
Node.js 官网下载稳定版本，偶数版本为稳定版本，奇数版本为尝鲜版本Node.js 中文文档
NPM 官网NPM 中文文档
Koa 官网Koa 中文文档
初体验12345678910111213141516171819202122232425/* nodejs */const http = require('http')const serve = http.createServer((req, res) => { res.end('Hello World!')})serve.listen(3000)/* Express */const express = require('express')const app = express() ...
重学 JavaScript（二）
面向对象抽象 封装 继承 多态
工厂模式123456789101112function Factory() { // 原料 let obj = {} // 加工原料 obj.prop = '' obj.fn = function() {} // 出厂 return obj}let productA = Factory()let productB = Factory()
工厂模式解决了代码复用的问题
但是却没有解决对象识别的问题
创建的实例都是 Object 类型, 不清楚是哪个工厂的实例
公共方法和属性会随着工厂方法的调用而重复占用内存
构造函数12345678910function Factory() { this.prop = ''}Factory.prototype = { constructor: Factory, fn: function() {}}let productA = new ...
重学 JavaScript（一）
走进 JavaScript 世界JavaScript 是一门基于对象和事件驱动的弱类型脚本语言
机器语言
汇编语言
高级语言
面向过程 C
面向对象 C++
函数式
声明式
脚本语言动态语言
相较于编译语言，不需要编译器，它需要的是解释器
编译器面向的是计算机
解释器面向的是某个特定的软件或者计算机某一个部分
HTML 结构
CSS 美化
JavaScript 行为
浏览器内核
渲染引擎JS引擎越来越独立，内核就倾向于只指渲染引擎
JS 引擎
解析和执行 javascript 来实现网页的动态效果
组成
ECMAScript ECMA262 标准
JS语法和基本对象
JS-Web-API W3C 标准
DOM文档对象模型
BOM浏览器对象模型
事件绑定
Ajax
存储
引用方式123456789101112131415161718192021222324<!-- 行间 --><a onclick="alert('Hello World!')" id="fuck" ...
响应式设计
媒体查询媒体设备
all所有类型的设备
screen彩屏设备
handheld 手持设备
print 打印预览
braille 盲文触觉设备
speech 屏幕阅读器
tv 电视类设备
关键词
and - 和，在多个条件的时候，可以用 and 连接，表示条件都满足才加载样式12345@media screen and (max-width: 1000px) and (orientation: portrait) { div { }}
not - 不，表示只要不是某一个条件的情况下，其他条件都可以加载样式12345@media not screen and (min-width: 1000px) { div { }}
only - 只有，表示只有在某个条件下，才可以加载样式12345@media only screen and (orientation: landscape) { div { }}
, - 或，表示只要满足其中一个条件，就可以加载样式123 ...
移动端布局
英寸一般我们都用英寸来描述设备的物理尺寸，例如电脑: 17英寸、13英寸，手机: 6.5英寸、4英寸；我们说一个手机6.5英寸，其实指的是屏幕对角线的长度1 英寸 = 2.54 厘米
Px 像素一个小正方形的方块，每一个像素都具备 颜色 和 特定的位置；像素并不是个绝对单位
分辨率屏幕具体由多少个像素组成，并不是分辨率高，就说明屏幕清晰的，这个还需要考虑尺寸问题
PPI像素点和清晰度的关系，即每英寸包含的像素点
物理像素上面我们描述的这个像素，我们称为物理像素 设备像素 UI像素，即设备真实存在的物理单元
同样尺寸的两台手机: 低分辨率手机 320 480 和 高分辨率手机 640 960高分辨率手机的两个像素点的大小 = 低分辨率手机的一个像素点的大小设定相同的像素点，在分辨率高的屏幕上，看上去会更小；这就是为什么同样大小的元素，在 PC 和 移动端，显示的有差别的原因移动端下的像素点，比 PC 的像素点要更小
那为什么 Mobile 70 70 看着比 PC 80 80 还要大呢？
Retina 视网膜屏幕我们的手机屏幕尺寸是非常多的，但是即使尺寸很多分辨率不同，我们会发现一个很神 ...
CSS 预处理器 Less
安装 编译koala是现在市面上，最好用的 CSS预处理语言 图形编译工具，可以编译多种 CSS预处理语言，例如: less、sass、compass
支持中文
有图形界面
可以很方便地修改输出路径
修改压缩方式方便
可以设置编译选项
sourcemap 生成源文件映射
line Comments 行注释
debug Info 调试信息
strict Math 严格运算模式，数学运算必须加上()
strict Units 严格单位模式
autoprefix 自动添加前缀
其他使用方法，参见官网
基本语法变量@变量名: 变量值;
123456789101112131415161718192021222324@w: 100px; /* 属性值 */@imgurl: "../images"; /* 插值: 属性值中的某一部分 */@box: box_one; /* 插值: 选择器中的某一部分 */@background: background; /* 插值: 属性名中的某一部分 */.@{box} { width: @w; @&# ...
CSS 选择器
样式优先级
行内样式 > Id > Class > Tag > *
元素声明的样式 > 浏览器默认样式 > 元素继承的样式
!important 无敌
选择器元素选择器
ID选择器#id {}
类选择器.class {}
标签选择器div {}
组合选择器.header, .footer {}
关系选择器
后代选择器div p {}
父子选择器div > p {}
相邻选择器.test + p {}查找.test后的第一个p标签
兄弟选择器.test ~ p {}查找.test后所有的同级p标签
属性选择器
[class]查找有class属性的标签
p[class]查找有class属性的p标签
p[class="header"]查找有class属性，并且class属性只能是header的p标签1<p class="header"> ...
CSS 基础
css 引用
<link>
HTML 标签
⻚面被加载时，link 会被同时加载
权重较高 兼容性好
js 动态插入
@import
CSS 提供
引用的 css 会等到⻚面被加载完再加载
权重较低 有兼容性问题
layout 布局历程block inline
块 内联
inline-block
内联块
float
浮动
relative absolute fixed sticky
定位粘性定位 relative + fixed
flex
弹性盒模型
float 浮动一开始，浮动的目的只是达成图文环绕效果
1<img src="dog.jpg" align="left" />
在 img 的标签上面，可以添加 align，用于控制图片浮动的方向，向左 or 向右
后来，这样的特性被添加到 css 中，可以对任何元素使用
1<img src="dog.jpg" style="float: left;" />
效果和上面添加 align=”left ...