随笔分类 -  VUE

使用 concurrently 并行地运行多个命令（同时跑前端和后端的服务）
摘要：前端是用 vue写的，后端是用 Nodejs，前后端各自有自己的启动命令，要实现一键多行，需要用到concurrently 根目录下运行 cnpm i concurrently --save 前端添加配置 后端添加配置 阅读全文
posted @ 2020-04-18 20:20 终南墨客 阅读(473) 评论(0) 推荐(0)
圆形进度条
摘要：子组件 <template> <!-- 环形进度条 --> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://ww 阅读全文
posted @ 2020-04-14 20:25 终南墨客 阅读(603) 评论(0) 推荐(0)
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
摘要：https://www.npmjs.com/package/create-keyframe-animation 使用 https://www.jb51.net/article/159312.htm 阅读全文
posted @ 2020-04-13 20:32 终南墨客 阅读(360) 评论(0) 推荐(0)
vuex方法封装调用
摘要：vuex https://vuex.vuejs.org/zh/guide/mutations.html index.js import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import 阅读全文
posted @ 2020-04-12 18:39 终南墨客 阅读(4237) 评论(0) 推荐(0)
vue中自定义IndexBar 索引栏
摘要：vant是一款基于vue的牛皮移动端组件库，比如类似手机电话簿的字母索引兰组件 https://youzan.github.io/vant/#/zh-CN/index-bar 今天看了朋友分享的一个自定义索引兰组件代码，是慕课网几年前的某个vue教程，结合vant的indexBar源码，值得一看学习 阅读全文
posted @ 2020-04-12 17:40 终南墨客 阅读(6722) 评论(0) 推荐(0)
封装loading加载状态子组件
摘要：现在流行的框架如element ui 、vant 等都有封装好的loading组件，直接拿来用。 微信小程序、uni-app等也有封装的loading组件，几个代码轻松引用。 不过作为基础，知道组件原理还是不错的 loading组件需要引用一张gif动图 <template> <div class= 阅读全文
posted @ 2020-04-12 15:55 终南墨客 阅读(1457) 评论(0) 推荐(0)
nuxt.js中asyncData 方法能够在渲染组件之前异步获取数据
摘要：https://zh.nuxtjs.org/api/ asyncData 方法 你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据。 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 阅读全文
posted @ 2020-04-03 20:27 终南墨客 阅读(4007) 评论(0) 推荐(0)
vue中使用高德地图异步加载 JS API
摘要：高德地图 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 封装为共用组件，由于每个地图都必须命名一个Id，当项目中多次调用地图子组件时，需要动态改变id <template> <!-- 高德地图组件 --> <div :id="id 阅读全文
posted @ 2020-04-02 20:36 终南墨客 阅读(2190) 评论(0) 推荐(0)
Vue中使用js-pinyin包实现城市按首字母排序
摘要：https://www.npmjs.com/package/js-pinyin 参考 https://blog.csdn.net/weixin_38644883/article/details/88884460 https://www.cnblogs.com/lzb1234/p/11353152.h 阅读全文
posted @ 2020-04-02 17:54 终南墨客 阅读(1283) 评论(0) 推荐(0)
nuxt之vuex中使用nuxtServerInit方法
摘要：官网介绍nuxtServerInit方法 https://zh.nuxtjs.org/guide/vuex-store/#nuxtserverinit-%E6%96%B9%E6%B3%95 vuex中模块化使用示例 挂载vuex中state模块及nuxtServerInit方法 阅读全文
posted @ 2020-04-01 17:44 终南墨客 阅读(7032) 评论(0) 推荐(0)
element UI中自定义表单的校验规则
摘要：element UI的form表单提供了强大的表单校验功能 https://element.eleme.cn/#/zh-CN/component/form validate是对整个表单进行校验的方法 validateField第一个参数是数组或字符串，第二个参数是回调函数，回调函数有值则表示错误 使 阅读全文
posted @ 2020-03-31 19:46 终南墨客 阅读(9317) 评论(0) 推荐(1)
nuxt脚手架创建项目及坑
摘要：1.项目创建 使用nuxt脚手架创建项目 cnpm install -g npx npx create-nuxt-app 项目名称 2.使用import语法需要的配置 Vue-cli全家桶生成的VUE项目是经过webpack打包的，导入文件用的是ES6的require，而使用nuxt命令生成的项目没 阅读全文
posted @ 2020-03-27 18:27 终南墨客 阅读(584) 评论(0) 推荐(0)
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
摘要：https://www.jb51.net/article/159312.htm 阅读全文
posted @ 2019-12-03 21:14 终南墨客 阅读(245) 评论(0) 推荐(0)