X可乐-CSDN博客

Node.js 全栈基础1. Node.js 光速入门1.1 Node.js 概述Node.js 是什么Node.js 不是一门编程语言，它是一个执行 JavaScript 代码的工具。工具是指可以安装在计算机操作系统之上的软件。为什么浏览器和 Node.js 都可以运行 JavaScript因为浏览器和 Node.js 都内置了 JavaScript V8 Engine。它可以将 JavaScript 代码编译为计算机能够识别的机器码。3. 浏览器中运行的 JavaScrip

2021-05-24 21:03:59 34154 65

原创 2021 不会还有人不会uniapp吧[狗头]

UniAPP 快速入门学习一、UniAPP 介绍（1）什么是 UniAPP ？uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。（2）为什么要选择 UniAPP ？开发者/案例数量更多几十万应用、uni 统计月活12亿、70+ 微信 / QQ群平台能力不受限在跨端的同时，

2021-05-24 21:01:47 1637

原创了解与学习 Next.js

Next.js 介绍Next.js 是 React 服务端渲染应用框架，用于构建 SEO 友好的 SPA 应用支持两种预渲染方式，静态生成和服务器端渲染基于页面的路由系统，路由零配置自动代码拆分，优化页面加载速度支持静态到处，可将应用导出为静态网站内置 CSS-in-JS 库 styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境 Vercel，也可以部署在其他环境创建 Next.js 项目创建： npm init next-app 项

2021-05-09 14:49:54 323

原创从0到1教你学会 react

文章目录React 是什么组件是什么组件开发的优势React 开发环境搭建基于 webpack 搭建基于脚手架工具搭建JSX 语法React 是什么React 是 facebook 推出的用于构建用户界面的前端 JS 框架https://reactjs.org/React 使用组件构建用户界面组件是什么一块区域，包含了 html css 以及 js组件开发的优势将一个庞大复杂的应用程序拆分成多个独立单元组件之间互相独立，有利于应用程序的维护组件可以重用，一次编写多地复用R

2021-04-11 16:29:48 334

原创 Virtual DOM（虚拟 DOM）

什么是 Virtual DOMVirtual DOM（虚拟 DOM）是由普通的 JS 对象来描述 DOM 对象真实 DOM 成员let element = document.querySelector('#app')let s = ''for (var key in element) { s += key + ','}console.log(s)使用 Virtual DOM 来描述真实 DOM{ sel: 'div', data: {}, children

2021-04-05 23:36:27 444

原创观察者模式与发布-订阅模式

相关设计模式设计模式（design pattern）是针对软件设计中普遍存在的各种问题所提出的解决方案观察者模式发布-订阅模式观察者模式观察者模式（Observer pattern）指的是在对象间定义一个一对多（被观察者与多个观察者）的关联，当一个对象改变了状态，所有其他相关的对象会被通知并且自动刷新核心概念：观察者 Observer被观察者（观察目标）Subject在实际生活中，我在办公室内坐着，我们几位同事在看着我的水杯，这时，我和我的同事属于观察者，我的水杯属

2021-04-05 12:45:42 195

原创 Vue2/Vue3 响应式原理

Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现Vue 3.x 响应式基于 ES6 的 Proxy 实现Vue 2 响应式原理Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现设置 data 后，遍历所有属性，转换为 Getter、Setter，从而在数据变化时进行试图更新等操作基础效果var obj = { name: 'GD',.

2021-04-05 12:21:00 205

原创 Vue.js 响应式原理

文章目录整体分析Vue 类Observer 类Dep 类Watcher 类Compiler 类功能总结整体分析Vue目标：将 data 数据注入到 Vue 实例，便于方法内操作Observer（发布者）目标：数据劫持，监听数据变化，并在变化时通知 DepDep（消息中心）目标：存储订阅者以及管理消息的发送Watcher（订阅者）目标：订阅数据变化，进行试图更新Compiler目标：解析模板中的指令与插值表达式，并替换成相应的数据Vue 类功能

2021-04-05 12:08:19 220

原创纯CSS修改select的下拉箭头与默认滚动条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改下拉菜单右边默认的小三角及滚动条</title> <style> /*滚动条宽

2021-03-30 18:37:51 916

原创关于Vue.js组件巨详细的一篇文章

文章目录Vue.js 组件全局注册组件基础组件命名规则template 选项data 选项局部注册组件通信父组件向子组件传值props 命名规则单项数据流props 类型props 验证非 props 属性子组件向父组件传值自定义事件传值组件与 v-model非父子组件传值兄弟组件传值EventBus其他通信方式$root$refs组件插槽单个插槽具名插槽作用域插槽动态组件keep-alive 组件过渡组件transition 组件transition 组件的相关属性自定义过渡类名transition-gr

2021-01-26 18:01:40 345

原创手写一个递归循环创建目录（内含详细注释）

var fs = require('fs');var path = require('path');// 递归创建目录function myMkdirSync(dirname) { // 判断当前目录是否创建，第一次进来，肯定是没创建的，如果创建了，就不创建了 if (fs.existsSync(dirname)) { return true; } else { // 如果父级目录已经创建，然后才能创建子级目录 /* 假设参数为 a/b/c 那

2021-01-25 23:53:33 567

原创 Vue.js中的进阶语法

自定义指令指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置自定义全局指令指的是可以被任意 Vue 实例或组件使用的指令<div id="app"> <input type="text" v-focus></div><script> Vue.dire

2021-01-21 17:18:41 168

原创 Vue中事件与表单处理

事件处理用于进行元素的事件绑定<div id="app"> <p> {{ content }} </p> <button v-on:click="content='新内容'">按钮</button></div><script> var vm = new Vue({ el: "#a

2021-01-20 14:46:35 219

原创盘点Vue基础指令

Vue.js 指令本质上就是 HTML 自定义属性Vue.js 的指令就是以 v- 开头的自定义属性内容处理v-once 指令使元素内部的插值表达式只生效一次<div id="app"> <p>此内容会自动更改：{{ content }}</p> <p v-once>此内容不会随数据变化自动更改：{{ content }}</p></div><!-- ======================

2021-01-19 16:34:45 182

原创初学Vue.js必读文章

Vue.js 简介传统网页开发步骤请求数据生成结构监听变化元素变化发送请求更新结构传统网页开发弊端DOM 操作频繁，代码繁杂DOM 操作与逻辑代码混合，可维护性差不同功能区域书写在一起，可维护性低模块之间的依赖关系复杂Vue.js 是什么前端流行框架Vue.js 核心特性数据驱动视图组件化开发数据驱动视图数据变化会自动更新到对于元素中，无需手动操作 DOM，这种行为称做单向数据绑定对于输入框等可输入元素，可设置双向数据绑定双向数据绑定是在数据绑定

2021-01-18 20:22:45 178

原创详解webpack打包

模块化打包工具的由来ES Modules存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化毋庸置疑，模块化是必要的解决问题将es6等新功能变成es5等浏览器能识别的语言将很多个模块打包成一个bundle.js(在开发模式下用模块化开发在生产模式下打包成一个bundle.js文件)模块化打包工具概述webpack 模块化打包工具模块加载器(Loader)代码拆分(Code splitting)资源模块(Asset Module)上面的到爆工具

2021-01-15 00:50:04 182

原创帮你学会webpack

内容偏长，建议先码后看webpack入口起点(entry points)单个入口（简写）语法对象语法常见场景分离应用程序(app) 和第三方库(vendor) 入口多页面应用程序输出(output)用法(Usage)多个入口起点模式(mode)用法loder使用 loader配置[Configuration]内联CLIloader 特性插件(plugins)剖析用法配置Node API开发工具使用 watch mode(观察模式)使用 webpack-dev-server安装使用 webpack-dev

2021-01-14 18:55:20 1598

原创 vscode全部折叠快捷键失效原因

2021-01-14 00:52:38 1658

原创 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。所在位置行:1 字符: 1+ webpack+ ~~~~~~~ + CategoryInfo : ObjectNotFound: (webpack:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandN

2021-01-14 00:28:18 969

原创关于前端模块化开发你不可不知的那些事

ES Module 基本特性ESM 自动采用严格模式，忽略 ‘use strict’每个 ES Module 都是运行在单独的私有作用域中ESM 是通过 CORS 的方式请求外部 JS 模块的ESM 的 script 标签会延迟执行脚本(浏览器页面渲染后执行)export在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时

2021-01-13 23:48:48 156

原创在终端输入 npm run dev 时报错 npm ERR! code ELIFECYCLE

npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! code@1.0.0 script: `babel js -d scripts`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the code@1.0.0 script script.npm ERR! This is probably not a problem with npm. There is likely additional loggin

2021-01-11 00:30:12 1262 1

原创从Yeoman开始学习前端工程化工具

脚手架工具前端工程化的发起者脚手架的作用创建项目基础结构、提供项目规范和约定脚手架的分类通用脚手架yeoman专用脚手架create-react-appvue-cliangular-cliYeomanThe web’s scaffolding tool for modern webappsYeoman 的基本概念Yeoman 是一款脚手架工具可以帮助开发人员创建项目的基础结构代码yo 是 Yeoman 的命令行管理工具可以再命令行运行 ye

2021-01-10 23:00:51 154

原创 Node.js入门必看

内容偏多，建议先码后看什么是 Node.js浏览器的组成浏览器内核的组成主流浏览器内核JavaScript 运行环境软件架构Node.js 能做什么JS 的作用Node.js APIs使用 Node.jsNode.js 的全局对象Node.js 下的全局对象是 globalNode.js 的全局函数Node.js 模块Node.js 模块的划分方式Web 端与 Node.js 端的类比核心模块 —— console核心模块 —— process核心模块 —— path核心模块 —— fs写文件_清空写入写

2021-01-10 22:06:00 121

空空如也

空空如也