- 博客(66)
- 收藏
- 关注
RSS订阅原创 nvm管理node版本
nvm全英文也叫，是一个nodejs的版本管理工具nvm和npm都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。
2022-08-16 07:30:31
14692
3
原创 npm包管理工具
npm的全称是，是NodeJS标准的包管理和分发工具新版的Nodejs已经集成了npm，在安装Node.js时npm会连带被安装，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包如果安装的是旧版本的npm，可以通过npm命令来升级。......
2022-08-01 14:33:57
807
原创 组件插槽与动态异步组件
组件插槽与动态异步组件1. 插槽在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 v-slot 指令。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的属性1-1 插槽内容插槽 slot，可以使组件的模版变得多样性，让用户在使用组件时可以自定义传入模版内容，将 <slot> 元素作为承载分发内容的出口当组件的 template 中没有包含 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃
2022-05-31 00:28:27
330
原创 prop与自定义事件
prop与自定义事件1. prop1-1 什么是propprop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 prop 属性的时候，它就变成了那个组件实例的一个属性组件中 prop 通常用于将父组件的值传递给子组件使用，或者将 Vue 实例里的属性值传递到组件中使用一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop，在组件实例中访问这个值，就像访问 data 中的值一样<!-- prop就是在组件上的属性称为prop prop会传递到组件内部 --
2022-05-27 20:00:29
1521
原创 vue组件化
vue组件化1. 了解组件1-1 组件化组件 —— 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强，，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件传统 web 应用开发方式都是采用插件化形式开发，一个页面引入多个依赖文件（css 文件、js 文件），依赖关系紊乱不好维护并且代码复用性不高vue 则实现了组件化开发，将页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片
2022-05-24 22:18:35
929
原创 表单输入绑定
表单输入绑定1. 双向绑定数据的绑定，无论是使用插值表达式 {{}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model1-1 v-model使用可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素v-model 是语法糖，默认情况下相当于 :value 和 @inp
2022-05-24 10:17:04
1380
原创 vue事件处理
事件处理1. 事件处理1-1 事件监听可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on: 可以使用 @ 来代替，两者作用都相同v-on 指令不能直接绑定，后面需要指定一个事件类型以及需要调用的方法名称，例如 click、input 事件类型事件需要调用的方法名称定义在 methods 选项中，方法中的 this 指向实例对象，不要使用箭头函数会改变 this 指向在 Vue 中，调用的方法可以直接使用方法名调用，也可以加上 () 形式，在参数时
2022-05-24 10:16:36
291
原创 内置指令与渲染
内置指令与渲染1. 内置指令指令 (Directives) 是带有 v- 前缀的特殊属性，指令属性的值预期是单个 JavaScript 表达式当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM基本指令：v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once1-1 v-cloak在使用 Vue 过程中，引入 Vue 文件创建一个实例，当引入的 Vue
2022-05-24 10:15:46
347
原创 页面元素样式绑定
页面元素样式绑定1. 绑定HTML中Class在 Vue 中，操作元素的 class 列表和内联样式是数据绑定的一个常见需求由于 class 与内联样式都是 HTML 元素属性，可以通过 v-bind 指令去处理1-1 对象语法可以将一个对象传给 v-bind:class，用于动态切换 class，class是否存在取决于定义的数据属性值是否为真可以在对象中传入更多字段来动态切换多个 classv-bind:class 指令也可以与元素自身定义的 class 属性共存<div id
2022-05-24 10:13:24
334
原创 计算属性、监听器和过滤器
计算属性、监听器和过滤器1. 计算属性computed1-1 计算属性计算属性 computed 选项在 options 中定义，计算属性会在当其依赖属性的值发生变化时，属性的值会自动更新，与之相关的 DOM 元素也会同步更新依赖属性的值指的是 data 中定义的数据计算属性本质是一个方法，只不过在使用计算属性时，把计算属性的名称直接作为属性来使用，并不会把计算属性作为一个方法去调用{ [key: string]: Function | { get: Function, set: Functio
2022-05-24 10:12:46
241
原创 实例与模版语法
vue实例与模版语法1. Vue实例1-1 创建实例可以通过使用 Vue 函数 new 关键字实例化创建一个新的 Vue 实例一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例以及可选的、嵌套的、可复用的组件树组成const vm = new Vue({ // options选项})1-2 options选项当创建一个 Vue 实例时，你可以传入一个 options 选项对象el —— 用于指定一个页面中已经存在的 DOM 元素来挂在 Vue 实例，可以是 H
2022-05-24 10:12:00
156
原创 Vue 起步
Vue 起步1. Vue简介1-1 什么是Vue?Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动Vue 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架Vue 所关注的核
2022-05-24 10:10:41
201
原创 拖放与地理定位
拖放与地理定位1. HTML5拖放1-1 了解拖放HTML5 提供了 Drag and Drop API，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素，拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针让一个元素被拖拽需要添加 draggable 属性true —— 元素可以被拖动false —— 元素不可以被拖动auto —— 默认值，浏览器定义的默认行为<div class="main"&
2022-05-11 11:58:54
724
原创 防抖与节流
防抖与节流防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除1. 防抖函数防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间<input type="text"><script> // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒
2022-05-04 17:05:03
2712
原创 Event Loop
Event Loop1. 定时器setTimeout 允许我们将函数推迟到一段时间间隔之后再执行setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数定时器 setTimeout/setinterval 中的 this 都指向 window1-1 setTimeoutsetTimeout(func|code, delay, arg1, arg2, ...)在指定毫秒数后执行代码或者函数dunc|code 想要执行的函数或代码d
2022-05-04 10:25:32
305
原创 Class类与继承
Class类与继承1. Class基础语法1-1 定义类ES6 引入了 Class 类构造方式，作为对象的模板，通过class关键字，可以定义类ES6 的 class 是一个语法糖，新的 class 写法只是让对象原型的写法与继承更加清晰简洁**Tips：**类方法与方法之间不需要逗号分隔定义类的一种方法是使用类声明，通过 class 关键字定义类类表达式是定义类的另一种方法，类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称，仅在类内部可见// 第一种方式 通过clas
2022-04-28 12:25:15
311
原创 Iterator 迭代器
Iterator 迭代器1. 迭代器1-1 迭代器概念Javascript 四种集合数据结构：Array、Object、Map、Set迭代器它是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署 Iterator 接口，就可以完成遍历操作为各种数据结构，提供一个统一的、简便的访问接口使数据结构的成员能够按某种次序排列Iterator 接口主要供 for...of 消费1-2 迭代器原理创建一个指针对象，指向当前数据结构的起始位置，也就是说，遍历器对象本质上，就是
2022-04-25 15:05:49
209
原创 Reflect 映射
Reflect 映射1. Reflect 映射Reflect对象与 Proxy 对象一样，也是 ES6 为了操作对象而提供的新 APIReflect 是一个内置的对象，而不是一个函数对象，因此它是不可构造的Reflect 作用：优化 Object 的一些操作方法以及合理的返回 Object 操作返回的结果Proxy 在拦截访问目标对象，或者对代理对象操作都是通过 Reflect 映射来完成let obj = { name: 'jsx'};// 获取对象属性console.log(
2022-04-25 09:00:08
575
原创 Proxy 代理
Proxy 代理1. Proxy 代理创建Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例，Proxy对象需要传入两个参数target —— 被代理的目标对象，可以是任何东西，包括函数handler —— 代理配置，带有捕捉器即拦截操作的方法的对象，内部可以定义零个或多个代理函数let proxy = new Proxy(target, handler)如果 handler 没有设置拦截，所有对
2022-04-25 08:59:33
3850
原创 ES6 箭头函数
箭头函数1. 箭头函数语法箭头函数是 ES6 新增的特性， 通过使用 => 定义函数的新语法箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super 或 new.target箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数arg1, arg2, ..argN 函数参数expression 函数返回值let func = (arg1, arg2, ..., argN) => expression;let func =
2022-04-22 15:46:28
380
原创 Map 和 WeakMap
Map 和 WeakMap1. Map 创建Map 是一个键值对的数据项的集合，就像一个 Object 一样，但是它们最大的差别是 Map 允许任何类型的键 key 或者值 value由于对象只接受字符串或者 Symbol 作为键，ES6 提供了 Map 数据结构，字符串，各种类型的值包括对象都可以当作键或者值具有 Iterator 接口、且每个元素都是一个双元素的数组的数据结构都可以当作Map构造函数的参数// Map()构造函数参数必须是可迭代对象let map = new Map([['n
2022-04-22 13:10:33
1522
原创 Set 和 WeakSet
Set 和 WeakSet1. Set 创建Set 是一个特殊的类型集合 —— 值的集合没有键，它的每一个值只能出现一次new Set(iterable) 可以接受一个数组或者具有 iterable 接口的其他数据结构作为参数，用来初始化// 声明let set = new Set();// 提供数组对象，则会复制数组元素以并去重let set = new Set([1, 2, 5, 5, 5])console.log(set); // Set(3) {1, 2, 5}// 去除字符串
2022-04-21 16:08:32
890
原创 Symbol 类型
Symbol 类型1. Symbol 声明根据规范，对象的属性键只能是字符串类型或者 Symbol 类型Symbol 是一种基本数据类型，Symbol()函数会返回 symbol 类型的值，Symbol 值是唯一的标识符，不会与其他属性名产生冲突Tips：Symbol 函数前不能使用 new 命令，会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象类型let symbol1 = Symbol();let symbol2 = Symbol();console.log(symb
2022-04-21 13:03:14
1366
原创 ES6 的扩展运算符
扩展语法1. 函数 rest 参数ES6 引入 rest 参数也叫剩余参数，用于获取函数的多余参数，可以替代使用arguments对象... 出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中rest 参数组成的变量是一个数组，该变量将多余的参数放入数组中函数的length属性，不包括 rest 参数function restFn(...arg) { console.log(arg);}restFn(1, true, {name: '
2022-04-20 21:28:16
4073
2
原创 ES6 的解构赋值
解构赋值解构赋值语法是一种 Javascript 表达式，通过解构赋值可以将属性值从对象/数组中取出赋值给其他变量ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构1. 基本数据类型解构1-1 字符串解构赋值字符串也可以解构赋值，字符串会被转换成了一个类似数组的对象类似数组的对象都有一个length 属性，因此还可以对这个属性解构赋值// 会将字符串转换成一个类数组对象let [a, b, c, d ,e] = 'hello';console.log(a, b,
2022-04-20 15:42:43
591
原创 模版字符串
模版字符串1. 模版字符串基础1-1 简介ES6 引入了模板字符串，模版字符串用反引号（`）标识它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量let name = `jsx`;console.log(${name})1-2 转义在模板字符串中需要使用反引号，则前面要用反斜杠转义 \let greeting = `\``; // `1-3 多行使用模板字符串表示多行字符串，所有的空格和缩进都会被保留let message = ` jsx
2022-04-20 15:41:50
352
原创 模版字符串
模版字符串1. 模版字符串基础1-1 简介ES6 引入了模板字符串，模版字符串用反引号（`）标识它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量let name = `jsx`;console.log(${name})1-2 转义在模板字符串中需要使用反引号，则前面要用反斜杠转义 \let greeting = `\``; // `1-3 多行使用模板字符串表示多行字符串，所有的空格和缩进都会被保留let message = ` jsx
2022-04-19 20:45:55
2036
原创 ES6 的 let 和 const
let、const1. let 关键字let 关键字拥有块级作用域let 关键字不会存在变量提升暂时性死区：let 关键字声明时会存在暂时性死区let 关键字不允许重复声明// let 关键字拥有块级作用域{ let str = 'jsx'; var num = 123; // 在同一作用域下可以访问 console.log(str)}console.log(str); // 访问不到strconsole.log(num);// 不存在变量提升console.log(s
2022-04-19 19:38:19
168
原创 严格模式差异
严格模式1. use strictuse strict 是一种 ECMAscript5 添加的（严格）运行模式，这种模式使得 Javascript 在更严格的条件下运行。严格模式的实现使您的程序或函数遵循严格的操作环境严格模式对正常的JavaScript语义做了一些更改：消除了 JavaScript 语法的一些不合理，不严谨之处，减少了一些怪异行为消除了代码运行的一些不安全之处，保证代码运行的安全提高编译器的效率，增加运行速度禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，
2022-04-19 17:25:36
137
原创 页面声明周期
页面声明周期1. DOMContentLoaded 事件DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成DOMContentLoaded 事件发生在 document 对象上，必须使用 addEventListener 来捕获具有 async 特性（attribute）的脚本不会阻塞 DOMContentLoaded使用 document.createElement('script')
2022-04-19 14:55:07
303
原创 UI 事件与表单事件
UI 事件与表单事件1. 鼠标事件1-1 事件类型针对鼠标操作的行为有多种事件类型：mousedown/mouseup —— 在元素上点击/释放鼠标按钮mouseover/mouseout —— 鼠标指针从一个元素上移入/移出mousemove —— 鼠标在元素上的每个移动都会触发此事件click —— 如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件dblclick —— 在短时间内双击同一元素后触发。如今已经很少使用了conte
2022-04-19 10:49:02
379
原创 搞懂事件基础
事件1. 事件基础1-1 什么是事件？在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，比如用户的单击行为、表单内容的改变行为即为事件，我们可以为不同的事件定义处理程序。JS 使用异步事件驱动的形式管理事件事件类型：JS 为不同的事件定义的类型，也可以称为事件名称，有鼠标，指针，键盘，表单，用于界面，用户界面等事件类型事件目标：事件目标指产生事件的对象，比如 a 标签被点击那么 a 标签就是事件目标。元素是可以嵌套的，所以在进行一次点击行为时可能会触发多个事件目标事件处
2022-04-18 10:44:48
314
原创 BOM 浏览器对象模型
BOM 浏览器对象模型浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象window 浏览器实例location 加载文档的信息和常用导航功能实例navigator 客户端标识和信息的对象实例history 当前窗口建立以来的导航历史记录screen 客户端窗口及屏幕信息1. window 对象window 对象是 BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的
2022-04-15 13:56:30
376
原创 空间坐标详解
空间坐标1. 视口与文档尺寸1-1 浏览器可视区域网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸视口尺寸不包括浏览器工具条、菜单、标签、状态栏等当你打开控制台后，视口尺寸就相应变小了position 使用文档定位，fixed 使用视口定位文档坐标在页面滚动时不发生改变，视口坐标的操作需要考虑滚动条的位置1-2 浏览器视口尺寸获取文档（document）可视区域不包括滚动部分在内的宽度和高度document.documentElement.client
2022-04-14 17:38:58
1133
原创 节点和元素属性样式
节点和元素属性样式1. 创建节点1-1 creatTextNodedocument.createTextNode(data)创建一个新的文本节点，data 是一个字符串为文本节点的内容<div class="container"></div><script> // creattextNode 文本节点 let elem = document.querySelector('.container'); let text = documen
2022-04-13 20:17:51
1342
1
原创 Object 对象方法
Object 对象方法1. 对象原始转换对象中不存在布尔转换，只有字符串和数值转换数值转换发生在对象相减或应用数学函数时字符串转换通常发生在 alert() 输出时为了进行转换，JavaScript 尝试查找并调用三个对象方法：obj[Symbol.toPrimitive](hint)obj.toString()obj.valueOf()1-1 Symbol.toPrimitiveSymbol.toPrimitive 的内建 symbol，它被用来给转换方法命名如果 S
2022-04-13 16:04:22
435
原创 DOM 文档对象模型
DOM 文档对象模型1. Web API 的概念api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能js 组成：ECMAScript、DOM、BOMECMAScript：定义了 JavaScript 的语法规范BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象DOM：文档对象模型，提供用于处理文档的对象2
2022-04-12 11:56:06
841
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人