![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
haeasringnar
这个作者很懒,什么都没留下…
展开
-
Vue 后台管理项目中使用keep-alive防止也没每次打开都重载,影响使用体验
1、修改AppMain.vue将 加载组件的地方,使用keep-alive包含起来......<keep-alive> <router-view/></keep-alive>......2、修改具体的业务代码假设有一个用户管理的页面,修改该页面里面的代码。在使用keep-alive 时created():不会在每次进入页面时执行,而是只执...原创 2020-03-31 21:28:24 · 1133 阅读 · 0 评论 -
vue-element-template 后台管理设置超时自动退出登录
简单实现,修改app.vue文件即可<template> <div id="app" @click="clicked"> <router-view/> </div></template><script>export default { name: 'App', data (){ re...原创 2019-12-10 14:26:18 · 1958 阅读 · 2 评论 -
Vue 将打包后的静态文件上传至阿里云oss
1、配置config目录下的index.js注意 assetsSubDirectory 不要和原来的冲突build: { ..... assetsSubDirectory: 'test-static', oss_publicPath: 'your publicPath', oss_accessKeyId: 'your key', oss_accessKe...原创 2019-11-04 10:10:48 · 4051 阅读 · 1 评论 -
vue-cropper 写一个支持图片剪裁的上传组件
1、组件完整代码如下<template> <div> <el-upload :action="action_url" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-uplo...原创 2019-10-27 14:53:43 · 1043 阅读 · 0 评论 -
vue 使用element 对话框显示地图插件 首次加载不显示 解决方案
在element对话框中使用地图插件时,会出现首次不会加载成功,这时使用$nextTick初始化地图插件即可代码如下<template> <div class="app-container"> <el-row> <el-col :span="24"> <el-b...原创 2019-03-27 15:56:19 · 4465 阅读 · 3 评论 -
关于H5的一些杂项记录
一、div内显示一行,超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;二、div内显示两行或三行,超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(...原创 2019-02-25 10:46:05 · 204 阅读 · 0 评论 -
vue兼容IE 360
vue2.x 兼容IE 3601. 解决不显示内容在 index.html 添加下面内容<meta http-equiv="X-UA-Compatible" content="IE=edge">2. 语法不支持如果出现语法不支持,那么使用 babel-polyfill 解决:下载安装 babel-polyfill :npm install babel-polyfill ...原创 2019-01-09 14:14:21 · 827 阅读 · 1 评论 -
vue 使用tinymce富文本编辑器,以及前后端富文本内容存储&展示处理方法推荐
1、安装相关插件npm install tinymce1、为什么安装这个?因为@tinymce/tinymce-vue是收费版本,需要key才能使用,所以我们需要使用 tinymce 封装一个来自己使用。2、安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下3、tinymce 默认是英文界面,所以还需要下...原创 2019-01-11 10:34:25 · 19071 阅读 · 9 评论 -
vue 使用swiper轮播图,自动轮播时鼠标移入暂停,鼠标移出再次播放,并给出多个轮播的处理方法以及后台获取数据时无法循环轮播解决方案
1、安装 vue-awesome-swiper使用vue开发界面时,很多时候需要用到轮播图,有的时候需要在一个页面中使用多个轮播图,这个时候就需要用到单独的,鼠标移入暂停自动轮播,鼠标移出再次自动轮播。npm install vue-awesome-swiper2、代码部分<template> <div class="icontent"> ...原创 2019-01-11 10:04:34 · 14732 阅读 · 11 评论 -
vue jq实现鼠标拖动
<template> <div class="icontent"> <div class="my-gaofen-tab-content"> <div class="my-gaofen-tab"> <ul id="pic">原创 2018-12-18 14:58:30 · 912 阅读 · 0 评论 -
Vue Element-UI Table点击某一行,将该行背景色改变 高亮点击的行
1、先开启element的高亮选项开启 highlight-current-row <el-table :data="page_datas" border stripe highlight-current-row # 开启element table 行高亮选项 style="width: 100%"> <el-table-col...原创 2019-04-11 14:30:53 · 18349 阅读 · 9 评论 -
vue 使用高德地图点击标记点以及经纬度转地理位置
1、在index.html这种引入高德地图<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=your key"></script> 2、在webpack.base.conf.js 代码最后面引入externals: { 'AMap': 'AMap...原创 2019-03-29 09:34:45 · 7542 阅读 · 0 评论 -
vue 中下载图片
downloadIamge(imgsrc, name) { var image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { var canvas = document.createElement('canvas') canvas.widt...原创 2019-04-29 21:39:21 · 2037 阅读 · 0 评论 -
Vue 微信开发,微信内H5静默获取code、openid
<template> <div class="icontent"> <template v-if="token"> <div>登录成功!</div> </template> <template> <div>登录中...</...原创 2019-04-29 21:48:44 · 4313 阅读 · 0 评论 -
Vue 微信开发,微信内H5调起微信支付
<template> <div class="icontent"> <h3 style="text-align: center;">订单详情</h3> <div class="my-item-content"> <div style="text-align: cente...原创 2019-04-29 21:50:58 · 3229 阅读 · 2 评论 -
Vue 分页组件化
组件代码<template> <div :class="{'hidden':hidden}" > <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layo...原创 2019-05-25 09:45:30 · 361 阅读 · 0 评论 -
Vue 支持双绑的搜索组件
组件代码:<template> <div :class="{'hidden':hidden}"> <el-input :placeholder="placeholder" v-model="new_search" size="small" clearable @input="to_input"...原创 2019-05-25 09:46:21 · 131 阅读 · 0 评论 -
Django Vue实现动态菜单、动态权限
随着前后端分离架构的流行,在 web 应用中,RESTful API 几乎已经成为了开发者主要选择,它使得客户端和服务端不需要保存对方的详细信息,也就是无状态性,但是这样在项目中需要动态菜单和动态权限就困难起来,本场Chat就是为大家提供一种思路来解决实际项目中如何实现动态菜单和权限。因为 RESTful API 通常是无状态性,服务器怎么样才能知道用户已经登录呢?这个时候常用的做法就是每个请求...原创 2019-07-27 22:30:42 · 4667 阅读 · 5 评论 -
基于websocket的点对点实时通讯项目
最近夜晚有些时间,就根据自己的理解写了一个简易的网页版QQ,可以实现实时点对点通讯、添加好友等功能。主要使用到的技术就是websocket,普通的请求依然使用web服务完成本项目你需要的技能包括:Python、Nodejs、VUE、MySQLweb端服务由基于django的项目提供websocket服务由nodejs提供前端部分由vue项目提供先来看看项目演示gif吧…1、点对点实时...原创 2018-12-21 21:04:55 · 1317 阅读 · 0 评论 -
vue需要使用全球地图解决方案 mapbox的使用
1、提前在mapbox官网申请好keymapbox2、安装mapboxnpm install mapbox-gl2、新建测试vue进行测试<template> <div style="height:500px;width:100%;text-align:left;"> <div ref="basicMapbox" style="height:5...原创 2018-12-09 21:19:16 · 5702 阅读 · 3 评论 -
vue 中定时器的使用全解
1、vue使用定时器在vue中使用定时器,很多情况下,进入和退出vue界面,都没有清除定时器,从而导致有很多定时器一起工作,这样肯定是不行的,接下来就使用当用户进入界面时启用定时器,当用户离开当前界面时就清除定时器。2、代码实现<template></template><script> import store from '@/store'...原创 2018-12-13 09:15:22 · 30716 阅读 · 1 评论 -
django+vue打造前后端分离的项目时,跨域问题的解决!
1、首先你要先安装django-cors-headers 这个包pip install django-cors-headers2、配置settings.py安装appINSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes...原创 2018-06-30 17:42:37 · 11184 阅读 · 3 评论 -
使用hbuilder打包vue成安卓安装包时设置状态栏沉浸
主要配置manifest.json里面的两个位置即可 注意在配置的时候要选择代码视图进行配置,配置好了打包发布就可以了! 详情看图 1、 2、 下面是代码描述: 修改1:在plus下面添加如下代码"plus": { "statusbar": { "immersed": true // 这个是将状态栏设置成 沉浸 },...原创 2018-07-30 19:52:35 · 6210 阅读 · 2 评论 -
vue动态设置img的src路径
相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法。 看代码: 使用导入资源的方式<template> <div @click="home"> <img :src="home_url" a...原创 2018-07-30 22:00:45 · 76416 阅读 · 3 评论 -
vue2.x接入高德开发平台爬坑指南
有些时候web开发者们可能要在页面中接入地图定位,本文就是旨在解决这一问题,主要解决的是使用vue技术开发移动端时,要接入高德地图需要注意的坑,以及最有效的填坑指南。 我们都知道html5虽然可以获取地理位置信息,但是有时候会有问题,你并不一定每次都能成功定位。 因此使用高德官方提供的webapi接口,你接入之后,肯定会遇到,今天能定位了,突然明天又不行了,在自己的手机上可以在别人手机上又不行...原创 2018-08-05 15:08:23 · 6005 阅读 · 1 评论 -
vue2.x 使用event返回当前点击事件的对象(主要应用在循环出来的dom元素设置点击时,返回当前被点击的dom对象)
我的需求:点击div时就将我点击的这个div里面的button显示出来,再次点击就隐藏 首先看看循环出来的HTML代码模块<div class="lession" v-for="data in course_data.lessions" @click="showbutton(data.teachers,$event)"> <div class="ltitle">原创 2018-08-07 09:51:31 · 5236 阅读 · 0 评论 -
vue 定制上传按钮的样式的两种方法
1、铜通过纯html css实现 html代码<div class="file-upload"> <div class="file-upload-text">Add 新增</div> <input name="upfile" class="file-upload-input" id="upfile&q原创 2018-09-04 09:18:45 · 11727 阅读 · 0 评论 -
vue使用百度地图、高德地图引入报错的解决方法
在build目录下的webpack.base.conf.js文件最后添加一下语句node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). ...原创 2018-09-01 17:49:23 · 8499 阅读 · 0 评论 -
纯css实现input获得焦点边框变色、div被点击变色
写的一个简单的vue登录界面 先来看看实现的效果:(这里按钮登录div被点击会变色) 然后来看看代码实现<template> <div class="icontent"> <div class="logincontent"> <h3>师生互动-登录</h3>原创 2018-08-30 14:58:11 · 41128 阅读 · 3 评论 -
vue 实现长按弹出删除框,并解决浏览器默认事件、取消冒泡事件
1、先来看看vue怎么取消默认浏览器事件的(1)vue取消冒泡事件<--! 将@click改为@click.stop即可 --><p @click.stop="test($event)">测试</p>(2)vue取消浏览器默认事件<p @click.prevent="test($event)">测试</p>原创 2018-09-05 11:17:32 · 10360 阅读 · 0 评论 -
vue 监听路由刷新跳转,根据是否登录设置路由规则
在vue项目中,一个可行的路由规则很重要,它决定着用户是否有权限进入的路由,已经某些路由在刷新时要跳转等等 这部分代码是使用vue全家桶之一的router完成的,下面看具体实例const whiteList = ['/login'] // 路由白名单,不需要登录的路由放在这里面router.beforeEach((to,from,next) => { // 监听路由刷新进行...原创 2018-09-08 16:08:14 · 6977 阅读 · 0 评论 -
vue html jq 实现上传图片显示在页面上预览
1、html代码<img src="" alt="" id="myimg"><input type="file" name="fileToUpload" id="fileToUpload" @change='changeimage($event)'>注意这里面定义的方法changeimage2、script代码写在m原创 2018-09-03 17:15:28 · 6202 阅读 · 1 评论 -
vue2.x集成 swiper轮播图详细教程
1、安装 vue-awesome-swipernpm install vue-awesome-swiper --save2、使用 vue-awesome-swiperhtml代码部分<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <sw...原创 2018-09-20 10:51:03 · 4135 阅读 · 0 评论 -
vue使用localStorage保存登录信息,适用于移动端、pc端
众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用cookies或者session保存登录的token,在手机端无法保存,每次打开app依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下1、vuex stroe代码index.jsimport Vue from 'v...原创 2018-10-02 11:48:24 · 12450 阅读 · 1 评论 -
vue 局部刷新某个data元素
<template><div class="icontent"> <div class="one_question" v-for="question in question_datas"> <div v-for="u_answer in question.answer_detail"> <原创 2018-10-21 12:51:06 · 5492 阅读 · 0 评论 -
基于djang、vue、scrapy-redis、高德地图的豆瓣租房租房信息爬取、存储、可视化综合项目
1、scrapy-redis部分这里主要是用分布式爬虫爬取所有的豆瓣租房信息,然后去重、存数据库(MySQL)。使用分布式的好处是爬取快,可以分布在多台机器上爬取;然后redis可以结合django使用,做到在前台点击一下按钮就可以更新redis键值,从而使scrapy-redis继续爬取最新租房信息。具体代码见码云。2、django部分这里主要是处理数据的,将存好的数据有序的传递到vue前...原创 2018-10-31 22:03:40 · 1110 阅读 · 0 评论 -
vue 集成bootstrap使用
1、编辑webpack.base.conf.js文件增加webpack:var webpack = require('webpack')增加Jquery:plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],修改后的文件:'use strict'...原创 2018-11-27 10:28:52 · 2322 阅读 · 0 评论 -
vue 验证码界面 点击后标灰并设置div按钮不可点击状态
1、先看看效果图未点击获取验证码的按钮状态点击后的不可点击状态2、代码实现<template> <div class="my-code"> <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captch原创 2018-12-13 09:07:20 · 18878 阅读 · 6 评论 -
一文带你走进Vue.js
v-on事件绑定(可以简写为@)例://绑定点击事件<button type="button" name="button" v-on:click="increase">Increase</button>//绑定鼠标在里面移动事件<p v-on:mousemove="updateCoordinates"></p&原创 2018-03-05 09:40:44 · 4463 阅读 · 0 评论