薇清时

清时的博客

0%

发表于 分类于 ，

Vue3快速上手

1.Vue3简介

2.Vue3带来了什么

1.性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

    ……

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

    ……

美女

3.拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API（组合API）

    • setup配置
    • ref与reactive
    • watch与watchEffect
    • provide与inject
    • ……

  2. 新的内置组件

    • Fragment
    • Teleport
    • Suspense

  3. 其他改变

    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on 的修饰符
    • ……
阅读全文 »

发表于 分类于 ，

vue2学习上手笔记

脚手架文件结构

├── 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

  1. vue.js与vue.runtime.xxx.js的区别：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx

美女

props配置项

  1. 功能：让组件接收外部传过来的数据

  2. 传递数据：<Demo name="xxx"/>

  3. 接收数据：

    1. 第一种方式（只接收）：props:['name']

    2. 第二种方式（限制类型）：props:{name:String}

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

      1
      2
      3
      4
      5
      6
      7
      props:{
      	name:{
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

阅读全文 »

发表于 更新于 分类于 ，

Angular学习笔记

1-angular环境搭建

1.安装cnpm

1
2
安装cnpm
参考阿里淘宝npm镜像，网址：https://developer.aliyun.com/mirror/NPM?from=tnpm

美女

1.1 npm配置全局下载位置和cache位置：

查看全局下载路径

1
npm config get prefix

配置全局下载路径

1
npm config set prefix "E:\NodeJS_WorkSpace\npm\npm_global"

将全局下载路径设置到PATH环境变量，以便直接使用cnpm、ng等下载下来的命令

查看cache路径

1
npm config get cache

配置cache路径

1
npm config set cache "E:\NodeJS_WorkSpace\npm\npm_cache"

查看全局安装

1
npm ls -g -depth 0

卸载angular

1
npm uninstall -g @angular/cli

查看所有配置

1
npm config list

修改registry

（默认为https://registry.npmjs.org/)

1
npm config set registry https://registry.npm.taobao.org
阅读全文 »

发表于 分类于 ， ， ， ，

序言

vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，对于PC端，移动端，桌面软件（electronjs）等也有广泛的应用。

优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。

饿了么的Mint UI，Element UI。

美团的mpVue。

京东的Nut UI，IView UI。

都是上手非常舒服的好的UI框架。

贼好玩！！！极有成就感！！

区别一下

移动端UI框架：vant ，cube UI ，Mint UI。

pc端UI框架：mpVue ，element UI ，IView UI，nut UI 。

微信小程序UI框架详情可以看本博客之前写的UI框架整理：微信小程序ui组件库

最初接触vue时是使用的elementUI，iview框架，亲自体会之后确实非常易用且强大。

之前有了一段时间的vue项目上手经验，基于vue做过PC端项目，当然以后工作还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目，所以说总结vue的项目经验我觉得是最好的成长，也希望给未来的自己一些阶段性的经验和思考。

总结一些vue使用踩过的一些坑和项目经验，更多的是使用框架（vue/react）过程中的方法论和组件的设计思路，最后还会有一些个人对vue工程化的一些总结。

特别提醒未来的自己：对javascript, css, html基础是要有相当一定的了解，但是，注意啊！！！千万不要钻牛角尖！

因为会用框架不一定能很好的实现业务需求和功能，要想实现不同场景下不同复杂度的需求，所有一定要对web基础有充足的了解。

常用到的技术点(不要本本主义)：

javascript：

  • 数组常用方法的使用，比如遍历有forEach，map，filter，every， some，reduce，操作方法有splice，slice， join，push，shift， pop，sort等
  • 基本数据结构，引用类型（对象，数组）
  • 基本逻辑运算if else， switch，三目运算：？，for/while循环等
  • 字符串常见api（如replace，slice， substr，indexOf）
  • 基本正则使用
  • 变量作用域，作用域链，变量提升，函数声明提升
  • 对象基本用法，面向对象编程

css：

  • 基本盒模型（border/content/padding等）
  • 4种常用定位（static/absolute/relative/fixed）
  • 常用布局方式（浮动布局/弹性布局flex/自适应布局/网格布局grid）
  • css3基本样式与动画（transition，animation）

html：

  • 新标签基本用法和使用
  • head标签作用与用法（主要是meta属性的用法）

1. vue框架使用注意事项和个人最佳体验

vue学习最快的方式就是实践，然后不停地总结开发vue项目中的一些实践经验，才是正确道路，不宜求快，反而极大丧失对前端的兴趣，以至于心不定，容易怀疑自己从而转行，乐趣才是这一行最重要的东西。

沉下去，好好玩与学，还远着呢……..

1.1 谈谈vue生命周期

阅读全文 »

发表于 分类于 ，

MySQL学习笔记

登录和退出MySQL服务器

1
2
3
4
5
# 登录MySQL
$ mysql -u root -p12345612

# 退出MySQL数据库服务器
exit;

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
-- 显示所有数据库
show databases;

-- 创建数据库
CREATE DATABASE test;

-- 切换数据库
use test;

-- 显示数据库中的所有表
show tables;

-- 创建数据表
CREATE TABLE pet (
    name VARCHAR(20),
    owner VARCHAR(20),
    species VARCHAR(20),
    sex CHAR(1),
    birth DATE,
    death DATE
);

-- 查看数据表结构
-- describe pet;
desc pet;

-- 查询表
SELECT * from pet;

-- 插入数据
INSERT INTO pet VALUES ('puffball', 'Diane', 'hamster', 'f', '1990-03-30', NULL);

-- 修改数据
UPDATE pet SET name = 'squirrel' where owner = 'Diane';

-- 删除数据
DELETE FROM pet where name = 'squirrel';

-- 删除表
DROP TABLE myorder;
阅读全文 »

发表于 更新于 分类于 ，

书写和使用Hexo

在利用 Hexo 框架搭建一个属于我们自己的博客网站后，下面我们就来谈谈怎样书写和使用Hexo

Hexo + GitHub Pages搭建的博客，nexT主题，Windows

一、创建文章

在站点文件夹中打开 git bash，输入如下命令创建文章，其中 title 为文章的标题

  • $ hexo new “title”

当输入命令后，就会在 source/_post 文件夹下创建一个文件，命名为：title.md

这个文件就是将要发布到网站上的原始文件，用于记录文章内容

下面，我们将要在这个文件中写下我们的第一篇博客

二、编写文章（基于 Markdown）

1、Markdown 简介

但是，在我们正式写下第一个文字前，我们需要了解一下究竟什么是 Markdown？

Markdown 是一种可以使用普通文本编辑器编写的 标记语言，通过简单的 标记语法，它可以使普通文本内容具有一定的格式

基于 Markdown 语法的简洁性，它已经成为目前世界上最流行的用于书写博客的语言

2、Markdown 语法

在编写 Markdown 时，博主强烈的推荐给大家一款简洁易用的 Markdown 编辑器 —— Typora

按照官方的说法就是 简单而强大，它不仅支持原生的语法，也支持对应的快捷键，更重要的是它还可以 实时预览

这里附上 Typora 的下载地址：https://www.typora.io/

有兴趣的朋友可以下载来试试

好，下面开始进入正题，介绍一些常用的 Markdown 语法

美女

（1）标题

Markdown 语法：

1
2
3
4
5
6
7
8
9
10
11
- # 一级标题

- ## 二级标题

- ### 三级标题

- #### 四级标题

- ##### 五级标题

- ###### 六级标题

Typora 快捷键：

Ctrl+1：一级标题

Ctrl+2：二级标题

Ctrl+3：三级标题

Ctrl+4：四级标题

Ctrl+5：五级标题

Ctrl+6 ：六级标题

Ctrl+0：段落

（2）粗体、斜体、删除线和下划线

Markdown 语法：

1
2
3
4
*斜体*
**粗体**
***加粗斜体***
~~删除线~~

Typora 快捷键：

Ctrl+I：斜体

Ctrl+B：粗体

Ctrl+U：下划线

Alt+Shift+5：删除线

阅读全文 »

发表于 更新于 分类于

微信小程序UI组件库

微信小程序开发的过程中，不借助UI组件库开发出来的页面，不但要花费我们更多的时间，页面的美观上也有一定差距，毕竟颜狗嘛~。

所以我需要拥有常用的几个UI组件库，个人收藏。

WeUI

WeUI 是微信官方出品的组件库，它沿用了微信的视觉设计与交互设计，提供了各类原生组件的基础样式，风格简约大方。选用这一套组件库，可以让你的小程序与微信本身保持一致的界面风格。

官方组件库能够满足基础的界面需求，但是，如果你想要更加饱满的视觉，更加活泼的动效，恐怕 WeUI 就满足不了你的需要了。

GitHub 地址：https://github.com/Tencent/weui

微信小程序UI组件库

ColorUI 组件库

ColorUI 是由文晓港发布的高颜值组件库，侧重于视觉交互。比起 WeUI 的低调克制，ColorUI 色彩鲜亮，样式繁多。除了拥有非常丰富的原生组件的自定义样式，它还提供一些常见的页面元素，比如时间轴、步骤条、聊天页、模态窗口等等。

ColorUI 给大家提供了高度自定义的组件，一些比较麻烦的样式，开发者只需调用其组件就能得以实现。不过，ColorUI 也不是万能的，比如，它尚未涉及购物类小程序所需的组件。

GitHub 地址：https://github.com/weilanwl/ColorUI

阅读全文 »

发表于 分类于 ，

初始化CSS

建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

初始化css

最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

阅读全文 »

发表于 分类于

TodoList代码-项目模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html lang="en" dir="ltr">

 <head>

    <meta charset="utf-8">

  <title>document</title>

  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">

    <script src="/jQuery/jquery-3.5.1.js"></script>

 </head>

 <body>

  

    <div class="container">

   <input type="text" class="txtb" placeholder="Add a task">

   

      <div class="notcomp">

​    <h3>异常(Not Completed)</h3>

   </div>

   

      <div class="comp">

​    <h3>正常(Completed)</h3>

   </div>

   

  </div>

  

    <script src="ToDolist.js"></script>

 </body>

</html>

阅读全文 »

发表于 分类于

事件冒泡、event.target以及this、function（e）

一、什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

事件冒泡

二、事件冒泡有什么作用

（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阅读全文 »