官网传送门 创建 Vue 项目 全局安装 vue 脚手架：npm i -g @vue/cli 创建项目：vue create project-name 运行项目：npm run serve 暴露 webpack 配置：vue inspect > output.js Vue 脚手架项目结构1234567891011121314151617.├── node_modules├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── HelloWorld.vue│ │── App.vue: 汇总所有组件│ │── main.js: 入口文件├── .gitignore: git 版本管制忽略的配置├── babel.config.js: babel 的配置文件├── package.json: 应用包配置文件├── README.md: 应用描述文件├── package-lock.json：包 ...

动态组件vue 提供了内置的 <component> 组件用于动态切换组件。 12345<!-- 通过 is 属性指定要渲染的组件，传递的是字符串 --><component :is="comName"></component><button @click="comName = 'Left'">展示Left组件</button><button @click="comName = 'Right'">展示Right组件</button> keep-alive默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组件的状态，对被包裹的组件进行状态缓存。 被 <keep-alive> 包裹的组件会多出两个生命周期函数：当组件被激活时，触发 activated 钩子；当组件被缓存时，触发 deactivated 钩子。 ...

:::tip 组件实现应用局部功能代码和资源的集合::: 非单文件组件非单文件组件即所有组件写在同一个文件里。 基本使用定义组件： 使用 Vue.extend(options) 创建，和 new Vue(options) 的区别； el 不写，最终所有的组件都要经过 vm 的管理，由 vm 的 el 决定服务哪个容器 data 必须写成函数，避免组件被复用时，数据存在引用关系 使用 template 节点可配置组件结构 注册组件； 局部注册：components 选项 全局注册：Vue.component('组件名',组件) 使用组件：<school></school> 1234<div id="root"> <hello></hello> <school></school></div> 1234567891011121314151617181920212223242526272829303132333435363738394041424 ...

官网传送门 VueVue 是动态构建用户界面的渐进式 JavaScript 框架 Vue 借鉴 Angular 的模板和数据绑定技术，React 的组件化和虚拟 DOM 技术 数据代理Object.defineProperty() 的使用12345678910111213141516171819202122232425262728293031323334353637let person = { name: 'Vue', sex: 'none',}let number = 19// 配置一// 参数：对象、属性名、配置Object.defineProperty(person, 'age', { // 属性值 value: 21, // 属性是否可修改 writable: true, // 属性是否可枚举（遍历） enumerable: true, // 属性是否可删除 configurable: true,})Object.keys(person)// 配置二// ge ...

模块化概念 模块化是指解决一个复杂问题时，自顶向下逐层把系统划分为若干模块的过程，模块是可组合、分解和更换的单元。 模块化可提高代码的复用性和可维护性，实现按需加载。 模块化规范是对代码进行模块化拆分和组合时需要遵守的规则，如使用何种语法格式引用模块和向外暴露成员。 CommonJS每个模块内部都有一个 module 变量代表当前模块，存储相关信息。 通过 module.exports 对象把模块内部成员共享出去，供外界使用。加载模块得到的就是 module.exports 指向的对象。 默认情况下，exports 和 module.exports 指向同一个对象。最终导出的结果以 module.exports 指向的对象为准。 Nodejs 用的是 CommonJS 模块化规范。 基本用法12345678910111213141516171819202122232425262728// m1.jsmodule.exports = 'module1'// m2.jsexports.name = 'Bruce'exports.age = 11// ...

:::tip 浏览器本地存储浏览器本地存储包括两个对象：sessionStorage 和 localStorage，它们都是 Storage 的实例对象。 1window.localStorage instanceof Storage // true ::: 基本使用访问数据：getItem() 添加、修改数据：setItem() 删除数据：removeItem() 清空数据：clear() 获取给定位置的键名：key() 1234567891011121314151617181920212223// 以 localStorage 为例，sessionStorage 都一样// 添加数据localStorage.setItem('name', 'BruceBlog')localStorage.setItem('age', 2333)// 修改数据localStorage.setItem('age', 520)// 读取数据localStorage.getItem('age')// 删除 ...

数组方法数组操作push()向数组末尾添加元素，返回新数组长度 12345let arr = [520, 55520, 521]// 添加单个元素let newLen = arr.push(666)// 添加多个元素arr.push(2333, 'BruceBlog') pop()数组末尾删除一个元素，返回被删除的元素 123456let arr = [520, 55520, 521]let el = arr.pop()// 数组没有元素返回 undefinedarr = []arr.pop() unshift()数组头部添加元素，返回新数组长度 12345let arr = [520, 55520, 521]// 添加单个元素let newLen = arr.unshift(666)// 添加多个元素arr.unshift(2333, 'BruceBlog') // [2333, 'BruceBlog', 666, 520, 55520, 521] shift()数组头部删除一个元素，返回被删除的元素 123456le ...

grid 布局:::warning grid 布局最牛逼的 CSS 布局方式::: grid 布局概述flex 弹性布局是一维布局，grid 网格布局是二维布局。 开启方式：元素添加 display: grid 或 display: inline-grid 。 开启 grid 布局的元素，称为容器，其子元素变成容器成员，称为 grid 项目。 grid 布局原理：通过设置容器和项目的属性，来控制子盒子的位置和排列方式。 grid 布局容器盒子常见属性display创建 grid 布局容器。 属性值 含义 grid 容器元素为块级元素 inline-grid 容器元素为行内元素 grid-template-columns & grid-template-rowsgrid-template-columns 设置列宽，grid-template-rows 设置行高。用法类似，以前者为例进行说明。 设置固定列宽行高grid-template-columns: 30px 40px 50px 表示一共三列，列宽分别为 30px 40px 50px。 1234567.fa ...

JavaScript 和 ECMAScriptECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的一种实现（Adobe ActionScript 和 JScript 同样实现了 ECMAScript）。 ECMAScript 是欧洲计算机制造商协会 ECMA（European Computer Manufacturers Association）发布的浏览器脚本语言标准。它是 262 号标准文件，又叫 ECMA-262。 ECMAScript 定义了语言在语法、类型、语句、关键字、保留字、操作符、全局对象的规范。 JavaScript 并不仅限于 ECMAScript。在浏览器中，JavaScript 包括 ECMAScript、文档对象模型 DOM、浏览器对象模型 BOM。 日常工作中认为 JavaScript 和 ECMAScript 是同义词，也懒得做区分了。 ES5 和 ES6这主要是 ECMAScript 版本命名方式的改变。 一开始 ECMAScript 使用版本号进行命名，ECMAScript 1.0 称为 E ...