前端-VUE
黎成诃月
不辜负每一份热情,不讨好任何冷漠。
展开
-
vue 导出 excel文件
vue 导出excel文件import { downloadBinary } from '@/utils/index'import axios from 'axios'// 导出文件xlsexport function downloadBinary(data, fileName="table.xls") { let blob = data; const reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base6.原创 2020-08-21 11:14:57 · 282 阅读 · 0 评论 -
vue多列表传参跳转相应的详情页
//列表一模板 <div class="NewsList"> <ul> <li v-for="(item,index) in newList" :key=index> <div class="newsImg" @click="more(item.path,index+1)&quo原创 2018-11-22 14:19:40 · 4503 阅读 · 2 评论 -
router切换页面的时候滚动条怎样自动滚动到顶部
// router/index.isconst router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 return { x: 0, y: 0 } }})...原创 2018-11-22 18:18:58 · 896 阅读 · 0 评论 -
如何解决vue项目打包之后出现空白页
1.用浏览器打开html文件,很糟糕出现了空白页2.然后我们查看控制台报错信息,我们知道是html页并没有成功引入打包后的项目文件 Failed to load resource: net::ERR_FILE_NOT_FOUND3.config/index.js 46行 --- assetsPublicPath: './', 26行 --- autoOpenBrowser: tru...原创 2018-11-20 13:52:58 · 4165 阅读 · 4 评论 -
Vue框架中添加百度地图组件,及信息窗的配置信息
1.申请百度地图密钥2.在index.html中添加百度地图JavaScript API接口<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密钥=&t=20170517145936"></script>3.在webpack.base.co...原创 2018-11-28 15:03:30 · 3072 阅读 · 0 评论 -
vue项目使用百度地图插件,标记店铺分店坐标
<template> <div id="Map"> <div id="allmap" class="allmap" ref="myMap"></div> </div></template><script>原创 2018-11-29 11:43:16 · 2386 阅读 · 0 评论 -
Vue轮播图插件实现轮播,及Vue-awesome-swiper使用方法
安装设置1.安装Install vue-awesome-swipernpm install vue-awesome-swiper --save2.怎样使用?①全局导入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'; //挂载VueAwesomeSwiper/* 样式的话,我这里有用到分页器...原创 2018-11-28 14:59:46 · 2936 阅读 · 0 评论 -
Mint-UI msg提示框封装
Mint-UI msg提示框封装 import {MessageBox, Toast} from 'Mint-ui' const msg = (msg) => { Toast({ message: msg, position: 'bottom', duration: 2000 }) } 调用: msg('保存成功') ...原创 2018-12-24 14:31:06 · 504 阅读 · 0 评论 -
vue项目中,实现微信分享
/* 微信分享 */Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿!', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'https://www.abc.cn/images/share_logo.jp...原创 2018-12-24 17:55:39 · 1804 阅读 · 3 评论 -
vue 多行文本展开收起
<template> <div> <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :title="introduce" ref="desc">原创 2019-01-04 23:11:28 · 1197 阅读 · 0 评论 -
vue项目 文本复制插件
// 第一步 // cnpm install vue-clipboard2 --save// main.js引入// import VueClipboard from 'vue-clipboard2'// Vue.use(VueClipboard)<template> <div> <div class="wxsmallcode-page publ...原创 2019-02-19 14:43:03 · 814 阅读 · 0 评论 -
ios 键盘弹起触点错误
问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题;一旦超出屏幕范围,当你点击输入框,弹出键盘时,底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现,在安卓端会出现,原因是键盘加载方式不一样,这里不作详情解答。解决方案:在键盘弹起时,页面高度变小,底部固定定位上升,所以我们只...转载 2019-05-05 16:39:36 · 257 阅读 · 0 评论 -
element- swtich开关按钮,显示隐藏数据
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/i原创 2018-08-23 17:33:26 · 2610 阅读 · 0 评论 -
Vue 父组件向子组件传值
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 父组件向子组件传值</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"&原创 2018-08-22 14:48:42 · 391 阅读 · 0 评论 -
vue项目中当网站内容不足一屏时footer如何紧贴底部
created () {// this.footerAuto(); $(function() { footerAuto(); }) function footerAuto() { var _wh = $(window).height(); var _dh = $(document).height...原创 2018-04-10 18:08:01 · 2717 阅读 · 0 评论 -
vue项目中,扫码登录二维码实时更新
<div id='code'></div>mounted () { //二維碼 var timestamp = Date.parse(new Date()); $("#code").qrcode({ render: "table", //table方式 width: 100, //宽度 height:100, //高度 text...原创 2018-04-10 18:12:37 · 5401 阅读 · 0 评论 -
vue2.0动画,vue2.0路由
vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade"></p>.fade-transition{}.fade-enter{}.fade-leave{}--------------------------------------到2.0以后 transitio...原创 2018-05-09 09:46:13 · 180 阅读 · 0 评论 -
vue2.0 router路由实例
html:<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <原创 2018-05-09 18:42:09 · 242 阅读 · 0 评论 -
element-ui -> pc端ui库 mint-ui -> 移动端ui库
elementUI: 如何使用 官网:http://element.eleme.io/使用:1. 安装 element-ui npm i element-ui -D npm install element-ui --save-dev // i -> install // D -> --save-dev // S -> --save2. 引入 ...原创 2018-05-10 09:50:13 · 7221 阅读 · 0 评论 -
VUE表单demo v-model双向绑定
<div id="app"> <textarea v-model = "message" placeholer = '请在此输入文字'></textarea> <span>{{message}}</span> </br> <input type="原创 2018-06-29 11:27:33 · 287 阅读 · 0 评论 -
vue数据操作 num加减点击事件
<div id="app"> <button v-on:click="add(10)">click me</button> <button v-on:click="remove(5)">click me</button> <button v-on:click="n原创 2018-06-29 12:28:19 · 3490 阅读 · 0 评论 -
vue.js删除列表中的一行
<div class="check-list"> <ul> <li v-for="(item,index) in goodsList"> <div class="top fl" > &a原创 2018-06-29 18:09:54 · 4422 阅读 · 0 评论 -
Vue之实例的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例特别值得注意的是c...翻译 2018-07-09 15:42:18 · 151 阅读 · 0 评论 -
vue列表渲染 index索引
<div id="app"> <div class="main"> <div class="check-header">选择三门课程,减免三门中单价最低课程价格</div> <div class="check-list"> &原创 2018-06-28 14:43:13 · 5107 阅读 · 0 评论 -
vue 默认错误图片展示 :onerror=""; 是否全部,三免一还是暑求
<img class="pic-img" :src="item.path" alt='' :onerror="defaultImg">data() { return { sanmian: './static/images/sanmian.png', shuqiu: './static/images/shuqiu.png', allStatus: './sta...原创 2018-07-13 12:14:24 · 8393 阅读 · 0 评论 -
三种方式打开命令行窗口
1.按住Shift键右击鼠标打开命令行窗口2.任意文件夹打开拖拽。cd +路径3.当前文件夹输入cmd 进入命令窗口原创 2018-02-20 19:03:18 · 10583 阅读 · 0 评论