![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 77
Amy o-O
这个作者很懒,什么都没留下…
展开
-
在Vue项目中如何使用其他插件(eCharts & wangeditor)
使用 echartys1.使用其他插件 ,直接npm安装即可:npm install echarts -S //安装echarts依赖2.创建图表,在 main.js 全局引入 import echarts from 'echarts'Vue.prototype.$echarts = echarts3.在需要使用 echarts 图表的地方 ,插入 html标签以及 js<template>原创 2017-12-25 11:09:00 · 5089 阅读 · 0 评论 -
移动端开发(时间验证)和(金额验证)和(重复提交)
如下,在下面这样一个页面当中,如果用户在网络不好的情况下,重复提交需要做得验证:效果图如下:思路如下:1.我们定义一个全局变量 fleg = false; 来控制在提交时的一些操作;如果 fleg = false 正常提交,否则提示‘请勿重复提交’2.在提交的过程中 因为 ajax 是一个异步的操作,在这个同时更改 fleg 的值 为 true, 如果提交成功了,更改 fleg 的值变为...原创 2018-10-18 11:37:23 · 527 阅读 · 0 评论 -
VUE的图片预览插件 vue-photo-preview
1.安装:npm install vue-photo-preview --save2.在main.js 入口文件中配置:import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)3.页面渲染:情况一: 页面本身就存在img标签,且是独立的一个:src 对应后台返回的图片路径pr...原创 2018-10-18 14:06:22 · 9741 阅读 · 5 评论 -
自定义 Table 搜索功能 + 降序 +升序
如上图,实现表格简单的搜索和排序功能,搜索: 利用 vue 的 computed 计算属性来实现;代码如下:export default { data() { return { headList:['序号','姓名','性别','年龄','得分'], tableData:[ {'num':1,'name':'lilo','sex':...原创 2018-11-20 10:00:40 · 604 阅读 · 0 评论 -
Vue封装 分页组件
思路:1.父子组件通过 props 传递相关参数2.子组件改变父组件的参数通过 $emit 方法来触发代码:<div class="Pagination"> <div class="page-bar"> <ul> <li><a v-on:click=&quo原创 2019-01-03 16:20:47 · 1177 阅读 · 1 评论 -
关于table升序,降序,上移,搜索,分页那些事儿
开始之前先看看闲着没事儿,写的一个页面:简单描述一下,思路和实现的步骤:1.搜索: 采用vue的computed 计算属性在不改变原数组的情况下,过滤出用户搜索的信息2.升序,降序: 采用js 的 sort() 方法,升序 a-b, 降序 b-a3.上移: 利用 Vue.set() 响应式新增与修改数据4.分页:自主封装了一个组件,子组件触发父组件的方法采用 this.$emit() ...原创 2019-01-26 14:30:38 · 630 阅读 · 0 评论 -
vue配置开发、测试、生产环境(不同环境,不同命令)
1.我们借助 cross-env 插件跨平台地设置及使用环境变量npm安装方式:npm i --save-dev cross-env2.我们对config文件夹做配置,新建一个test.env.js(test:测试环境) 文件来配置我们的测试环境,代码如下:(NODE_ENV与ENV_CONFIG的参数都是双引号包单引号,否则会报错)3.同理配置prod.env.js(prod:生产...原创 2019-06-13 16:41:45 · 14337 阅读 · 5 评论 -
vue-cli3 快速配置多环境变量
vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多,官方也有相关文档对多环境变量配置的描述。https://cli.vuejs.org/zh/guide/mode-and-env.html1.首先:通过为 .env 文件增加后缀来设置某个模式下特有的环境变量通过传递 --mode 选项参数为命令行覆写默认的模式在项目的根目录新建3个文件夹,分别对应开发(dev),测试(te...原创 2019-06-17 15:52:35 · 12091 阅读 · 6 评论 -
vue封装可复用组件confirm,并绑定在vue原型上
首先我们需要创建 confirm.vue , confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑confirm.vue&lt;template&gt; &lt;div class="confirm" v-if="isShow"&gt; &lt;div class="con_box&a原创 2018-09-18 16:32:01 · 6245 阅读 · 0 评论 -
vue基于webpack配置多文件入口
先查看一下搭建好的文件结构: 根据 vue-cli 搭建的基于webpack 的项目,如图所示,更改build 文件夹里面的相关文件。1.第一步: 更改 build - utils.js 文件,配置多文件入口, 在文件最后加入以下代码:var glob = require('glob')// 页面模板var HtmlWebpackPlugin = require('h...原创 2018-08-16 13:53:23 · 3160 阅读 · 2 评论 -
在 Vue 项目中关于 table查询 以及 页面跳转 的实现
1.获取 input 的值::model="filters" //表单过滤<el-input v-model="filters.name" placeholder="姓名"></el-input> //input数据双向绑定2.js初始化 3.在 当前 表格实现 页面跳转<el-table-column label="姓名" width="180"><template scope=原创 2017-12-25 11:39:59 · 7115 阅读 · 2 评论 -
VUE如何搭建项目
一:在搭建vue的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,网址:http://nodejs.cn; 1.安装node 的时候,选择 add-to-path,自动配置环境变量二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node原创 2017-12-25 10:50:49 · 3600 阅读 · 0 评论 -
vue跨域 axios请求数据
项目结构如下图: common.js//公用的js以及封装好的 axios方法 store文件里面是 vuex 状态机 store文件里面的index.js 就是项目的vuex状态管理的地方 第一步: npm install axios 在main.js入口里面引入: 第二部: npm install vuex –save //vuex状态机 在 s原创 2018-03-30 22:28:42 · 1522 阅读 · 0 评论 -
vue项目遇到的坑
1.初始化vue项目,报错This is probably not a problem with npm,there is likely additional logging output above npm install 再然后npm run dev 就报错了,最后找出是版本更新原因,是版本更新的问题: 解决方案 npm install之后,运行 npm i -...原创 2018-03-30 22:43:57 · 1970 阅读 · 0 评论 -
vue之 watch监听数据变化
1.单选 <ul> <li v-for="item,index in cites" class="item" :class="{'checked' : index == n }" @click='choose(index)'>{{ item.name }}</li></ul><s原创 2018-04-24 22:56:12 · 2005 阅读 · 0 评论 -
vue封装共用组件-confirm
先上源码:&lt;template&gt; &lt;transition name="mask-bg-fade"&gt; &lt;!-- 弹框组件 --&gt; &lt;div class="mask" v-show="show"&a原创 2018-07-31 12:10:35 · 9513 阅读 · 0 评论 -
html2canvas 实现dom转png
首先:npm install vue-html2canvas在需要的页面 : import html2canvas from “html2canvas”;使用中: this.$nextTick(() => { let dom = this.$refs.imageWrapper.$refs.inviteInfo; html2canvas(dom, ...原创 2019-08-07 18:57:15 · 576 阅读 · 0 评论