2021年04月_gaearon

原创 Vue watch 监听地址栏的变化

watch: { // 监听地址栏变化 $route(to, from) { console.log(to, from) }}

2021-04-30 15:20:33 964 1

原创 Vue 子组件的 created 不能拿到 props 的问题

SPA 应用，所有的数据都需要依靠 ajax 获取，这就导致子组件已经创建了，但是父组件所请求的 ajax 还没有返回，父组件无法传递最新的 props 数据，这就导致子组件不能正常加载。看下我的错误代码：父组件：<template> <singleComments :singleComment="singleComent"></singleComments></template><script>export default { m

2021-04-30 03:53:51 2194 2

原创【JS 设计模式】JS 实现工厂模式

工厂模式，就是将 new 的操作单独的放到一个类中，在创建类时，只需要调用工厂方法就好。这样做的好处是：日后修改某个类名，只需要修改某个类和工厂中的类名即可，不必整个项目中查找。哎，JS 想要实现工厂模式，缺少 Java 所需的接口，所以实现方式也和 Java 有所不同。Java UML 类图：JS UML 类图：害，由于 JS 没有接口的概念，所以将原本的两个 Product 整合成了一个 Product，并且取消了 interface 。JS 代码实现：class Product{

2021-04-23 03:51:34 524

原创【JS 设计模式】JS 实现单例设计模式

单例设计模式就是一个类只能有一个实例，这就需要类的构造方法不能被类外的作用域捕获。JS 是一个弱面向对象形式的语言，对于三大特性的支持不够完善，即使 ES6 也不能很好的支持。先来看看 Java 代码的实现，看不懂也没关系，有大量的注释：public class SingleObject { // 私有的构造函数，外部不可以实例化当前类，这也是 js 不能实现的地方 private SingleObject(){} // 唯一被创建的实例 private static

2021-04-23 03:35:25 422

原创 antd 组件库配置

<h2 id="css-样式按需导入">css 样式按需导入</h2><p>详细配置：<a href="https://3x.ant.design/docs/react/use-with-creat

2021-04-14 08:06:09 404 1

原创【Vue 开发小技巧】给遍历的组件绑定不同的事件回调

首先说明，如果不是特别紧急的情况下还是不要使用这种方法，这种方法可读性不是太好。场景如下：通过 v-for 遍历出来的组件中，每个组件会触发不同的事件回调。但是只能绑定相同的事件回调，可以利用遍历的索引值来触发不同的回调，看代码：<van-cell @click="emitEvent(index)" class="listItem" v-for="(item, index) in lis

2021-04-13 16:31:21 572 2

原创【Vue 开发小技巧】给组件路径配置别名

前几天在 GitHub 参考一位阿里大佬的项目源码，大佬的写法令我眼花缭乱，代码写得简直太 6 了。其中一种写法让我大呼牛逼~。来看看：这个 @ 是个什么操作？我发现它的 @ 指向的是 src 目录，我傻傻的尝试了一下，果不其然，报错了……在网上搜啊搜，它是通过改写 vue.config.js 文件实现的。但是网络上给出的答案有些老旧了。阿里大佬的写法：const path = require('path')const resolve = (dir) => path.join(__dirn

2021-04-12 22:46:32 317

原创 postcss适配移动端

<h2 id="下载所需库">下载所需库</h2><pre><code class="language-text">"less-loader": "7.0.1&quot

2021-04-09 23:31:26 789

原创 React路由我把它拿捏的死死的

<p>文档地址：<a href="https://react-router.docschina.org/">React Router: Declarative Routing for React.js

2021-04-09 01:38:18 603

原创 vant 使用 font-class 方式引入第三方图标

阿里图标库：https://www.iconfont.cn/选择需要的图标，添加至购物车，一定要点击下载代码，否则无法生成所需要的css等文件，解压至assets目录下，将其中的iconfont.css文件引入项目中。然后打开解压目录中的 demo_index.html 文件，图标的名称有三个选项点击 font-class ，上图中框出的就是 icon 的 name 属性，如果想要引入微信图标：<van-icon class="iconfont" class-prefix="icon"

2021-04-01 14:41:27 1187

缚己