跳至主要內容
Normal No More!

Normal No More!

Welcome to zjw's Blog

使用Vue3时应避免的10个错误

Vue 3 已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到 Vue 3。我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免。

使用 Reactive 声明原始值


数据声明在过去都是非常直接的,但是现在有很多帮助函数供我们使用。目前的规则是:

  • 使用reactive声明Object, Array, Map, Set
  • 使用ref声明String, Number, Boolean

XXXWeii...大约 5 分钟VueVue
19个提高工作效率的JavaScript单行代码

1.# 生成随机字符串


当我们需要一个唯一 id 时,通过Math.random创建一个随机字符串简直不要太方便噢!!!

const randomString = () => Math.random().toString(36).slice(2);
randomString(); // gi1qtdego0b
randomString(); // f3qixv40mot
randomString(); // eeelv1pm3ja

XXXWeii...大约 2 分钟JavaScriptJavaScript
能不能写出这 40 个单行代码, 直接体现一个人的基础水平!!!

哈喽,大家好 我是XXXWeii👨🏻‍💻。今天给大家分享 40+ javascript比较好用且实用的一行代码, 让你不再 996.

数组


生成数组

当你需要要生成一个 0-99 的数组 方案 1

const createArr = (n) => Array.from(new Array(n), (v, i) => i);
const arr = createArr(100); // 0 - 99 数组

XXXWeii...大约 6 分钟JavaScriptJavaScript
Nginx常用的基础配置(web前端相关方面)

基础配置


user                            root;
worker_processes                1;

events {
  worker_connections            10240;
}

http {
  log_format                    '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' '"$http_referer" "$http_user_agent"';
  include                       mime.types;
  default_type                  application/octet-stream;
  sendfile                      on;
  #autoindex                    on;
  #autoindex_exact_size         off;
  autoindex_localtime           on;
  keepalive_timeout             65;
  gzip                          on;
  gzip_disable                  "msie6";
  gzip_min_length               100;
  gzip_buffers                  4 16k;
  gzip_comp_level               1;
  gzip_types                  text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_types                    "*";
  gzip_vary                     off;
  server_tokens                 off;
  client_max_body_size          200m;

  server {
    listen                      80 default_server;
    server_name                 _;
    return                      403 /www/403/index.html;
  }

  include                       ../serve/*.conf;
}

XXXWeii...大约 2 分钟NginxNginx
一份不错的Vue前端代码风格指南

一、命名规范


市面上常用的命名规范:

  • camelCase(小驼峰式命名法 —— 首字母小写)
  • PascalCase(大驼峰式命名法 —— 首字母大写)
  • kebab-case(短横线连接式)
  • Snake(下划线连接式)

1.1 项目文件命名

1.1.1 项目名

全部采用小写方式, 以短横线分隔。例:my-project-name


XXXWeii...大约 22 分钟VueVue
超酷的HTML5 3D旋转相册动画

今天来教大家实现一个非常炫酷但又比较实用的 HTML5 3D 相册轮播动画。该相册动画有以下几个特点:

  • 相册中的图片围成一个立体圆,并且沿着顺时针方向不停地循环转动。
  • 每一张图片都有一个倒影的效果,更好地为相册呈现了 3D 视觉效果。
  • 你也可以拖拽鼠标,实现相册的 360 度全景查看。
  • 不仅支持图片,而且还支持 mp4 视频。
  • 支持背景音乐播放。

先来看看最终效果吧!

效果预览



XXXWeii...大约 3 分钟HTMLHTML
Vue中动态引入图片为什么要是require,你不知道的那些事

相信用过 vue 的小伙伴,肯定被面试官问过这样一个问题:在 vue 中动态的引入图片为什么要使用 require?

有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加 src 被当做静态资源处理了,没有进行编译,所以要加上 require, 我倒着都能背出来......

emmm... 乍一看好像说的很有道理啊,但是仔细一看,这句话说的到底是个啥?针对上面的回答,我不禁有如下几个疑问:

  1. 什么是静态资源?
  2. 为什么动态添加的 src 会被当做的静态的资源?
  3. 没有进行编译,是指为是什么没有被编译?
  4. 加上 require 为什么能正确的引入资源,是因为加上 require 就能编译了?

XXXWeii...大约 13 分钟VueVue
2
3
4
5
6