木灵鱼儿

木灵鱼儿 5年前 vue 开发实战（完结）

如何管理系统中使用的图标

关于图标的方案，现阶段也就三种：雪碧图字符图标svg雪碧图雪碧图就是将多个图标图片合并到一张图里面，前端通过控制图片的大小位置来进行显示。但是也有缺陷，就是图片的清晰度了，如果放大了，就会显的很模糊。字符图标字符图标是目前最成熟的一种方案，使用简单，并且是和字体一样的，放大依旧很清晰。但是他的缺点就是不支持多色图标，也就是一个字符图标，他无法同时显示多种颜色。svgsvg是最近开始兴起的，它是一种组件化封装的方式，将svg代码化，以达到控制的目的，而且相对于字符字体，svg本身有很多优势，比如动画，多色等等因为组件化了，所以我们可以按需引入，虽然字符图标也可以，但是那种是需要平台的支持，...

4403 0 0

svg vue 图标

vue项目里使用Object.assign的一个小技巧

木灵鱼儿 5年前 vue 开发实战（完结）

vue项目里使用Object.assign的一个小技巧

当我们请求一个api的时候，他返回的数据可能会有很多，这些数据可能需要分别拆分存放在data预设的变量中。这就导致我们可能要写好几个赋值操作this.xxx = xxx; this.xx = xxx; this.xx = xxx;我们可能会重复很多次上面这种操作，是不是有点麻烦。为此，我们可以利用Object.assign来达到我们的偷懒效果Object.assign(this,{xx:xxx},{xxx:xxx});使用这种方式，我们的vue可以检测到动态改变的值，也就是说watch监听是可以触发的。且效果和你写多个this.xxx=xxx是一样的。感觉这个方法妙啊，所以分享出来，当然...

6468 0 1

this vue 浅克隆

moment的diff计算相差几天，结果返回的值差一天的解决办法

木灵鱼儿 5年前 JavaScript

moment的diff计算相差几天，结果返回的值差一天的解决办法

最近有一个地方需要计算过期时间，然后返回天数，但是我用diff计算，得到的结果就是和后端算的相差一天。//后端返回的时间 const endTime = "2021-12-04"; //前端获取当前时间 const startTime = Date.now(); //或者new Date().getTime() //计算结果 const day = moment(endTime).diff(startTime,"days");得到的结果，永远是差一天的结果。比如今天是时间是：2020-12-08 10:46:00，转为时间戳为：160739556...

6413 0 0

时间戳 moment diff

vue 使用jsx

木灵鱼儿 5年前 vue 项目实战

vue 使用jsx

vue 的render语法让人崩溃，太过复杂，于是有了jsx，利用babel的插件，我们可以使用jsx语法。插件可以让我们在使用render的时候，语法更像template模板语法，用起来更容易上手。安装插件jsxnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props安装完毕后我们需要进行配置配置插件找到babel.config.js文件，该文件和package文件同级，没有就自己手动创建一个。内容如下：module.exports = { presets: ['@vue/babel-p...

3981 0 0

vue jsx

axios error对象解构

木灵鱼儿 5年前 vue 项目实战

axios error对象解构

const {response:{status,statusText}} = err;status为状态码statusText为错误信息

4901 0 0

axios error status

使用ECharts

木灵鱼儿 5年前 vue 开发实战（完结）

使用ECharts

目前国内的图表库，除了百度的echarts就是蚂蚁的antv了，蚂蚁的图表样式更好看，相对来说，他的学习成本也很高，echarts已经是一个老牌图表了，有着比较完善的用法和社区。这里就了解下vue里面使用echarts需要注意的一些问题。使用EChartsECharts有提供一个vue版本的插件，也是由百度官方vue团队维护，有兴趣可以看看。vue-echarts我们这里就先不用这个插件了，用npm的方式安装npm install echarts安装完毕后我们就可以import引入<script> import echarts from "echarts&quo...

3269 0 0

vue ECharts 图表

更加精细化的权限设计（权限组件、权限指令）

木灵鱼儿 5年前 vue 开发实战（完结）

更加精细化的权限设计（权限组件、权限指令）

路由的鉴权只能处理大的方面，而更精细度的权限控制，就做不到了，如果我页面有一些按钮是需要有权限才能显示，那么，单路由鉴权根本无法做到。所以我们还需要更加精细化的权限控制。这里有两种权限的控制方式：权限组件权限指令权限组件权限组件可以理解为一个插槽组件，这个组件自身做一个权限判断，如果有权限我们就允许这个插槽内容展示。但是这么一个小小的功能其实也没必要做做一个传统组件，使用函数式组件他的性能会更高，因为用的地方很多，组件本身也没太多东西。既然是鉴权，我们自然需要一个用于判断是否有权限的函数，我们依旧可以使用上一章的check函数auth.js//后端返回权限 function getAut...

3870 0 0

vue 权限组件权限指令

如何使用路由管理用户权限

木灵鱼儿 5年前 vue 开发实战（完结）

如何使用路由管理用户权限

以前弄个一个路由鉴权，其原理就是判断用户是否已经登录，未登录就跳转至登录页。通过给meta设置一个元数据，然后判断这个页面是否有权限，如果访客没有权限，就跳转至登录页。这个用于一般情况完全是足够了，但是当你的网站权限分级的情况，就不太够用了，因为已经不能用单纯的是否已登录来判断，访客时候有权限浏览该页面。多级权限假设我们网站有四个等级：master（站长）、admin（管理员）、user（注册用户）、guest（游客）那么最先，我们给路由设置权限，设置哪些等级可以访问export default [ { path: "", component: () =&...

4353 0 0

meta vue router

如何将导航菜单与路由结合

木灵鱼儿 5年前 vue 开发实战（完结）

如何将导航菜单与路由结合

路由的数组，他也是层级的关系，而我们的导航菜单与路由数组一样，也是一个层级关系，并且大部分内容都是对应的，一个路由页对应一个菜单按钮。所以，其实我们可以直接将路由数组，作为我们的导航菜单的数据，我们对他进行遍历。针对性隐藏父级但是不一定每个路由都要显示在菜单栏上，所以我们可以给路由数组的对象，增加一个key值用于判断，这个路由对象是否需要出现在导航栏上，如：export default [{ path: "/admin", component: () => import ("@/views/adm...

4397 0 0

vue 路由导航菜单

实现一个动态改变的页面布局

木灵鱼儿 5年前 vue 开发实战（完结）

实现一个动态改变的页面布局

如果要实现这个功能，我们就需要去写一个layout布局的文件，然后通过一个动态的设置去响应这个变化。这个问题其实可以分两个方面去解析：布局文件怎么去做怎么去响应设置布局文件对于写一个布局文件，其实也不是很难，但是就是不要钻牛角尖，就好比，你可能会去想，一个侧边栏导航要怎么变成顶栏的横向导航？其实这种想法太过于钻牛角尖，为什么我们不能做两个导航呢？侧边栏sidebar我们使用一个导航，header里面我们也放一个导航，然后v-if判断不就好了。没必要想那么复杂，很多东西就是组件化，响应式数据进行显示。而且很多框架都预设了一些布局，我们可以利用那些布局，然后针对性的操作，大部分框架对这个些布...

6603 0 2

vue 布局动态

vue cli 创建全局过滤器

木灵鱼儿 5年前 vue 项目实战

vue cli 创建全局过滤器

最近遇到一个需求，希望在无内容的情况下能用--来表示无内容占位。所以，想来想去，用过滤器最好，然后既然是通用性，那么直接全局就行了。创建过滤器我们可以创建一个js文件，然后export导出，再到main文件里面导入并激活。创建一个名为globalFilters.js的过滤器文件，这个文件一般放在utils文件夹中，当然你也可以随意，只要能正确引入就行。// 全局过滤器 // 无内容占位符 const placeholder = (value) => { if (!value) return "--"; return value; }; export ...

3359 0 0

过滤器 filter vue

如何设计一个高扩展性的路由

木灵鱼儿 5年前 vue 开发实战（完结）

如何设计一个高扩展性的路由

vue-router本身提供了很多扩展性的东西，这里将一些常用的使用方案分享出来。默认子路由基本写法export default [ { path: "/admin", component: () => import("@/views/admin"), meta: { title: "管理" }, children: [ { path: "", name: "Admin", component: () => import(&quo...

3724 0 0

vue router

原生js 滚动条返回顶部动画函数

木灵鱼儿 5年前 JavaScript

原生js 滚动条返回顶部动画函数

直接把饿了么的返回顶部动画提取出来了，直接上代码//返回顶部函数 const cubic = (value) => Math.pow(value, 3); const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2; const el = document.documentElement; export const goScroll = function() { const beginTime = Date.n...

3536 0 0

javascript 返回顶部原生js

vuex核心概念和底层原理

木灵鱼儿 5年前 vue 开发实战（完结）

vuex核心概念和底层原理

vuex作为一个共享的数据对象，用于不同组件的共用一个数据，并且动态响应数据变化，配合computed属性，可以对数据进行缓存。在vuex里面，在异步处理actions上，最终也还是要用到commit同步操作方法操作数据，并不是actions方法本身处理了数据，原因是因为需要有操作记录，方便在插件上查看。废话不多说，直接上底层原理。原理vuex其实就是一个重新封装的new Vue 对象，他的动态响应数据就是data属性，而commit这些方法，都只是回调而已。import Vue from "vue"; const Store = function(options ...

5225 3 0

vue vuex defineProperties

常用的正则

木灵鱼儿 5年前 JavaScript

常用的正则

包含数字、字符、特殊字符，6-16位/(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9])[\S]{6,16}$/提示信息：密码为6-16位，必须包含数字和字母和至少一个特殊字符!@-_=<>#*%+&^$

3209 0 0

javascript 正则 regexp

template和jsx

木灵鱼儿 5年前 vue 开发实战（完结）

template和jsx

templatetemplate是html的扩展语法，数据绑定使用Mustache语法（双大括号）<span>{{message}}</span>所以template容易上手，入门极简，大量内置指令，拥有组件作用域css，但是因为简单，所以灵活性不高。jsxjsx是JavaScript的语法扩展，数据绑定使用单引号。<span>{message}</span>jsx相对于template，jsx更灵活，但是也不一定要完全抛弃template。jsx为什么灵活，原因就是他不是html模板，所以jsx中的标签，他可以是变量，我们改变这个变量，这...

4198 0 0

vue template jsx

跨层级获取组件实例

木灵鱼儿 5年前 vue 开发实战（完结）

跨层级获取组件实例

refref是vue预设的一个属性，通过$refs我们可以获取dom或者组件实例。<p ref="p">获取到dom</p> <child-component ref="child">获取到一个组件实例</child-component>通过this.$refs.p我们获取到的是html元素p的dom通过this.$refs.child获取的是组件child-component的实例。但是this只能获取到当前组件上下文的实例或者dom，但是如果我们跨层级获取，那就有点麻烦了。ref只能获取当前组件...

4475 0 0

vue provide inject

provide inject 跨组件传参 + 响应式数据

木灵鱼儿 5年前 vue 开发实战（完结）

provide inject 跨组件传参 + 响应式数据

父组件与子组件的传参，使用的是props，如果是父组件与孙子组件传参，大部分可能会采用递归的方式，也就是子组件props接收，然后再props传给孙子组件。或者使用vuex。但如果是迭代的方式，组件的层级越深，不断迭代的props会是代码越来越无法维护，冗余。于是官方出了provide inject。provide有父组件设置，inject由子组件接收，他们的特性：祖先组件不需要知道哪些后代组件使用它提供的属性后代组件不需要知道被注入的属性来自哪里例子：父组件<script> export default { provide: { foo: 'bar�...

5178 0 0

vue provide inject

vue cli 指定打包输出的路径

木灵鱼儿 5年前 vue 项目实战

vue cli 指定打包输出的路径

因为有这个需求，所以分享出来，省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径，默认是dist，我打包后文件输出到当前目录（vue.config.js相对）下的build目录下的dist文件夹

5956 0 0

vue vue cli 打包

阻止双击选中文本

木灵鱼儿 5年前 JavaScript

阻止双击选中文本

阻止双击选中文本个人有两种实现方式，可以根据实际环境进行操作。使用非文本元素如果我们对一个div元素双击，你会发现，他的文本会被选中，如果不想被选中，只能通过css的方式来进行操作，但是，css一旦设置，就永远不能选中了，也许，我们只是希望在双击时不选择，用户滑动选择时已经可以选中文字。css阻止选中.no-select { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-sel...

5891 0 0

阻止文本选中双击 onselectstart

如何触发组件的更新

木灵鱼儿 5年前 vue 开发实战（完结）

如何触发组件的更新

vue会对data中的值进行处理，如果在template中使用到了，就会对这个值进行setter和getter处理，等于就是添加到了watch一样，当数据发生变化时，就会触发的方对应的getter、setter方法，方法针对性的更新。这个setter和getter的绑定触发，是必须现在data预设好才行，否则vue都运行完毕了再进行添加，是无法响应式更新的。也就是说。vue的响应式更新，他只能监听你一开始就预设好的值，如果你是后面再手动添加的，是无法检测到的，也就无法进行更新。比如：data(){ return { obj:{} } }有一个obj的空对象我们手动给他附加...

3592 0 0

vue 响应式更新监听

虚拟DOM和key

木灵鱼儿 5年前 vue 开发实战（完结）

虚拟DOM和key

vue渲染html时，会生成一个虚拟dom树，被称之为vdom，然后每次数据的更新，旧的dom树和新的dom树进行比对，然后针对性的更新。两个dom树之间的对比，最佳的体验是深层遍历，也就是遍历每个节点，但是这种遍历是非常损耗性能的，所以现在都是浅层遍历。也就是同层对比。两个层级之间进行对比，如果某一项变化了，就要发生改变，这样就会导致，该层级的下一级的元素是重绘的。因为这一层重新弄了，下面的东西自然就要切断，重新生成。而key的作用，就是对这个层级打上标识，如果有了标识，就能够判断是这个元素是不是相同的，相同的，如果只是移动了，那就不用删除重新生成，直接移动即可。如果是相同的元素，位置...

3640 0 0

vue dom 虚拟dom

双向绑定和单向数据流

木灵鱼儿 5年前 vue 开发实战（完结）

双向绑定和单向数据流

双向绑定和单向数据流什么是双向绑定？双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。这就是v-model绑定input元素所做的事情。单向数据流单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。vue的几个概念vue是单向数据流，不是双向绑定vue的双向绑定不过是语法糖Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。v-model做了什么v-model默认限制只能用在：input、select、textarea、components也就是除了表单元素，还有可以用...

4915 0 0

vue v-model 双向绑定

slot 插槽

木灵鱼儿 5年前 vue 开发实战（完结）

slot 插槽

插槽vue 2.6后，插槽变动了，推荐使用最新版写法。创建一个插槽<slot></slot> //默认插槽 <slot name="demo"></slot> //具名插槽使用插槽假设插槽的组件标签为：ddd<ddd> <span>我会被插入默认插槽</span> <template v-slot:demo> <span>我会被插入demo插槽</span> </template> </ddd>2.6的...

4115 0 0

vue slot 插槽

阻止属性默认挂载到组件根元素

木灵鱼儿 5年前 vue 开发实战（完结）

阻止属性默认挂载到组件根元素

vue的组件有一个特性，当我们给组件设置attr属性，而这个属性在组件中并没有props设置的，那么他就会默认挂载到组件的根元素上。例子：<template> <div>我是一个ddd组件</div> </template><template> <ddd class="ddd" /> </template> <script> import ddd from "./ddd"; export default { components:{ ...

3592 0 0

属性 vue 根元素

木灵鱼儿

如何管理系统中使用的图标

vue项目里使用Object.assign的一个小技巧

moment的diff计算相差几天，结果返回的值差一天的解决办法

vue 使用jsx

axios error对象解构

使用ECharts

更加精细化的权限设计（权限组件、权限指令）

如何使用路由管理用户权限

如何将导航菜单与路由结合

实现一个动态改变的页面布局

vue cli 创建全局过滤器

如何设计一个高扩展性的路由

原生js 滚动条返回顶部动画函数

vuex核心概念和底层原理

常用的正则

template和jsx

跨层级获取组件实例

provide inject 跨组件传参 + 响应式数据

vue cli 指定打包输出的路径

阻止双击选中文本

如何触发组件的更新

虚拟DOM和key

双向绑定和单向数据流

slot 插槽

阻止属性默认挂载到组件根元素

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

如何管理系统中使用的图标

vue项目里使用Object.assign的一个小技巧

moment的diff计算相差几天，结果返回的值差一天的解决办法

vue 使用jsx

axios error对象解构

使用ECharts

更加精细化的权限设计（权限组件、权限指令）

如何使用路由管理用户权限

如何将导航菜单与路由结合

实现一个动态改变的页面布局

vue cli 创建全局过滤器

如何设计一个高扩展性的路由

原生js 滚动条返回顶部 动画函数

vuex核心概念和底层原理

常用的正则

template和jsx

跨层级获取组件实例

provide inject 跨组件传参 + 响应式数据

vue cli 指定打包输出的路径

阻止双击选中文本

如何触发组件的更新

虚拟DOM和key

双向绑定和单向数据流

slot 插槽

阻止属性默认挂载到组件根元素

最近评论

博客文章RSS订阅

博客评论RSS订阅

原生js 滚动条返回顶部动画函数