![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
三人行,必有我师!!!
三人行,必有我师!!!
展开
-
在vue或html中如何使用百度地图
【代码】在vue或html中如何使用百度地图。原创 2022-10-11 14:23:20 · 365 阅读 · 1 评论 -
js 获取今天后的第N天的具体日期
js 获取今天后的第N天的具体日期GetDateStr(AddDayCount) { let dd = new Date(); dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 let y = dd.getFullYear(); let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMont原创 2021-11-29 15:51:26 · 448 阅读 · 0 评论 -
[vue/no-parsing-error]Parsing error: control-character-in-input-stream.eslint-plugin-vue
问题背景:类似下图,标签明明闭合了,但是还是报红。解决问题:实际上代码写的没有错误, 比如用了element-ui 或者 iview 等框架后会发现vs-code有些地方会自动标出红色波浪线 ,其实是vuter的语法检查问题 , 只需要在setting.json中增加"vetur.validation.template": false设置方法:...原创 2021-09-11 23:21:25 · 807 阅读 · 0 评论 -
关于ES6的Promise
本文知识点摘自:https://www.cnblogs.com/lvdabao/p/es6-promise-1.html本文例子摘自:https://segmentfault.com/a/1190000016848192ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数?别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴原创 2021-08-13 14:55:23 · 138 阅读 · 0 评论 -
列表循环和条件判断
条件判断:一般都用v-show和v-ifv-show和v-if都是用来做条件渲染的使用方法:<div v-if="isShow">v-if显示/隐藏</div><div v-show="isShow">v-show显示/隐藏</div>区别 v-show: 控制DOM元素显示,其实控制的是css样式,也就是display:noe v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了 v-原创 2021-08-09 14:45:59 · 519 阅读 · 0 评论 -
v-show 和 v-if
v-show和v-if都是用来做条件渲染的使用方法:<div v-if="isShow">v-if显示/隐藏</div><div v-show="isShow">v-show显示/隐藏</div>区别 v-show: 控制DOM元素显示,其实控制的是css样式,也就是display:noe v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了 v-show初始会渲染dom,v-if如果是f.原创 2021-08-09 10:23:28 · 174 阅读 · 0 评论 -
vue样式绑定
css样式绑定和style内联样式绑定均可以绑定字符串,数组,对象代码:<template><!-- 样式绑定 --> <div class="base06"> <home-back></home-back> <h2 :class="classString">样式绑定 - class绑定字符串</h2> <h2 :class="classArr">原创 2021-08-06 18:04:15 · 98 阅读 · 0 评论 -
vue中的侦听器watch的使用,watch和computed的区别
watch侦听器的作用就是侦听一个data中的值的变化,变化后可以写一个方法,让其进行一些操作(业务逻辑的编写)。侦听器watch和计算属性computed的区别 计算属性computed必须要返回一个值,而且在页面渲染的同时就会执行里边的业务逻辑,也就是会先执行一遍你写的业务逻辑, watch只有发生变化时才会执行,也就是说值没有变化,它是不执行里边业务逻辑的。 watch监听的是一个变量的变化,...原创 2021-08-06 17:21:49 · 203 阅读 · 0 评论 -
vue中的计算属性computed
计算属性的特性:当计算属性依赖的内容发生改变时,才会重新执行计算。 若依赖的内容没有变化,则返回的是之前计算的结果,而不会再次执行函数,这 大大优化 了性能computed的使用:<div>总数:{{total}}</div> // computed 用法<div>总数:{{getTotal()}}</div>...原创 2021-08-06 16:51:05 · 311 阅读 · 0 评论 -
模板动态参数和指令修饰符
一:模板动态参数 默认写法:<div @click="onceFun()">once只触发一次回调</div><div :title="hoverTitle">title动态参数</div>动态参数写法:<div @[event]="onceFun()">click动态参数</div>// data中定义event:'click'<div :[hoverEve]="hoverTi...原创 2021-08-06 14:06:30 · 194 阅读 · 0 评论 -
插值表达式和指令 .self 和 .stop的区别 以及.capture
一:插值表达式{{xxx}}: 在模板中输出变量,在插值表达式中是可以写javascriptbiao表达式的,例如{{1+2}},但是不可以写语句。<!-- 插值表达式 --> <h2>插值表达式</h2> <div> <div>{{message}}</div> <div>{{message+'信息'}}</...原创 2021-08-06 11:00:04 · 658 阅读 · 0 评论 -
生命周期函数
生命周期:即在生命的某一个时刻,自动执行的函数vue的生命周期有: beforeCreate() 在实例创建之前,自动执行的函数 creater() 在实例创建之后,自动执行的函数 beforeMount() 在dom挂载之前,自动执行的函数 mounted() 在dom挂载完成之后,自动执行的函数 (在此之前都获取不到dom节点) beforeUpdate()在data中的数据有变化时,自动执行的函数 updated()在data中的...原创 2021-08-05 15:35:47 · 121 阅读 · 0 评论 -
vue 是什么?与其他框架对比?什么是MVVM?
一:vue是什么?vue是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层,不仅易于上手,1>还便于与第三方库或既有项目整合。2>另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。vue 框架的特点?* MVVM框架模式* 轻量级,灵活,容易上手* 数据驱动* 组件化(单文件组件)* ...原创 2021-08-03 10:08:41 · 724 阅读 · 0 评论 -
vue3项目创建流程
第一步:vue3 create 项目名称按键盘上下键可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了这里我现在手动选择配置,看个人项目需求空格键是选中与取消,A键是全选TypeScript 支持使用 TypeScript 书写源码Progressive Web App (PWA) Support PWA 支持。Router 支持 vue-router 。Vuex 支持 vuex 。CSS Pre-pr...原创 2021-08-02 15:33:07 · 339 阅读 · 0 评论 -
安装vue3
背景:已全局安装了vue2,现在想要安装vue31》新建一个存放vue3的文件夹2》打开这个文件夹的命令行3》安装npm install @vue/cli@3.7.0装好了之后,文件夹中有了node_modules文件夹4》 进入.bin文件夹 > 记得改个名字,因为全局的vue命令已经被vue2占用了,直接改个vue3检验安装是否成功安装vue-cli后,会在当前目录下有一个node_modules的文件夹。这也就是局部安装vu...转载 2021-08-02 14:57:01 · 641 阅读 · 0 评论 -
vue使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html举例:对于所有路由导航,简单地让页面滚动到顶部。scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}...原创 2021-03-16 11:05:08 · 299 阅读 · 0 评论 -
header实现渐隐渐现效果
使用场景如图:(刚开始是左箭头 ---》 下滑变header透明 ---》 下滑至一定高度,header出现)代码:<template> <div> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back">...原创 2021-03-16 10:07:02 · 208 阅读 · 0 评论 -
vue,城市选择组件
功能:有搜索功能 当前城市展示 热门城市 可以点击右侧字母,也可以滚动字母方便选择城市图示完整代码:文件目录:City.vue文件<template> <div> <city-header></city-header> <city-search :cities="cities"></city-search> <city-list :cities=".原创 2021-03-12 14:33:22 · 1100 阅读 · 0 评论 -
刷新页面,vuex丢失改变数据问题解决。
问题背景:公用数据使用vuex存储。默认name是“小杨”,使用vuex改变name="小白"。这时刷新页面,name又变成了“小杨”。问题解决:利用localStorage,类似cookie功能,做到本地存储。引申问题:当使用了localStorage时候,建议一定使用 try catch。因为在某些浏览器,当用户关闭了本地存储,或者使用了隐身模式,使用localStorage会抛出异常,程序整个就运行不了啦。...原创 2021-03-11 14:39:59 · 144 阅读 · 0 评论 -
关于vuex的使用,以及了解
state:所有的公用数据都放在state中。要想使用,直接调用state修改state:一:改变state中的数据,不能直接让组件修改,必须走流程:如果有异步操作或者复杂的同步操作,直接将操作放在actions中,组件先调用actions(使用dispath方法),然后调用mutations(使用commit方法)。mutations中放着一个一个的同步对state的修改。二:当没有任何的异步操作,操作非常简单,不是批量的数据操作时,可以略过调用actions 直接调用mutation...原创 2021-03-11 14:22:35 · 131 阅读 · 1 评论 -
css样式穿透<<< deep
问题背景:在vue中使用了第三方框架的样式,在本组件中改变样式并不能生效。解决问题:方案一:使用 /deep/方案二:使用 <<< 样式穿透原创 2021-03-05 14:32:56 · 389 阅读 · 0 评论 -
VUE使用动画效果
一:引入相应的css库文件,然后用transition标签包裹,加上相应的class即可二:网页开发就触发动画,加上appear属性,并加上相应的class即可三:同时使用过渡和动画。type设置动画时长,也可以自定义,使用 :duration="10000"。...原创 2021-03-03 16:47:15 · 167 阅读 · 1 评论 -
组件使用,小记
1,组件使用中,遇到浏览器不能正常解析代码时,使用is属性。(ul,select,ol,tabel 下的组件仍然使用 li,option,li,tr。但是使用is属性)2.组件使用中,子组件定义data的时候,必须是一个function,不能直接是一个对象或者数组。这样是问了,子组件重复调用时,数据之间不互相影响。...原创 2021-03-02 14:39:42 · 63 阅读 · 0 评论 -
VUE数组,对象修改,视图也同步更新的几种方法
BG:有时候会遇到,数组确实修改了,但是视图却没有更新的情况。解决:方案一:改变数组的指向,赋值为新数组this.array = this.array.filter(...)this.array = this.array.concat(...)方案二:利用数组的变异方法,更新数组,视图同步更新push()pop()shift()unshift()splice() sort()reverse()方案三:vue的set方法数组修改Vue.set(ar.原创 2021-03-02 13:59:58 · 1261 阅读 · 2 评论 -
点击按钮,不执行input的blur方法
场景vue点击按钮不触发输入框失去焦点事件之前在代码运行中发现 在给input添加失去焦点事件后(blur),点击返回按钮也触发了input失去焦点事件。解决方法:使用event.preventDefault();原创 2021-01-27 10:46:28 · 3551 阅读 · 0 评论 -
vue解决计算精度不准确问题
利用mathjs插件进行计算结果的处理1、cnpm安装mathjs(如果没装淘宝镜像,用npm安装)cnpm install --save-dev mathjs2、引入插件import * as math from 'mathjs'3、使用 mounted(){ console.log('未作处理',1.1*100) //110.000000000001 console.log('处理结果',this.prin原创 2021-01-07 18:01:42 · 4011 阅读 · 0 评论 -
el-input 按tab键 输不进去数字问题
<el-input type="number" v-model="child.percentage" style="width:126px" @input="changeInpur($event)" ></el-input> // 修改tab键,输不进去数字问题 changeInpur(e){ this.$forceUpdate() },el-input 按tab键 切换下一个。发现有输不进去值的问题..原创 2020-12-31 15:18:20 · 545 阅读 · 0 评论 -
上传文件
index.html<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script><div class="submitFile pr cf"> &.原创 2020-11-01 17:07:59 · 159 阅读 · 0 评论 -
vue打包字体文件路径错误的问题
转载自https://www.jianshu.com/p/458fe9cb3490根本原理请看:https://github.com/vuejs-templates/webpack/issues/166在我的项目中遇到的情形是:打包后,css里加载的font文件路径变成了:/static/css/static/fonts/element-icons.535877f.woff,而期望的应该是/static/fonts/element-icons.535877f.woff。修改方式:在build/.原创 2020-10-20 14:09:37 · 822 阅读 · 0 评论 -
数字千分位转换
/** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousand 是否需要千分位 0:不需要,1:需要(数值类型); * @return 格式的字符串,如'1,234,567.45' * @type String */ .原创 2020-09-23 14:20:41 · 1266 阅读 · 0 评论 -
解决input type=number的滚轮事件
<el-inputtype="number"@wheel.native.prevent="stopScrollFun($event)"v-model.number="child.percentage" ></el-input>// 解决谷歌火狐input[type=number]滚动事件 stopScrollFun(evt) { evt = evt || window.event; if(evt.pr...原创 2020-09-18 13:34:50 · 1876 阅读 · 0 评论 -
解决ios内嵌H5,用a标签 href跳转不起作用
问题场景:app内嵌H5,H5使用的vue开发,功能中有一个按钮点击跳转到第三方客服。ios点击打不开,安卓没有问题错误方式:<a href="baidu.com" v-if="contactShow" class="contactPutian" target="_blank" > <img src="@/assets/imgs/loan/putian/tel.png" alt=""> </a> 正确使用click原创 2020-08-27 18:19:43 · 5531 阅读 · 2 评论 -
vue 如何在新窗口打开页面
1. <router-link>标签实现新窗口打开:官方文档中说v-link指令已经被一个新的<router-link> 组件指令替代,这一部分的工作已经被 Vue 2 中的组件完成。注意:<router-link>不支持target="_blank",如果你想打开一个新标签页,你必须用<a>标签。但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a"),如下:...原创 2020-08-25 10:28:19 · 9512 阅读 · 2 评论 -
JS 使用 SHA1 加密示例
使用示例import { sha1 } from '@/support/plugin/sha1.js'sha1(sign_str)js代码 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.pu原创 2020-08-20 14:56:37 · 1309 阅读 · 1 评论 -
vue使用javascript动态创建script - vue动态引入外部js文件
// 创建script标签,引入外部文件let script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://xxx.xxx.js'document.getElementsByTagName('head')[0].appendChild(script)// 创建script标签,执行script内容let script = document.createElement.转载 2020-08-05 16:55:00 · 4883 阅读 · 1 评论 -
vue 使用keepalive watch不销毁,在其他页面也执行了
解决方案:https://cn.vuejs.org/v2/api/#vm-watch原创 2020-08-05 15:43:36 · 1797 阅读 · 1 评论 -
DatePicker选择日期后格式变成UTC
需求:DatePicker组件,选择日期后格式变成UTC,例如:选择的日期是2019-03-10,得到的结果却是2019-03-10T16:00:00.000Z,页面显示是Sat Mar 09 2019 00:00:00 GMT+0800 (中国标准时间) 解决方法:用on-change事件的返回值,给绑定的数据赋值。查文档可知道on-change的返回值是已经格式化后的日期,是我们想要的格式,在<template>中$event是on-change的返回值,所以直接用简易写法“birthda原创 2020-08-03 16:40:44 · 1330 阅读 · 1 评论 -
js 获取dom元素距离顶部的位置
document.getElementById('filter').getBoundingClientRect().top其他的都是垃圾原创 2020-07-31 10:43:19 · 11310 阅读 · 9 评论 -
H5页面,判断是在微信浏览器还是小程序 打开
// 判断是否在微信小程序中打开 var ua = window.navigator.userAgent.toLowerCase(); let that = this; if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //判断是否是微信环境 //微信环境下 wx.miniProgram.getEnv(function(res) { .原创 2020-07-22 15:42:33 · 3450 阅读 · 0 评论 -
上传图片并预览
<div class="faceimg"> <img :src="faceImg" alt=""> <input @change="xmTanUploadImg" id="uploadFile" type="file" accept="image/*" mutiple="mutiple" capture="camera"> </div>xmTanUploadImg(el){ var that = .原创 2020-07-21 15:17:14 · 106 阅读 · 0 评论