Vue
开始
Vue是一款用于构建用户界面的渐进式JavaScript框架，它本身只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，同时能够驱动复杂的单页应用或多页应用。
渐进式，它类似于迭代开发，Vue只包含一些核心代码，可以让开发者搭建基本页面，如果开发者所开发项目的页面功能相对比较丰富，那么需要使用相关插件去完成搭建。
Vue官方插件有Pinia、Vuex、VueRouter等，而Vue第三方插件也是用来额外添加功能的，是非官方人员编写的插件，如VueLazyload、VeeValidate、Element-Plus等。
声明式渲染可以理解为，Vue基于标准HTML拓展了一套模板语法，使得开发者可以声明式地描述最终输出的HTML和JavaScript状态之间的关系；响应式可以理解为，Vue会自动跟踪JavaScript的状态变化，并在状态发生改变时响应式地更新DOM。
Vue2是以JavaScript为开发基础的，而Vue3是从0开始重构的，将开发基础切换为TypeScript（将弱类型程序语言开发转向强类型程序语言开发），不仅可以满足中小型项目的开发，还更适合中大型项目的构建。
基础语法
图标
企业里图标怎么搞的？
emoji 在不同系统显示效果不一样（Win/Mac/手机各一套），而且风格粗糙。企业都用 SVG 图标库——矢量图，缩放不失真，风格统一。
最常见的方案是 Iconify，它的用法：
- 安装：npm install @iconify/vue
- 导入：import { Icon } from ‘@iconify/vue’
- 使用：
<Icon icon="mdi:account-edit" />icon 格式是 “图标集:图标名”
另两种企业常用方案：
| 方案 | 例子 | 适用场景 |
|---|---|---|
| Iconify | <Icon icon="mdi:heart"/> |
轻量，按需加载 |
| Element Plus | <el-icon><Edit/></el-icon> |
用了 Element UI 组件库时附带 |
| 直接 SVG 文件 | <img src="@/icons/user.svg"/> |
设计师给定制图标时 |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 March！
wechat
相关推荐
2026-03-09
前端工程化
ES+ Git Node.js Express MongoDB Ajax Axios ES6+ECMAScript是标准，JavaScript是其主要实现。 ES5的严格模式1'use strict' ◆严格模式下八进制的限制严格模式下不允许使用0开头的八进制数字表示法（如012）。会抛出Uncaught SyntaxError: Octal literals are not allowed in strict mode。不过允许使用十六进制表示法（如0x12）。设计原因: 数字前导零存在语义歧义（数学上012应与12等价），属于历史遗留问题。 ◆严格模式下变量声明的限制不允许未声明直接使用变量（如username = 100），会抛出username is not defined错误。非严格模式对比: 普通模式下会自动创建全局变量，属于隐式变量声明。 let 与 const◆ES6新增了let命令。 不存在变量提升：let不像var那样会发生“变量提升”现象。所以，变量一定要在声明后使用，否则报错。 暂时性死区：只要块级作用域内存在let命令，它...
2026-02-13
JavaScript基础
JavaScript 是一门动态的，弱类型的，解释型的，基于对象的脚本语言。 动态： 程序执行的时候才会确定数据类型。 静态： 书写代码的时候提前确定数据类型。 弱类型： 数据类型可以自动转换。 强类型： 数据类型无法自动转换。 解释型： 边解释，边运行，开发效率更高。 编译型： 编译后运行二进制文件。 脚本： 一般都是可以嵌在其它计算机语言当中执行。 ◆javaScript 的运行环境（解释器）： 浏览器，如Chrome浏览器中的V8引擎。 Node.js。 ◆浏览器端的 JavaScript 组成部分： 基本代码语法， ECMAScript，ECMA指定。 BOM， 浏览器提供的API，W3C指定。 DOM， 文档提供的API，W3C指定。 ◆其他特点： 指令结束符（语句结束符）是分号或者换行。 严格区分大小写。 开始JavaScript 在 HTML 中使用的三种方式： ① 行内式（内联脚本） 1<元素 onclick="代码.." ondblclick="代码.."></元素> ② 内嵌式...
2026-03-08
JavaScript进阶
HTMLCollection与NodeList区别① HTMLCollection 对象 能够返回HTMLCollection 对象的属性和方法： getElementsByTagName()、getElementsByClassName()、children HTMLCollection 对象的成员只能是元素类型对象 。 没有 forEach 方法。 是动态的集合，如果文档中新增了满足条件的元素，集合会自动更新。 ② NodeList 能够返回 NodeList 对象的属性和方法： querySelectorAll()、getElementsByName()、childNodes NodeList 对象的成员可以是节点类型的对象（包括元素类型、document 等）。 具有 forEach 方法。 静态的集合。 执行上下文全局执行上下文1.在JS代码执行前，就会创建一个window对象，这个window就是全局执行上下文对象。 2.预处理 变量处理：找到所有使用var声明的全局变量，给全局执行上下文对象添加属性，但不赋值（或者说值为undefined）。 函数处理：找到使...