vue专栏
关注
分享
扫一扫
文章平均质量分 51
最近接触vue，算是写的笔记，记录下来，以便不时之需！
就像风1样
这个作者很懒，什么都没留下…
展开
-
vue基于elementUI下拉Select同时获取value和label的值
碰到脑残架构师系列——Select通过接口获取列表tableData，选择onSelectedDrug 后获取参数：id直接获取 但 name 需要多加个匹配<el-form-item label="控制系统" :label-width="formAddLabelWidth" prop="controlSystemName "> <el...原创 2019-07-30 16:30:55 · 19885 阅读 · 3 评论 -
vue添加动态粒子背景，可设置形状，大小，速度，数量...
截取了一部分的效果图vue项目中安装vue-particles插件1.安装npm install vue-particles --save-dev2.main.js引入import VueParticles from 'vue-particles'Vue.use(VueParticles)3.引入代码<vue-particles co...原创 2019-07-29 16:13:19 · 1811 阅读 · 1 评论 -
vue基于elementUI选择表格数据
.代码：<template> <div class="table_wrap"> <el-table :data="tableData" size="mini" stripe style="width: 100%" border ref="multipleTable" @selection-change="handleSel...原创 2019-07-26 17:42:56 · 2065 阅读 · 0 评论 -
vue基于elementUI表格状态判断展示
判断一条数据的状态展示相应的内容方法如：status(状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态代码：<div style="padding:15px 20px;"> <el-table size="mini" stripe :...原创 2019-07-25 15:16:26 · 16207 阅读 · 4 评论 -
vue项目打包成安卓app步骤（Hbuilder打包）
1.首先保证vue项目正常的，再用自带的打包程序 运行npm run build打包完成后代码在根目录dist 文件夹内，2.然后在Hbuilder中打开这个dist文件夹，这时，这个项目是web应用的项目需要把它转成app应用的项目，鼠标右键转换成移动app，dist的图标会由 W 变成 A3.打开dist目录下的index.html，格式化一下代码在每个有...原创 2019-07-18 18:13:16 · 2674 阅读 · 0 评论 -
vue引用echarts折线平滑面积图
vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.youkuaiyun.com/qq_42221334/article/details/95354424主要代码：<template> <div> <div class="cardList_title">用户活跃度</div> <d...原创 2019-07-17 15:44:55 · 2842 阅读 · 0 评论 -
vue引用echarts柱形堆叠图
vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.youkuaiyun.com/qq_42221334/article/details/95354424（周，月，年动态切换数据功能）请参考文章https://blog.youkuaiyun.com/qq_42221334/article/details/96307823主要代码：<template> ...原创 2019-07-17 15:20:13 · 1769 阅读 · 0 评论 -
vue引用echarts柱形加折线统计图（周月年动态切换数据）
vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.youkuaiyun.com/qq_42221334/article/details/95354424思路：通过引用echarts图表 实现固定数据展示，添加定位周，月，年 通过点击动态切换数据 即可主要代码：<template> <div> <div class=...原创 2019-07-17 14:55:07 · 7662 阅读 · 3 评论 -
vue引入echarts中国地图
需求：显示各省名字，滑过标记地显示接入数量，点击标记地显示系统数量已接入及能跳转对应页面信息的入口；配置：1.安装依赖npm install echarts -S2.全局引入main.js// 引入echartsimport echarts from 'echarts' Vue.prototype.$echarts = echarts3.在需要地图的...原创 2019-07-11 17:15:20 · 17134 阅读 · 7 评论 -
vue引入echarts圆环图等各种图表方法-----入门
1.安装依赖npm install echarts -S2.全局引入main.js// 引入echartsimport echarts from 'echarts' Vue.prototype.$echarts = echarts3.模版引入柱形图（此处为模版演示）圆环在下面介绍怎么更改export default { name: 'hello', data...原创 2019-07-10 17:23:37 · 4632 阅读 · 1 评论 -
vue打包放服务器不显示图片
1.在config（文件夹）—>index.js中，添加（如图的红色标记区域）2.在build（文件夹）—>utils.js添加3.配置完成后，在工程里静态文件存储又分为两种（1）img css 正常引入： img标签引入图片 <img’ src="…/…/static/img/moon.png" class=“test-img”...原创 2019-07-02 15:26:23 · 1266 阅读 · 0 评论 -
vue开发h5简单的微信支付
在微信内H5调起微信支付，主要依赖于一个微信的内置对象WeixinJSBridge，这个对象在其他浏览器中无效。需要有通过后台返回的信息如下：methods: {//支付 payl(){ var that = this; axios .post(baseUrl + "/apiyd/pay/doPayInfo/", formData) ...原创 2019-07-01 16:50:21 · 5163 阅读 · 0 评论 -
vue简单上传图片，压缩图片功能实现（js原生通用）
可以先看 只有上传图片的js完整demohttps://blog.youkuaiyun.com/qq_42221334/article/details/84827369vue 完整demohttps://blog.youkuaiyun.com/qq_42221334/article/details/93198417参考上传图片 添加了canvas 方法压缩图片，判断图片宽度大于1000时 进行压缩...原创 2019-06-29 10:23:39 · 4781 阅读 · 0 评论 -
vue实现评价星星功能（代码全）
代码：<template> <ul class="StarsWrap"> <li v-for="(i,index) in list" :key="index" @click="clickStars(index)"> <img :src="xing>index?stara:starb"/&...原创 2019-06-26 11:40:04 · 5644 阅读 · 5 评论 -
vue开发for循环判断表单列表空值技巧
上传表单时经常判空，一个一个判断麻烦！这里提示个技巧：首先要有表单的集合，和提示内容的集合，表单输入内容时通过vue的v-model更改表单内容集合，通过循环param表单内容，对应的提示paramTips内容this.Tips为自己写的提示方法<script>export default { name: "feedShopping", data() { r...原创 2019-06-22 17:36:58 · 7631 阅读 · 0 评论 -
vue开发简单上传图片功能
vue简单的上传个图片的功能，主要代码：<template><div class="plan_list"> <div class="plan_name Upload_name">企业logo</div> <div class='Upload'> <input type=...原创 2019-06-21 15:45:16 · 3302 阅读 · 0 评论 -
vue开发实现单选多选功能
单选：只能选择一个代码：：（循环集合cities，点击哪个传值索引index，给对应的索引加上类名，初始化默认n为0）<ul class="box"> <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>&l...原创 2019-06-21 09:54:19 · 5331 阅读 · 0 评论 -
vue开发H5城市三级联动（代码全）
看图说话：1.安装组件：npm install v-distpicker --save2.调用代码（全）：<template> <div> <div class="head_top"> <div class="right r"> <div class="Cit...原创 2019-06-17 14:09:13 · 2719 阅读 · 1 评论 -
vue开发H5简单上拉加载功能代码全vue监听滚动底部
没用ui框架写简单的实现了下功能思路:上拉加载肯定要滚动到底部，所以就先监听滚动条滚动到底部 然后执行分页+1请求数据push到渲染列表中即可；同时判断最后一页时不请求，展示无数据状态主要代码：1：监听滚动底部<script>export default { name: "index_SearchPage", data() { return...原创 2019-06-15 11:32:12 · 2443 阅读 · 0 评论 -
vue底部导航切换（原生切换图片）功能实现
需求：底部导航切换页面，同时切换图片。底部为公共组件组件代码：<div class="weui-tabbar"> <a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :class="{active:index == that...原创 2019-06-14 11:40:16 · 3778 阅读 · 2 评论 -
vue父组件向子组件传参
需求：头部为一个公用组件，跳转页面标题切换，同时控制返回键显示隐藏父组件代码(引用子组件) 同时子组件上传递参数textTitle和ifReturn：<template> <div> <headAssembly textTitle="消息" ifReturn="0"/> <div><template>...原创 2019-06-13 16:37:31 · 1999 阅读 · 0 评论 -
vue开发H5步骤详解（环境搭建+rem布局+域名配置+请求）
环境搭建01. 安装Node.js Node.js安装包及源码 下载地址为：https://nodejs.org/en/download/、64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi02. 检测一下node版本，在cmd命令框框内输入命令 node --version 查看node是...原创 2019-06-11 10:02:45 · 20815 阅读 · 0 评论 -
vue配置本地和线上环境（域名）
vue本身为运行脚手架项目自家搭载了一个nodejs后台环境，本地可通过proxyTable来处理跨域问题，但是上线（或生产环境）之后改域名真是一件麻烦的事情，所以进行一些配置。config/index.js proxyTable: { '/apis': { target: 'http://www.baidu.com', //域名,主要修改这一块 ...原创 2019-06-10 11:16:43 · 5012 阅读 · 0 评论 -
微信小程序三种开发方式对比（原生，wepy，mpvue）
前言 如今公司随潮流，把现有h5项目，重做成小程序项目！网上搜索到 现微信小程序的三种开发方式 做下对比！不足之处请多多指点！开发文档原生开发小程序文档：点此进入 wepy 开发文档：点此进入 mpVue 开发文档：点此进入三者的简单对比小程序缺点个人认为小程序开发中，最大的缺点，也是很蛋疼的问题不支持vue的过滤器filters(因此数据都得提前...原创 2019-04-11 10:43:30 · 3805 阅读 · 0 评论 -
vue技巧——模版判空渲染 -尖括号内判断
常用的方法通过v- if：<span v-if="item.childArr[0].adver_mode==1">模式：按天收费</span><span v-if="item.childArr[0].adver_mode==2">模式：按月收费</span><span v-if="item.childArr[0].adver_mode...原创 2019-05-06 17:06:26 · 2210 阅读 · 0 评论 -
基于mpvue开发微信小程序，入门开发步骤
接下来。。。。。1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载nodejs并安装。然后打开命令行工具：# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源$ npm set ...原创 2018-09-07 09:55:53 · 3518 阅读 · 0 评论 -
vue基于elementUi筛选后分页恢复默认第一页(也可用回显页)
问题描述：默认打开页面，分页是1；当点第二页之后再进行筛选位置，没加恢复之前 接口传的页数还是2，返回第二页的数据；需求：当更改筛选时 添加让页数 更改为默认1；这时要添加:current-page.sync="pageNo" 当前页<div class="pagination"> <el-pagination @current-c...原创 2019-04-15 14:17:16 · 7488 阅读 · 0 评论 -
vue基于element时间日期组件上传多个时间转字符串（限制今天以前不能选）
html<el-form-item label="最晚到货时间" prop="project_time2" size="small" style="width: 618px"> <el-date-picker v-model="ruleForm.project_time2" type="da...原创 2019-04-10 16:38:09 · 2219 阅读 · 0 评论 -
vue项目去掉地址中的#（PC,H5）
vue项目携带一个#会对开发造成一定的影响：微信H5支付的回调地址，不允许有#微信三方登录回调地址，有#号时，接收不到code参数App分享，处理特殊字符时，可能会对#进行编译现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。有点影响美观去#的原理vue把#当做自己的根目录，静态资源，比如图片。去掉#后，要采用相对路径去引用，如果图片引用是在js...原创 2019-04-09 11:03:41 · 562 阅读 · 0 评论 -
vue里package.json中的dependencies和devDependencies
dependencies：应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。devDependencies：开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也...原创 2019-03-27 15:13:22 · 12502 阅读 · 0 评论 -
vue基于element保留一位小数（加验证）
看效果：代码<el-form-item label="价格" prop="price"> <el-input v-model="ruleForm.price" placeholder="请输入......" style="width:350px;margin-right: 10px;" size="small"></el-input>...原创 2019-03-22 14:02:59 · 1398 阅读 · 0 评论 -
vue增删改查
在管理员的一些后台页面里，个人中心里的数据列表里，都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里，我们可以录入新用户的信息，也可以对既有的用户信息进行修改。在vue中，我们更应该专注于对数据的操作和处理。比如我们有一个这样的页面：我们在这个页面里，就实现了增删改查4个功能，点击链接查看demo【//www.xiabingbao.com/demos/20190304/v...转载 2019-03-22 09:57:15 · 1157 阅读 · 0 评论 -
vue基于element日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档中使用picker-options属性来限制可选择的日期：单个输入框的 组件代码：<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options=...原创 2019-03-21 16:44:11 · 2092 阅读 · 1 评论 -
vue兼容ie浏览器
首先我们按照步骤来安装vue-cli创建项目运行npm installnpm run dev然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的官网地址：https://github.com/vuejs/vue然后就找资料查文档，总算给我找到了。要实现其实很简单，只需要我们下载一个babel-polyfill，npm install bab...原创 2019-03-21 11:57:26 · 8981 阅读 · 1 评论 -
vue搜索筛选前端处理demo（完整代码）
前端获取数据后 根据输入内容筛选列表通过cdn引入vue的方式 完整代码，新建个html 代码放里面即可预览<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge...原创 2019-03-14 15:09:16 · 4887 阅读 · 1 评论 -
vue点击编辑文字功能完整demo代码实例
直接上图看效果：代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...原创 2019-03-13 16:35:25 · 5798 阅读 · 0 评论 -
vue加scoped后无法修改样式（无法修改element UI 样式）
有的时候element提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用第一种方法原因：scoped解决方法：去掉scoped注意：此时该样式会污染全局样式，可以把它放在公共的css里面为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput第二种方法这不去掉scop...原创 2019-03-13 15:27:59 · 16780 阅读 · 2 评论 -
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符
Vue 事件处理方法可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on:click单击事件<buttonclass="btnbtn-info"v-on:click="add(1)">++</button><buttonclass="btnbtn-danger"v-on:cli...原创 2019-03-13 14:50:47 · 16760 阅读 · 0 评论 -
vue实现按字母选择城市，点击字母跳转对应项目demo(含修改滚动条样式)代码全
先上图看效果需求：顶部接口获取热门城市及城市Id，中部通过点击哪个字母底部自动跳转到哪个字母那一项获取城市id按字母城市列表json 链接：https://pan.baidu.com/s/126kgYEIBPwc8z-UgKcV4GQ 提取码：wt8u三级城市列表json链接：https://pan.baidu.com/s/1Qf4YsgJelHLyihKbAFw...原创 2019-02-28 14:32:06 · 4212 阅读 · 0 评论 -
vue验证码倒计时
在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！完成的效果如下：为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。接下来我们用代码来实现：<button class=...原创 2019-03-11 15:12:25 · 3118 阅读 · 1 评论