vue
文章平均质量分 54
avoidaily
当你凝视深渊,深渊也在凝视你
展开
-
遮罩层出现后不能滚动 添加事件@touchmove.prevent 移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行。-.self 只响应当前元素自身触发的事件,不会响应经过冒泡触发的事件,并不会阻止冒泡继续向外部触发。:是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件。:是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号。:是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式。转载 2023-03-08 13:53:50 · 1137 阅读 · 0 评论 -
史上最全flex兼容写法整理
justify-content-space-between 设置主轴元素均分且紧贴两边。align-content-between 与交叉轴两端对齐,轴线之间的间隔平均分布。justify-content-space-around 设置主轴元素均分。align-content-center 与交叉轴的中点对齐。align-content-start 与交叉轴的起点对齐。align-content-end 与交叉轴的终点对齐。align-items-center 设置侧轴居中对齐。转载 2023-02-16 16:43:46 · 690 阅读 · 0 评论 -
vue项目引入vant组件报错‘未注册’
报错:export ‘ActionSheet’ was not found in ‘vant’在vue项目中引入的vant组件,看了官方文档,版本已经更新到2.几了,但是我本地只有1.6几。在项目进行过程中很多组件都报错类似:"export ‘ActionSheet’ was not found in ‘vant’;查询到解决方式升级本地版本,升级命令:npm install vant@2...转载 2020-04-30 10:22:06 · 3170 阅读 · 0 评论 -
vue的三种传参方式
传参:页面式(html)标签路由跳转传参 ----- router-link(其实就是a标签)js编程式路由跳转 ----- this.$router.push() // params query路由组件传参 ----- 在路由配置中用分号拼接参数获取参数:this.$router.params ----- 搭配路由的name属性,参数作为路由的一部分,不会在ur...原创 2020-04-21 16:38:14 · 1770 阅读 · 0 评论 -
token和session的区别
一、session的状态保持及弊端当用户第一次通过浏览器使用用户名和密码访问服务器时,服务器会验证用户数据,验证成功后在服务器端写入session数据,向客户端浏览器返回sessionid,浏览器将sessionid保存在cookie中,当用户再次访问服务器时,会携带sessionid,服务器会拿着sessionid从数据库获取session数据,然后进行用户信息查询,查询到,就会将查询到的用户...转载 2020-04-16 15:35:08 · 513 阅读 · 0 评论 -
vue实例的四个生命周期(八个钩子函数)
一、session的状态保持及弊端当用户第一次通过浏览器,使用账号密码访问服务器时,服务器会验证用户数据,验证成功后会在服务器写入session数据(服务器端会存储用户的session数据),向客户端浏览器返回sessionid,浏览器将sessionid存储在cookie中。当用户再次访问服务器时,会携带sessionid发送请求,服务器会拿着sessionid从数据库获取session数据...转载 2020-04-16 13:11:08 · 1182 阅读 · 0 评论 -
vue前台实现编辑文字内容
textarea,但是需要考虑内容的不确定性,做textarea高度自适应。文本域高度随内容自动变化,不会出现滚动条,可以有多种方法,除了用js动态设置它的高度值以外还有其它更简单的方法推荐 div标签模拟textarea,将div的contenteditable属性设置成true,使内容可编辑,达到高度随内容变化的目的。contenteditable的兼容性很好<div conte...转载 2020-03-30 18:01:35 · 1849 阅读 · 0 评论 -
element+sortablejs插件实现拖拽排序效果
背景1、后台管理系统中表格需要实现行拖拽功能2、表格使用element组件库中el-table方案介绍Sortable.js介绍:Sortable.js是一款轻量级的拖放排序列表的js插件引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS ...原创 2020-03-05 14:34:56 · 1651 阅读 · 0 评论 -
vue事件修饰符(冒泡和默认行为)
<ul @click.self="handleUlClick()"> <!-- .self是事件源 是自己会触发 --> <li @click.stop="handleLiClick1()">事件冒泡-11</li> <li><a href="http://ww...转载 2020-03-03 11:32:26 · 744 阅读 · 0 评论 -
vue的生命周期
由此可见,当代码运行时,会一次调用Vue 的 beforeCreate、created、beforeMount、mounted 四个方法,直至完成组件的挂载。而update阶段,要在数据发生改变时(比如更新message字段 vm.message = ‘Hahahaha~’)才出发;destroy阶段,要在调用vm.$destroy()后才触发。...转载 2020-03-03 11:23:27 · 119 阅读 · 0 评论 -
vue-bus中央事件总线(兄弟组件之间传值)
1.作用:非父子组件(例如兄弟组件)之间传值的方式,可以用vuex,也可以用事件总线,已下是事件总线(vue-bus)的介绍:2、注册在main.js中注册import Vue from 'vue';import VueBus from 'vue-bus';//中央事件总线...Vue.use(VueBus);...3、使用A页面传递给B也页面:A页面中,触发了一个叫toB...转载 2020-03-03 11:15:13 · 878 阅读 · 0 评论 -
动态路由($router 和 $route的区别)
$router 和 $route的区别:router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router.push方法。eg:返回上一个历史history用$router.to(-1...原创 2020-03-03 10:54:21 · 296 阅读 · 0 评论 -
vue-app物理返回(安卓)键跳到指定页面
例如提交订单成功跳到了订单详情页面,再返回就又到了提交订单支付页面。我们需要返回到其他页面:1、挂载完成后,判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); win...转载 2020-03-03 10:24:26 · 1288 阅读 · 2 评论 -
vuex的使用总结
一、安装命令 npm install vuex二、在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store(); export defa...转载 2020-03-02 14:11:29 · 85 阅读 · 0 评论 -
vue的长按事件
touch事件touchstart 在屏幕上时触发touchend 离开屏幕时触发template:<div @touchstart="getTouchStart" @touchend="getTouchEnd">methodsmethods:{ getTouchStart(){ clearTimeout(sufu); sufu=setTimeout(fun...转载 2020-03-01 17:54:14 · 5135 阅读 · 0 评论 -
移动端长按文本选择复制
css:-webkit-user-select: none;可以限制长按复制兼容性:设置或检索是否允许用户选中文本。IE6-9不支持该属性,但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的...转载 2020-03-01 17:50:54 · 2577 阅读 · 0 评论 -
vue中用iframe嵌套页面(跳转第三方),点击返回实现真正的退回上一步功能
<iframe :src="`http:*****`" frameborder="0" scrolling="auto" width="100%" height="100%" style="overflow-y:scroll;"></iframe>原创 2020-02-09 14:26:23 · 4687 阅读 · 4 评论 -
Vue搭建环境时npm run dev,npm ERR! code ELIFECYCLE
报错如下npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! vue-manage-system@3.2.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsnpm ERR! Exit status 1npm ERR!npm ERR!...转载 2020-01-12 15:04:21 · 691 阅读 · 0 评论 -
原生Form表单提交方式
var idcard = result.data.data;var url = " 请求的地址"; var postForm = document.createElement("form");//表单对象 postForm.method = "post"; postForm.action = url; var timeInput = document.createElement("inp...转载 2020-01-10 16:52:49 · 2676 阅读 · 0 评论 -
vue项目请求‘第三方’接口
需求:请求后台接口,将返回数据丢到form表单,提交至第三方接口,即会跳转至支付页面首先请求后台接口:**.submint()**将form表单自动提交。(千万不)而不是另外写方法调用,这样不会跳转页面,返回数据是整个html页面。form表单...原创 2020-01-10 16:51:26 · 3868 阅读 · 0 评论 -
vue中使用代理解决前端跨域
如何用代理解决前端跨域我们知道同源策略只是在浏览器中存在,不存在于服务器中。因此我们可以将需要跨域请求的地址转发给我们自己的服务器然后委托服务器去请求信息。(常见的有nginx转发、node代理。)在vue项目中常用的是proxyTable,这个用起来很方便。打开config下面的index.js,找到proxyTable,添加以下代码即可:...转载 2020-01-10 16:41:01 · 630 阅读 · 0 评论 -
关于localStorage,Cookie的存取
1、localStorage登录时保存localStorage.setItem('token',res.data.token);组件调用localStorage.getItem('token')API获取键值对数量localStorage.length读取localStorage.getItem(‘name’), localStorage.key(i)添加/修改local...原创 2019-12-30 16:42:57 · 323 阅读 · 0 评论 -
vue项目的自动播放背景音乐
<template> <audio preload="auto" loop id="audio" :src="require('../../assets/mp3/214.mp3')"></audio> <div @click="changeOn" :class="isOff?'isOff':'isOn'"></div></te...转载 2019-12-27 18:13:48 · 9462 阅读 · 9 评论 -
vue项目的——TextScroll -- 文字滚动
效果展示:1:利用vue的列表过渡transition-group来进行动画渲染。滚动元素都是相对于滚动视口绝对定位,利用定时器循环更改当前显示索引,配合Vue的过渡属性,达到这种滚动效果。2:结构<div class="TextScroll"> <transition-group tag="ul" :name="scrollType"> <...转载 2019-12-25 15:44:09 · 2600 阅读 · 0 评论 -
在vue项目里使用jquery
1.NPM 安装 jQuery,项目根目录下运行以下代码npm install jquery --save2.webpack配置在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,var webpack = require('webpack')然后在module.exports中添加一段代码,...转载 2019-12-25 15:38:25 · 899 阅读 · 0 评论 -
vue项目keep-alive返回记住滚动条位置
需求:点击首页列表进入二级页面,返回的时候保持在原位置。1:App.vue<template> <div id="app"> <!--页面返回不刷新--> <!-- // 缓存组件跳转的页面 --> <keep-alive> <router-view...原创 2019-12-21 16:35:08 · 1875 阅读 · 1 评论 -
element-ui中el-select组件v-model绑定值为对象时的处理
编辑修改时,遇到数据回显的问题:显示文本,传参id。而v-model只有一个绑定变量。so…value-keyvalue-key用于显示文本传参转载 2019-12-20 16:30:52 · 10887 阅读 · 1 评论 -
vue项目style绑定background-image的方式和其他变量数据
就是有一些qipa,后期要求后台修改背景图行<div class="StudyIntegral" :style="{backgroundImage:'url(' + baseUrl+avatarUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', ...原创 2019-12-13 15:12:35 · 2332 阅读 · 0 评论 -
vue项目ios上input密码框无法输入值
原因:ios系统的bug,input的type为text后面跟的是password的时候,就不能主动呼出中文输入法。解决:页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式。(亲试有效)在password前面加一个text的input 并将其宽高设为0 不要用display:none或 visibili...原创 2019-12-09 19:06:20 · 1202 阅读 · 0 评论 -
vs code配置ftp连接远程服务器实现代码文自动上传
1.在vscode应用商店中搜索拓展sftp插件,然后进行安装。2.安装完成后重启窗口,按快捷键Ctrl+shift+p,输入sftp:config回车进入配置文件。3.修改配置文件如下:栗子:...转载 2019-12-06 10:55:41 · 5213 阅读 · 1 评论 -
v-touch插件:vue监听手指滑动vue-touch的使用
1. npm安装npm install vue-touch@next --save//main.js中引入:import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})2. 案例://html代码<template> <v-touch v-on:swipeleft="swiperlef...原创 2019-11-25 17:54:45 · 1838 阅读 · 0 评论 -
vue项目轮询 || setInterval()和setTimeout()区别
定义setTimeout():延时任务。在指定的毫秒数后调用函数或计算表达式,setInterval():定时任务。在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。setTimeout()只执行一次,而setInterval可以多次调用。栗子setInterval() 定时器this.timer = setInterval( ()=> {...原创 2019-12-04 10:49:44 · 2350 阅读 · 0 评论 -
下拉框禁止input弹出手机默认键盘的解决办法
1. readonly (推荐) 只读(尝试有效)<input type="text" name="www.xxx" readonly="readonly" />注意: readonly表示此域的值不可修改,仅可与 type=“text” 配合使用,可复制,可选择,可以接收焦点,后台会接收到传值2. 用一个p/div等标签显示内容;然后放一个隐藏的input;如果你想着用di...转载 2019-11-27 11:57:04 · 1687 阅读 · 0 评论 -
vue项目实现点击图片放大预览
vue-photo-preview插件1、运行npm install vue-photo-preview --save2、main.js引用import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)3、在html中使用// 直接设置preview ...原创 2019-11-13 16:29:15 · 7230 阅读 · 4 评论 -
vue全面自动化构建利用webpack和vue-cli脚手架创建项目完整版
vue 的轮播图swiper vue-awesome-swiper第一步:安装node node -v查看node版本 npm -v 查看npm版本(顺便安装淘宝镜像) cls清空命令行第二步(注意第二步可以被第三步代替安装webpack.意思是只装vue-cli会自带webpack):安装webpack 最好问下用哪个版本 npm(或cnpm) install webp...转载 2019-11-13 12:23:29 · 401 阅读 · 0 评论 -
vue防重复点击(指令实现)
https://www.cnblogs.com/adbg/p/11271237.html快速点击按钮会重复多次调用接口,防止出现这样的情况全局定义,方便调用新建plugins.jsexport default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick', { insert...转载 2019-10-31 15:33:44 · 5028 阅读 · 3 评论 -
NavBar左侧导航栏与右侧内容的分别上下滚动条
百度了很多关于设置滚动条的方法,不知道是不是组件问题,都没有效果,身心疲惫。。。想着再操作一次,就晾一晾它冷静了再做的,结果!!!!!不说了,关门,放代码!(代码没有放全,主要是看布局记录滚动条的设置)(by the way…似乎还有点小小的bug…小声bb…) <!-- 商品 左+右 --> <div class="page-navbar">...原创 2019-06-27 11:06:47 · 2741 阅读 · 0 评论 -
vue的数据是v-for循环出来的,如何点击当前,给到变色效果(动态绑定CSS样式)
小demo,仅作记忆使用。emm…结构问题,有点吃藕’template:<div class="con"> <ul class="con-list"> <li class="con-item" v-for="(item,index) in list" :key="index" @click="son(item,index)" :class='index=...原创 2019-07-13 17:58:24 · 4033 阅读 · 0 评论 -
vue中接口域名配置为全局变量的实现方法
1:src中新建 一个 domain.js文件const domain = ‘http://bowensi.xiaoniren.cn/’;export default {testUrl:domain}2:main.js中import domain from ‘./domain.js’;global.domain = domain;3:组件中:data () {return {...转载 2019-09-17 10:07:06 · 1098 阅读 · 0 评论 -
vue案例:实现自定义单选多选的答题功能
https://www.cnblogs.com/padding1015/p/9265985.html转载 2019-09-17 10:09:35 · 2494 阅读 · 0 评论