![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue项目
IF YOU~
这个作者很懒,什么都没留下…
展开
-
vue向上无限滚动
vue 实现向上无限滚动原创 2022-09-16 10:37:32 · 579 阅读 · 0 评论 -
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项。点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的新增,可以考虑的实现方法是先写死一个必须的表单,需要新增的两个表单放在一个div里,在div中使用v-for生成,达到同时新增的效果代码如下 <div class="item_tit"&...原创 2019-02-28 15:21:07 · 4444 阅读 · 5 评论 -
Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目,这也是人生第一个真正的项目。刚做了一天,就遇到不少问题,在这里列出自己的问题与解决办法,与大家交流,提升自己,希望以后不会掉进同一个坑里。一、使用vue-cli创建项目上次逛论坛遇到一张图,出处忘记了,借送给大家,从搭建到项目结构,一张图解决好多疑问,好优秀二、Element-ui安装应用1.安装到项目 $ cnpm inst...原创 2019-01-09 13:36:33 · 2039 阅读 · 2 评论 -
vue通过写引入完整js的方式在HTML上的组件写法
vue通过写引入完整js的方式在HTML上的组件写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2019-01-12 11:56:43 · 9065 阅读 · 0 评论 -
关于后台返回文档流的文件下载
关于后台返回文档流的文件下载<template> <i @click="downLoad(data)" class="downLoad">下载</i></template> //下载 downLoad(val) { let url = val.httpUrl let ...原创 2018-12-21 18:01:29 · 4111 阅读 · 0 评论 -
慕课网学习之使用vue实现购物车和地址选配功能
慕课网学习之使用vue实现购物车和地址选配功能项目github网址:https://github.com/chenmonkey/shopping-cart.gitgithub线上展示网址:https://chenmonkey.github.io/shopping-cart/1.预备知识2、过滤器filter:对接口返回的字段进行一个业务转换3、引入已创建好的cart.html、adre...转载 2019-03-11 16:45:10 · 179 阅读 · 0 评论 -
Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem当我们采用vue-cli脚手架搭建完项目,安装所有依赖包之后,用npm run dev启动后,在根目录有一个 .postcssrc.js 文件,文件结构如下:vue-cli默认已经安装以上三个插件:pos...原创 2019-04-02 13:40:13 · 458 阅读 · 0 评论 -
vue 实现checkbox的全选,单选以及删除
vue 实现checkbox的全选,单选以及删除<template> <div> <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <div ...原创 2019-04-18 18:30:26 · 11475 阅读 · 4 评论 -
vuejs开发H5页面总结
vuejs开发H5页面总结关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / ...原创 2019-05-08 10:50:12 · 945 阅读 · 0 评论 -
移动端使用 vue2-datepick 日期控件
vue2-datepick首先应用npm 下载安装npm i vue2-datepick --save在main.js中引入import Calendar from 'vue2-datepick'; //日期控件Vue.use(Calendar);//日期控件然后在组件中使用。html <div class="group_item"> ...原创 2019-06-13 13:58:38 · 3624 阅读 · 0 评论 -
vue 微信公众号支付 jssdk
jssdk 引入然后需要在vue项目中引入jssdk,微信为了方便用户使用,将官方的jssdk发布到了npm上,有一个叫weixin-js-sdk的,但我们需要使用的不是这个,网上很多在vue中引用的是这个,但是这个是为commonjs发布的版本,只能通过require引入,很多人发现在vue中引入import wx from ‘weixin-js-sdk’,console.log(wx)会出现...原创 2019-06-19 16:49:12 · 1365 阅读 · 0 评论 -
关于vue+element上传文件post请求
关于vue+element上传文件post请求由于项目要求这里要实现点击上传文件首先,我们需要写个上传组件 <el-upload class="upload-demo" :action="doupload()" :before-upload="before_Upload" ref="newupload"...原创 2018-12-21 14:21:45 · 26311 阅读 · 1 评论 -
关于vuex状态管理系统应用实例
关于vuex状态管理系统应用实例应用场景:由于项目中需要监控一些状态值,所以统一管理下;首先安装vuex,npm install vuex --save在store.js文件中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { ...原创 2018-11-23 17:23:33 · 564 阅读 · 0 评论 -
vue + element +axios实现省市区三级联动。
vue + element +axios实现省市区三级联动。做之前你需要一个省市区一个库,在static目录下存储一个json:这里我提供一个json数据库,比较全;{"110000":"北京市","110100":"北京市","110101":"东城区","110102":"西城区","110105":"朝阳区原创 2018-11-23 17:43:55 · 2807 阅读 · 0 评论 -
web前端总结之文本超出显示省略号
web前端总结之文本超出显示省略号当网页中显示文字过多时,会出现如下样式的文字文字显示为省略号,当鼠标移上去时显示文字。 这就是文本超出显示省略号。 主要用到了: text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在标签中添加title=“被省略的文字”,实现鼠标移动到省略号上显示被省略的文字。 效果:...原创 2018-12-02 10:07:09 · 3732 阅读 · 2 评论 -
vue中点击空白处隐藏div的实现(用自定义指令优雅的实现)
vue中点击空白处隐藏div的实现(用自定义指令优雅的实现)简单想应该怎么实现?1、肯定是给document增加一个click事件监听2、当发生click事件的时候判断是否点击的当前对象结合着本思路和指令咱们来实现。代码实现&lt;template&gt; &lt;div&gt; &lt;div class="show" v-show="s原创 2018-12-02 15:23:21 · 1385 阅读 · 2 评论 -
webpack打包路径问题,生成相对路径
**webpack打包路径问题,生成相对路径**这里用我们用vue-cli脚手架生成项目举例,go=>1,找到config文件夹下面的index.js3,把箭头所指的/去掉 —–搞定对于所有webpack的同理,只要把打包输出路径的/去掉就可以了...原创 2018-12-02 16:29:41 · 1897 阅读 · 0 评论 -
关于vue项目中js实现轮播功能。
关于vue项目中js实现轮播功能。由于项目要求,ui组件库实现不好要的效果,所以,手动写了一个。先看效果吧这里左右箭头是可以点击滑动的,类似轮播样式,这里是由于后台返回数据list,一次加载3条实现方法主要下面介绍首先是静态页面 <div class="process-box" ref='processBox'> <p>员工历程</...原创 2018-11-30 17:56:04 · 2424 阅读 · 0 评论 -
基于vue的滚动条组件之----element隐藏组件滚动条scrollbar使用
基于vue的滚动条组件之----element隐藏组件滚动条scrollbar使用在项目中,总是需要用到滚动条,但windows浏览器默认的滚动条是很丑的,为了页面美观,可以考虑优化滚动条样式。vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,可查看源码。element-ui隐藏组件scrollbar的使用<el-scrollbar&...原创 2018-11-28 14:56:07 · 1470 阅读 · 0 评论 -
js上传文件的完整写法(本地用的是vue的环境)
js上传文件的完整写法(本地用的是vue的环境)1.在项目中经常会用到需要上传头像,附件的地方,那么我们如何进行上传呢,今天跟大家分享一下,来自项目中的一些上传文件的个人总结2.首先我们需要在页面中使用一个 input 按钮,并将它的type属性设置为’file’,关于上传按钮美化的操作,我已经在上一篇博客中详细的讲解了.下面直接贴出代码截图若项目中需要支持上传多文件,只需要在input标...原创 2018-12-20 14:06:02 · 1019 阅读 · 0 评论 -
vue 键盘回车事件
vue 键盘回车事件如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下:<input v-model="form.name" placeholder="昵称" @keyup.enter="submit"><el-input v...原创 2018-12-26 17:12:51 · 305 阅读 · 0 评论 -
vue +element开发中表格报错_self.$scopedSlots.default is not a function
vue +element开发中表格报错_self.$scopedSlots.default is not a function解决本文主要设置到多个el-table报错_self.$scopedSlots.default is not a function,此时的解决办法是设置key=""确保每一个el-table具有唯一性...原创 2018-12-10 17:43:09 · 545 阅读 · 0 评论 -
关于前端vue项目设置请求头权限问题
关于前端vue项目设置请求头权限问题新建一个公共js文件。如: lp.js.//设置请求消息头export function headers(contentType,token){let headers={};headers['Content-Type'] = contentType ? contentType : 'application/json;charset=utf-8'; ...原创 2018-11-20 15:24:58 · 7426 阅读 · 0 评论