前端常识

参考资料

吴悠讲编程 - 前端 - 5
WEB 开发入门 - 精简 - 4

HTML

标签
属性
元信息, 字符编码 / 作者 / 图标 / 标题...
头中可以放 css/js
md常用 p/h1-h6/ul/ol/li/em/strong
通用块 span/div

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>二次元俱乐部</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
      rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <header>
      <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav>
      <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目,省略…… -->
      </ul>

      <form>
        <!-- 搜索栏是站点内导航的一个非线性的方式  -->
        <input type="search" name="q" placeholder="要搜索的内容" />
        <input type="submit" value="搜索" />
      </form>
    </nav>

    <main>
      <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article(一篇文章),内容略…… -->
      </article>

      <aside>
        <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接,略略略…… -->
        </ul>
      </aside>
    </main>

    <footer>
      <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

CSS

需要 <link> 一下
选择器 .classname/标签名/通配符/... {属性: 值; 属性: 值;}
属性: 尺寸 / 背景 / 颜色 / 文本 / 布局 / 过渡 / 变换 / 动画
选择器后加 :name 伪类选择器 (某个状态下, 如光标悬浮)
加 ::name 伪元素选择器 (为标签添加元素, 如对号 / 只选中第一行)

JS

<script> 一下
DOM 文档对象模型获取 HTML 标签转化为 js 对象进行操作其中提供大量方法, 包括事件监听
定时器字面意思, 异步的
(参数列表) => {} 匿名函数
模块范式: ESM (引擎)/CJS (Node)
- ESM export/import 起个名字(相当于全导入)/{ 导出的 obj 的名字 } from file 导入导出 (编译时加载, 静态)
- CJS module.exports 导入 require('file') 导出 (运行时加载, 动态)
promise 异步操作
- promise((resolve,reject)=>{resolve(date)})
- .then((date)=>{...})
- then() 经常返回另一个 promise 对象, 用以链式调用 .then()
- .catch((err)=>{...})
- async/await 是 promise 的语法糖
proxy 代理对象, 可以拦截对对象的操作, 如 get() / set() 等, 进行一些操作

TS

类型: 类型检查 / 注解 / 断言 / 联合
string/number/boolean/null/undefined
数组 / 元祖 (结构体) / 枚举 / 模版
函数重载 / 类继承 / 访问权 / 多态 / 装饰器

网络请求

ajax 依赖库对象, 指定请求方式 / 地址 / 参数 / 回调函数 (响应事件)
axios 封装的 ajax,async 一个函数,await 请求, 进行操作
- 拦截器 (面向切面) 可以统一操作请求
fetch 基于 promise 的异步请求 fetch(url).then(res=>res.json()).then(data=>console.log(data))

VUE 2

实例化一个 VUE, 在其参数中
声明响应式数据 (数据与显示同步) date(){name:value} 方法 methods:{fun(){}}
HTML 中用插值表达式 <p>{{name}}</p> name 亦可是表达式 / 方法 /...
计算属性 computed:{fun(){}} 缓存函数结果 (constexpr 函数)
侦听器 watch:{name(newValue,oldValue){}}
指令 v-text="..." v-html="..." 解析... 为内容 v-for v-if v-show
- v-bind:属性: 绑定属性
- v-on:opt="fun" 绑定事件
- v-model="fun" 双向绑定, 如输入框
- 可以加修饰符, 如 v-model.trim="fun"

VUE CLI

npm i @vue/cli -g
vue-create
VUE 提供 server build lint 等功能
一个 .vue 文件是一个单文件组件, 包含结构, 样式, 逻辑
除根组件 App.vue 外, 不需要 el 属性, 挂载在哪取决于父组件
- 通过引入组件, 即可在结构中使用子组件
- 导出时声明自己用的子组件
导出 props 声明自己可以接收的属性, 父组件可以在 HTML 标签中指定
- 这些属性可以声明为响应式
子组件可以自定义事件去向父组件传递信息
子组件可以定义插槽以显示父组件调用时标签内的内容

`VUE Router` 与 `VUEX`

Router 检查 url 变化, 实现单页面应用
Vuex 全局的状态管理工具, 代替父子组件间的复杂通信
vue create 时选上, 会生成相应文件夹, 在 main 中引入, 作为 VUE 实例的参数
在相应文件夹中进行配置, 使用方法查看官网

VUE 3

组合式 api, 原本 VUE 功能集中 (响应式数据, 计算属性), 造成了逻辑分散,VUE3 可以将 VUE 功能随地使用
因此原本 new vue -> create (vue).mount ()
<script setup> </script> 代替一大坨, 原本集中声明的可以使用相应方法

Pinia

简化的复合直觉的 VUEX
就像写一个组件一样, 但全局

前端常识

参考资料

HTML

CSS

JS

TS

网络请求

VUE 2

VUE CLI

VUE Router 与 VUEX

VUE 3

Pinia

`VUE Router` 与 `VUEX`