如初的博客🥝

发表于 2024-10-14 | 更新于 2024-10-24

Hexo 安装教程 Hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js 构建。下面是 Hexo 的安装和配置教程。 1. 环境要求在安装 Hexo 之前，请确保您的电脑上已经安装了以下软件： Node.js（版本 12.x 或更高） Git（用于版本控制）您可以通过以下命令检查 Node.js 和 Git 是否已安装： 12node -vgit --version 安装 Node.js 和 Git 如果尚未安装 Node.js 和 Git，请参考以下链接进行安装： Node.js 官方下载 Git 官方下载根据您操作系统的要求下载并安装即可。安装 Hexo 打开终端或命令提示符，运行以下命令安装 Hexo：

Markdown语法与外挂标签写法汇总

发表于 2022-08-09 | 更新于 2022-10-23

🥧本文汇总Markdown格式以及外挂标签在网页端的渲染效果，可作为文档进行查询

00-Vue的介绍和vue-cli

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

MVVM模式 Model：负责数据存储 View：负责页面展示 View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示关于框架为什么要学习流行框架 1、企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；企业中，使用框架，能够提高开发的效率。提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】） 2、在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。 3、增强自己就业时候的竞争力：人无我有，人有我优。你平时不忙的时候，都在干嘛？框架和库的区别框架：框架是一套完整的解决方案。对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显：功能完善、提供了一整套的 ...

00-事件驱动和非阻塞机制

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

异步编程异步操作 Node 采用 Chrome V8 引擎处理 JavaScript 脚本。V8 最大特点就是单线程运行，一次只能运行一个任务。 Node 大量采用异步操作（asynchronous operation），即任务不是马上执行，而是插在任务队列的尾部，等到前面的任务运行完后再执行。提高代码的响应能力。异步IO也叫非阻塞IO。例如读文件，传统的语言，基本都是读取完毕才能进行下一步操作。非阻塞就是Node的callback，不会影响下一步操作，等到文件读取完毕，回调函数自动被执行，而不是在等待。异步操作回调由于系统永远不知道用户什么时候会输入内容，所以代码不能永远停在一个地方。 Node 中的操作方式就是以异步回调的方式解决无状态的问题。回调函数的设计：错误优先异步操作中，无法通过 try catch 捕获异常。这是因为回调函数主要用于异步操作，当回调函数运行时，前期的操作早结束了，错误的执行栈早就不存在了，传统的错误捕捉机制try…catch对于异步操作行不通，所以只能把错误交给回调函数处理。统一约定：回调函数的第一个参数默认接收错误信息 ...

01-02.v-on的事件修饰符

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

v-on的事件修饰符 v-on的常见事件修饰符 v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下： .stop 阻止冒泡。本质是调用 event.stopPropagation()。 .prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。 .capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。 .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。 .once 事件只触发一次。 ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。 ``.native` 监听组件根元素的原生事件。 PS：一个事件，允许同时使用多个事件修饰符。写法示范： 1234567891011121314151617181920 <button v-on:click="doThis"></button& ...

01-03.Vue的系统指令(二)

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

前言文本主要内容： v-model v-model：双向数据绑定（只能用于表单元素）之前的文章里，我们通过v-bind，给<input>标签绑定了data对象里的name属性。当data里的name的值发生改变时，<input>标签里的内容会自动更新。可我现在要做的是：我在<input>标签里修改内容，要求data里的name的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用v-model这个属性。区别： v-bind：只能实现数据的单向绑定，从 M 自动绑定到 V。 v-model：只有v-model才能实现双向数据绑定。注意，v-model 后面不需要跟冒号，注意：v-model 只能运用在表单元素中。常见的表单元素包括：input(radio, text, address, email…) 、select、checkbox 、textarea。代码举例如下： 123456789101112131415161718192021222324252627282930313233343536373839<!D ...

01-06.自定义按键修饰符&自定义指令

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

v-on的按键修饰符 Vue 内置的按键修饰符通俗一点讲，指的是：监听键盘输入的事件。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。如下： Vue内置的按键修饰符： 12345678910.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right1.0.8+版本：支持单字母的按键别名。比如说，keyup指的是：键盘（任何键位）抬起时的监听事件。.enter指的是：按enter键的按键修饰符。我们把这两个结合起来看看。 @keyup.enter举例：按enter键后的监听事件 @keyup.enter="addData"表示：按住enter键后，执行addData()方法。全称是v-on:key.enter="addData"。我们还是拿01-04这篇文章中的列表功能来举例。之前是点击“添加”按钮后，列表中会添加一个item。现在要求：在输入框中按enter键后，也能添加一个item。核心代码如下： 1<input type="text&qu ...

01-05.自定义过滤器：时间格式化举例

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

前言我们接着上一篇文章01-04来讲。过滤器的概念概念：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。 Vue1.X中的系统过滤器 Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。系统过滤器的使用，可以参考参考文档：http://v1-cn.vuejs.org/api/#过滤器 Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。自定义全局过滤器文档地址：http://v1-cn.vuejs.org/guide/custom-filter.html 全局过滤器的基本使用我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称、过滤器函数。 ...

01-Node.js入门

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

Node.js的介绍引擎引擎的特性： JS的内核即引擎。因为引擎有以下特性：（1）转化的作用：汽油柴油等等->动能模板+数据—>页面 js引擎：js 代码—>机器码\字节码（2）移植性。有哪些引擎：备注：Node是用V8引擎去解析 js，此时，我们不用去考虑浏览器的兼容性问题。什么是 Node.js 1、官方解释： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。如上图所示： Node 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器；通过自行开发的 libuv 库，调用操作系统资源。 2、非官方解释： Node.js：是 JavaScript 语言在服务器端的运行环境（平台）。 3、运行环境（平台）的含义：首先，JavaScript 语言通过 Node 在服务 ...

01-CSS属性：字体属性和文本属性

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

本文重要内容 CSS的单位字体属性文本属性定位属性：position、float、overflow等 CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。绝对单位： 1 in=2.54cm=25.4mm=72pt=6pc。各种单位的含义： in：英寸Inches (1 英寸 = 2.54 厘米) cm：厘米Centimeters mm：毫米Millimeters pt：点Points，或者叫英镑 (1点 = 1/72英寸) pc：皮卡Picas (1 皮卡 = 12 点) 相对单位： px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。百分比%这个相对单位要怎么用呢？这里也举个例子：字体属性行高 CSS中，所有的行，都有行高。盒子模型的padding ...

01-04.Vue的举例：列表功能

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

列表功能举例步骤 1：列表功能完整的代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ...

01-HTML5详解

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1（严格的html） 2002 Tableless Web Design（表格布局） 2005 AJAX 2009 HTML5 2014 HTML5 Finalized 2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。 2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。 H5草案的前身是叫：Web Application，最早是由WHATWG这个组织在2004年提出的。 2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。什么是 HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签 ...