vue
chengxue_123
这个作者很懒,什么都没留下…
展开
-
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 · 169 阅读 · 0 评论 -
vue 组件间传值的几种方式
vue组件传值有好几种方式1.父传子 可以通过子组件props暴露属性 ,然后在父组件中用原创 2020-11-20 16:42:31 · 639 阅读 · 0 评论 -
vue中tab栏切换
1.绑定类名 :class="{'属性名:后面为布尔类型,true为生效'}"2.定义3)在css中样式.active{font-size:18px;color:#2878ff;}原创 2020-11-18 23:33:09 · 1196 阅读 · 0 评论 -
路由懒加载问题和linkActiveClass属性
1.路由懒加载问题 :就是需要的时候调用好处:就是在需要运行的时候才调用,加快加载速度,提高用户体验具体来说:vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时简单说 :进入首页不用一次加载过多资源造成用时长const routes = [ ..原创 2020-11-18 12:22:52 · 503 阅读 · 0 评论 -
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 · 2275 阅读 · 0 评论 -
vue中数字滚动组件的使用
在项目中的用法1.安装 npm i vue-count-to2.引入3.注册组件 在vue中 这个组件不应该在data里面 所以用的时候要注意 components 和 data 是同级4)在页面上用在需要的地方进行插入 :startVal是开始数字 :endVal是结束数字 需要注意: 如果后台传的是字符串类型,用parseInt() 转换一下infoObj.bannersNum是从数据库里面传过来的 这个要根据实际接口操作(和后台接口参数名和规则一致),此...原创 2020-11-17 17:16:57 · 390 阅读 · 0 评论 -
出现 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 · 6686 阅读 · 0 评论 -
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 · 1696 阅读 · 0 评论 -
时间格式化的处理
使用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 · 230 阅读 · 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 · 149 阅读 · 0 评论 -
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 · 3636 阅读 · 1 评论 -
vue中使用@mousedown、@mouseenter等鼠标事件失效解决办法
在vue中,使用@click点击事件没有任何问题 <el-button type="primary" icon="el-icon-plus" @click="searchBtn">添加用户</el-button>但是将@click替换为@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时,发现事件不触发(也就是失效了)此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了 <el-button ty原创 2020-10-31 00:37:19 · 14299 阅读 · 3 评论 -
vue项目中如何使用this.$confirm
首先在element-ui中的el-table下的el-table-column中引入插槽(相当于占位符) <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button > <el-but...原创 2020-10-30 23:58:34 · 7398 阅读 · 0 评论 -
vue路由的配置和侧边菜单组件的配置
vue路由的配置import Vue from 'vue'import VueRouter from 'vue-router'import Layout from '../views/layout/Layout.vue'import Home from "../views/Home.vue"//用户管理import User from "../views/user/User.vue"import AddUser from "../views/user/AddUser.vue"//分类管理原创 2020-10-29 22:31:10 · 808 阅读 · 0 评论 -
vue中拆分子组件和子路由的步骤
1.importcxHeaderfrom"./Header.vue";importcxSliderfrom"./Slider.vue";2.<cx-header></cx-header>3.exportdefault{components:{cxHeader,cxSlider,},};1)layout中2)Header.vue3)Slider.vue中...原创 2020-10-29 14:08:21 · 878 阅读 · 0 评论 -
vue中组件的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id.原创 2020-10-28 11:12:44 · 142 阅读 · 0 评论 -
vue中v-for可以迭代数组,也可以迭代对象和数组更新检测和对象更新检测
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- v-.原创 2020-10-27 18:05:21 · 347 阅读 · 0 评论 -
vue中的计算属性computed和监听属性watch
计算属性computed,对数据进行处理,生成一个新属性,计算属性要return//watch监听属性监听属性变化 传入两个参数 一个newValue(新值),一个(oldValue)旧值案例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width..原创 2020-10-27 17:15:00 · 303 阅读 · 0 评论 -
vue中的ref和refs的使用
ref和refs的区别:ref用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上,如果是在普通的DOM元素上使用,引用指向的就是DOM元素;如果是在子组件里,引用就指向组件实例 $refs可以用来选择元素或子组件 案例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...原创 2020-10-27 16:31:18 · 1107 阅读 · 0 评论 -
vue中使用v-model绑定表单操作
通过v-model双向绑定表单案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body原创 2020-10-27 15:56:35 · 476 阅读 · 0 评论 -
vue中如何绑定类和行内样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .mybox { .原创 2020-10-27 14:17:20 · 504 阅读 · 0 评论 -
vue中使用v-for进行多级菜单的遍历
在vue中data中的结构:原创 2020-10-27 13:51:23 · 4842 阅读 · 2 评论 -
vue中三种显示和隐藏以及v-if和v-show的区别
Vue中的三种显示和隐藏案例: v-if和v-show的区别: ...原创 2020-10-27 10:20:28 · 1500 阅读 · 0 评论