- 博客(20)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue中使用Mock.js
使用步骤1) 安装 npm i mockjs2)引入mockjs import Mock from "mockjs" 或者 var Mock=require("mockjs") 注意 list是定义数据的数组名, 100是默认的有100条数据,此处可以指定任意数据条数里面的属性名和值可以自己定义,也可以使用提供的数据3)在main.js挂载axiosimportaxiosfrom'axios'Vue.prototype.$axios=axios4)调用接...
2020-11-20 17:59:00
165
原创 vue项目中使用markdown文章样式
当后台传来的数据是这种格式的怎么处理,看起来很乱,还有标签1)可以在vue中用v-html 解析html 其他项目则用其他方法 ,此处用的是v-html="articalObj.content" 解析内容 <div class="articalContent" v-html="articalObj.content"> {{ articalObj.content }} </div>2)上述排版还是看起来不太美观 这个.
2020-11-19 14:39:11
1228
原创 vue中tab栏切换
1.绑定类名 :class="{'属性名:后面为布尔类型,true为生效'}"2.定义3)在css中样式.active{font-size:18px;color:#2878ff;}
2020-11-18 23:33:09
1193
原创 解决前端跨域问题配置
跨域配置 一般的跨域都是后端去配置 早期的有jquery中ajax中的jsonp跨域设置 后端也可以用cors 前端如果要自己配置 1)在项目中创建vue.config.js [和src同级] 在vue.config,js中 注意这个target中的地址是后台给的服务器的地址,module.exports = { devServer: { proxy: { "/...
2020-11-18 14:12:22
534
原创 路由懒加载问题和linkActiveClass属性
1.路由懒加载问题 :就是需要的时候调用好处:就是在需要运行的时候才调用,加快加载速度,提高用户体验具体来说:vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时简单说 :进入首页不用一次加载过多资源造成用时长const routes = [ ..
2020-11-18 12:22:52
494
原创 vue面包屑导航的实现
1.在路由（router.js)中添加meta对象2.在页面上使用 通过this.$route.meta.name 取到{name:'用户列表'},{name:'添加用户'}....... 可以给需要meta的路由添加 <el-breadcrumb separator="/"> <el-breadcrumb-item v-if="this.$route.meta.name" :to...
2020-11-17 21:28:01
2264
原创 vue中数字滚动组件的使用
在项目中的用法1.安装 npm i vue-count-to2.引入3.注册组件 在vue中 这个组件不应该在data里面 所以用的时候要注意 components 和 data 是同级4）在页面上用在需要的地方进行插入 :startVal是开始数字 :endVal是结束数字 需要注意: 如果后台传的是字符串类型,用parseInt() 转换一下infoObj.bannersNum是从数据库里面传过来的 这个要根据实际接口操作（和后台接口参数名和规则一致），此...
2020-11-17 17:16:57
379
原创 用js在页面上写一个倒计时
我在自己的项目中是这么做倒计时的1）html代码 time1,time2,time3分别是用来显示时、分、秒的 <div class="countTime"> <span id="time1">1</span> <i>:</i> .
2020-11-16 17:38:53
1445
原创 css实现等分布局
css画页面的时候，喜欢使用百分比实现等分布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl.
2020-11-12 15:53:12
613
原创 css快速实现移动端圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
2020-11-12 15:08:17
171
原创 用css实现pc端响应式布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <style> * { mar.
2020-11-12 11:53:41
1774
1
原创 css比较常见的li布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>li布局</title> <style> * { ma...
2020-11-11 23:04:48
461
原创 vue中使用el-upload上传组件并且和后台的联调
前提：在elemnet-ui中组件能应用的情况下，在vue项目中使用el-upload上传组件 在main.js中注册el-upload后 <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/api/admin/upload" :show-file-list="false" :on-success="handleSucce.
2020-11-11 22:14:12
994
原创 vue中添加和编辑显示控制 (带接口,编辑中带id)
1)首先定义一个变量 showMode:true,//true表示添加文章false表示显示文章 [在vue中一般定义在data中] [AddOrEditAritcal.vue]2)然后在页面上应用 <h1>{{showMode?"添加文章":"编辑文章"}}</h1> [在vue中template中] [AddOrEditAritcal.vue]3)在编辑中携带id [Artic...
2020-11-11 18:43:00
908
原创 出现 Uncaught (in promise) undefined Promise.then (async)问题
我在调接口的时候出现了这个问题,想了很久最后发现时调用axios中put方法和deletes方法存在一些差别原来报错的写法是:export function put(url, params) { return new Promise((resolve, reject) => { //如果不加的话,返回undefined axios .put(url, params) .then((res) =&...
2020-11-10 23:15:50
6565
原创 vue中数据加密处理
在vue中,通常要对一些数据进行加密操作我一般使用crypto-js去实现各种加密效果官方地址： https://www.npmjs.com/package/crypto-js操作步骤有1)安装依赖包 npm icrypto-js2)在工具包目录添加方法import crypto from "crypto-js";export function getMd5(str) { return crypto .MD5(str) .toString(...
2020-11-10 22:55:39
1675
原创 时间格式化的处理
使用moment ,查看文档地址http://momentjs.cn/1)下载moment npm i moment2)有些地方需要用到时间格式化 ,需要处理数据我比较喜欢的做法有两种方法有两种:方法1.对定义的currentTime时间格式化function formatTime(arr) { arr.forEach(item => { item.currentTime = moment(item.currentTime).format("Y...
2020-11-10 22:31:39
227
1
原创 vuex的详细使用
可以参照vuex官网https://vuex.vuejs.org/zh/guide/总结:1.引入模块 import {goods} from "./modules/goods"2.将vuex导入模块modules:{ goods}3.定义模块const state={};const getters={};const mustations={};const actions={};exportdefault{namespaced:t...
2020-11-04 18:06:08
143
原创 vue中正确使用富文本编辑器wangeditor和使用wangeditor遇到的坑
地址:http://www.wangeditor.com/,gitHub:https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-vue/src/components/Editor.vue1）首先终端中安装npm i wangeditor <divref="editor"style="text-align:left"class="text"></div>2) 引入富...
2020-11-01 17:28:13
3592
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人