
vue
banzhuanren1
这个作者很懒,什么都没留下…
展开
-
webpack常用配置
webpack常用配置周末闲来无事 整理一下webpack基本配置,记录一下,也分享一下,如有错误,还请各位大神指正// 配置webpack得配置文件,需要将配置的对象导出,给webpack使用const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); // 处理自动生成htmlconst MiniCssExtractPlugin = require("mini-css-extract原创 2021-07-04 19:10:40 · 212 阅读 · 0 评论 -
vuex module写法基本使用
简单记录下不是很全,之前都是用的普通写法,具体请看之前的博客,今天不忙,学习下module的写法,如有错误,请大佬多指正目录结构home.vue<template> <div > <div> <div> 主页年龄列表 </div> <div...原创 2020-04-25 17:19:09 · 551 阅读 · 0 评论 -
elementui-table表格进行模糊搜索,不改变选中状态
首先说明今天因为工作需要,找到了一个搜索表格的博客,挺好用,但是和我实际需求有点不一样,看网友问题,正好和我的需要一样就加以改造完善了一下原文 https://blog.youkuaiyun.com/luzhaopan/article/details/81569907说明:本代码模拟编辑情况下从后台请求数据选择表格,根据字段判断是否被选中,搜索结果不会影响表格是否被选择的状态,(即本来是选中状态,搜索完成...原创 2020-03-18 23:33:15 · 1894 阅读 · 1 评论 -
element_ui日期组件限制开始时间,结束时间范围
需求分析:1,当选择开始时间后,结束时间从开始时间往后可选择2,当选择结束时间后,开始时间最后时间为结束日期上代码,亲测有效<template> <div class="pickerDiv"> <div class="block"> <el-date-picker v-...原创 2020-01-12 22:04:16 · 1050 阅读 · 1 评论 -
vue项目部署到tomcat服务器
开发环境中使用npm run dev 来运行项目 ,但是当我们在生产环境是使用npm run build来运行项目的。现在记录一下vue项目中的打包部署一.修改config–>index.js文件, 把build:{} 下的assetsPublicPath: ‘/’,改成assetsPublicPath: ‘./’,---------解决首页加载空白问题、二:一般情况下会出现加载静...原创 2019-12-12 23:06:36 · 707 阅读 · 0 评论 -
移动端滚动穿透
闲着没事记录下移动端之前遇到的问题。问题描述:页面长度超出手机屏幕出现滚动条,此时如果有弹层显示的话,触摸弹层,下面列表继续滑动,这个效果肯定是不对的。解决办法有两个:方法一:当弹层出现的时候给其父元素增加overflow: hidden;当弹层消失的时候删除其父元素overflow属性或更改为overflow: auto;代码如下<template> <div...原创 2019-12-09 22:54:47 · 283 阅读 · 0 评论 -
vue 监听对象属性变化
今天看文章 遇到了这个问题,就用代码验证下,亲测有效。<template> <div id="app"> <span> {{ msg }} </span> <p>{{ person.name}}年龄是{{ person.age }}岁</p> </div>...原创 2019-11-29 15:50:49 · 1015 阅读 · 0 评论 -
keep-alive 路由缓存
本文参考:https://blog.youkuaiyun.com/qq_34664239/article/details/89499120是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,提高性能,通常配合使用拥有两个钩子函数 activated、deactivatedactivated:在组件激活是会被调用deactivated:在组件停用时被调用可以查看之前生命周期文...原创 2019-11-22 10:39:04 · 313 阅读 · 0 评论 -
vue生命周期
今天不忙,有看了下vue生命周期,写代码进行验证记录一下粗浅认识,如有错误请大神指正首先先上官网关于生命周期的图解生命周期:个人理解每个vue实例,从创建到销毁,所经历的一些必要的阶段,所组成的一系列过程叫做生命周期。代码验证://父组件<template> <div id="app"> <button @click="changeMsg...原创 2019-11-21 17:55:35 · 131 阅读 · 0 评论 -
vuex基本使用
1 、在src目录下建立store文件夹,建立actions.js/getter.js/index.js/mutation.js/mutation_type.js/state.js文件2、state.js文件内容(生命state中要使用的数据及初始值)const state = { currentIndex: -1,}export default state;3 、 mutatio...原创 2019-11-20 16:46:25 · 301 阅读 · 0 评论 -
vue 过滤器的使用(解决forEach遇到的问题)
在学习过程中遇到了一个问题,本来我是想用forEach来解决的,但是一直报错<template> <div class="m-menu"> <dl class="nav"> <dt>全部分类</dt> <dd v-for="item in menu" @mouseenter="...原创 2019-08-30 17:59:00 · 2500 阅读 · 0 评论 -
vue项目less 使用
第一步 确认自己vue环境是否已经搭建完成第二步 进入build/webpack.base.conf.js 增加如下代码{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",}第三步 下载所需要的依赖npm install less less-loader --save-devnpm install...原创 2019-08-30 17:55:29 · 156 阅读 · 0 评论 -
The computed property "userName" is already defined in data.
这是一次练习中所犯的错误,记录一下情况说明:要使用vuex 做一个登录效果如下(一为未登录,二为已登录)最初是想用vuex的getter获取登录名进行展示,代码如下<div> <a href="javascript:void(0)" class="navbar-link" @click="loginClick" v-show="userNameFlag">L...原创 2019-08-30 17:40:56 · 4221 阅读 · 0 评论 -
vue中通过第三方代理解决跨域问题
最近在学node,遇到了跨域的问题,来记录下方法首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的细节不多说,今天主要说跨域 的问题左侧为服务端项目结构,www为可执行文件,默认端口为3000(注意这个在下面是要用到的)先进行服务端路由配置前端路由配置然后就是最重要的第三方代理配置 ...原创 2019-08-30 17:32:51 · 467 阅读 · 0 评论 -
vuex 数据持久化
在自己写练习的时候,遇到了这个VUEX数据持久化的问题,本来在vuex中存储的数据,只要刷新页面数据就没有了,其实用本地存储就可以解决,但是想想都用vue 开始做项目了,就能用新技术就用新技术,最好找到了解决办法解决办法:第一步:npm install vuex-persistedstate第二步:在store/index.js中添加下面代码import persistedState f...原创 2019-08-30 17:30:00 · 179 阅读 · 0 评论 -
elementui tree 组件实现鼠标移入节点,节点后面显示添加删除按钮
首先说明个人自我感觉我这个办法比较low,算是抛砖引玉,希望各位高手有更好的办法多多指点!多谢我们的需求是鼠标进入节点的时候对应节点后面显示添加删除按钮,本来用JQ挺好实现的效果,但是在vue中个人感觉不那么容易实现,最初我是想通过v-show 或者v-if 来控制这些按钮的显示和隐藏,但是效果确是我放上去以后所有节点后面的按钮都显示出来了 ,代码和效果如下<el-tree :da...原创 2019-08-30 17:22:17 · 8907 阅读 · 2 评论 -
vue slot插槽使用
注意:插槽名字和组件名字一定要保持一致-------------------------------------插槽模板-------model.vue------样式就自己写吧---------------------<div class="modelCon" v-show="mdShow"> <div class="model"> <div...原创 2019-08-30 17:16:01 · 174 阅读 · 0 评论 -
elementui table组件,根据数据的不同,显示不同的内容
废话不多说,直接上代码<template> <div class="padding20"> <div class="publicTable"> <el-table :data="configureList" border style="width: 100%" :header-cell-style="{background:'#d...原创 2019-08-30 17:12:08 · 6503 阅读 · 0 评论 -
elementui tree组件自定义图标
<el-tree:data="assetsTreeList":props="assetsProps"node-key="id":show-checkbox=this.checkFlag:default-checked-keys=this.roleAssetsCheckList><span class="custom-tree-node" slot-scope="{...原创 2019-08-30 16:45:11 · 2357 阅读 · 0 评论