vue
lancnn
去自己想去的方向,去完成不论大小的梦想,生活随遇而安。
展开
-
vue-cli3项目浏览器兼容问题,在低版本系统中白屏
vue-cli3项目浏览器兼容问题,在低版本系统中白屏vue-cli3 中自带 babel-polyfill ,会将es6语法转化成es5 语法。但是如果依赖中有es6, polyfill是不能检测出来的。官网解释:处理办法:如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。比如我新加的依赖为swiper, 在 vue.confi原创 2021-12-02 17:27:33 · 2869 阅读 · 0 评论 -
vue-typescript-admin-template 项目开发 保持Vuex持久化的方法
vue-typescript-admin-template项目开发保持Vuex持久化的方法当它没有初始状态并且您从 localStorage 加载状态时:修改store 文件下model@Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })如果您想保留状态,例如从 vuex-persist 加载状态时:@Module({ dynamic:原创 2021-12-03 22:36:17 · 880 阅读 · 0 评论 -
vue 中使用v-html 和 字符串 replace() 方法实现关键词高亮显示
预实现效果,如图:html(主要部分):<div v-html="setKeyWord(content)" class="content-box"></div>js (主要部分):setKeyWord (str) { const reg = new RegExp(this.keyWord, 'g'); return str.replace(reg, `<span style="color: red;">${this.keyWord}&l原创 2021-01-15 17:43:15 · 3125 阅读 · 0 评论 -
vue项目性能优化之——Object.freeze()
如果你有一个巨大的数组或Object,并且确信数据不会修改,通过 Object.freeze 方法来冻结一个对象,可以让性能大幅提升。Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。在vue中的data或者vuex里使用Object.原创 2020-07-17 17:25:27 · 2174 阅读 · 0 评论 -
vue项目性能优化实践
v-for 遍历避免同时使用 v-ifv-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度。一般我们实现一个列表循环,并且有条件的显示一些内容,如下: <ul> <li v-for="elem in elemArray" :key="elem.key" v-if='elem.show'> {{elem.name}} </li> </ul>优化 <ul> <li v-原创 2020-07-17 14:42:29 · 220 阅读 · 0 评论 -
element-ui中的Select选择器中remote-method方法带自定义参数
预期实现:在使用element-ui的select选择器的远程搜索的时候 ,需要remote-method这个方法添加自定义参数代码::remote-method="(query)=>{remoteMethod(query,'自定义参数')}"原创 2020-07-14 11:41:29 · 17209 阅读 · 0 评论 -
vue的自定义指令动态参数
1. 通过自定义指令中的修饰符的key作为值,更改显示的颜色动态指令参数当参数是动态的时候。main.js//当参数的值是动态的时候Vue.directive('color2', { bind: function(el, binding) { el.style.color = binding.value; }})Vue.directive('color3', { bind: function(el, binding) { el.style.color = bin原创 2020-07-03 16:50:23 · 4758 阅读 · 0 评论 -
vue根据不同的环境使用不同的接口地址
vue根据不同的环境使用不同的接口地址1. 在根目录下新建一个js文件夹。目录结构如下:2. 新建setBaseUrl.js文件在js文件夹下添加setBaseUrl.js文件,内容如下:let baseUrl = "";let allUrls = {};let nodeEnv = process.env.NODE_ENV;switch (nodeEnv) { case 'development': baseUrl = 'http://192.168.161.186:8080/原创 2020-06-30 13:42:41 · 1479 阅读 · 0 评论 -
vue + canvas 截取视频的预览图
vue + canvas 截取视频的预览图在页面中加载太多的视频,会造成页面加载慢,所以在显示视频的地方显示视频的预览图。用vue 和 canvas 截取视频的预览图。demo:<template><div id="demo"> <div class="video-wrapper" :style='videoBgStyle(item)' v-for="(i...原创 2020-03-13 22:54:46 · 4810 阅读 · 2 评论 -
vue + 高德地图路径规划的demo
vue+ 高德地图路径规划的demo官方文档说明位置经纬度+ 驾车路线规划 高德地图官方参考链接demo:<template> <div id="demo"> <el-amap vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo"> ...原创 2020-03-13 18:32:23 · 3418 阅读 · 6 评论 -
vue-amap中添加高德地图地图的自定义样式
vue-amap中添加高德地图地图的自定义样式高德地图的自定义样式列表:使用: amap://styles/+ 样式的名称如: 使用标准颜色amap://styles/normal依次类推标准normal幻影黑dark月光银light远山黛whitesmoke草色青fresh雅士灰grey涂鸦graffiti马卡龙maca...原创 2019-08-20 13:53:40 · 32371 阅读 · 20 评论 -
vue生产环境和开发环境配置不同的api地址
vue生产环境和开发环境配置不同的api地址用vue-cli构建的项目中,有两个文件是用来区分生产环境和开发环境的。 /config/dev.env.js /config/prod.env.js在main.js中可以得到当前的开发环境:var env = process.env.NODE_ENV;所以根据不同的环境配置不同的api,其中我有两个存放不同api地址的jso...原创 2019-07-25 18:33:37 · 3741 阅读 · 0 评论 -
vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址
vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同的API地址。用vue-cli2打包的vue项目中可以根据更改配置文件,达到我们想要的效果。1 . 更改package.josn文件在package.json文件的script文件下添加"tes...原创 2019-07-29 23:21:35 · 5229 阅读 · 0 评论 -
解决vue的eslint代码规范中,因function前少一个空格的问题
解决vue的eslint代码规范中,因function前少一个空格的问题如下问题✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parenthesessrc/components/login/login.vue:16:10mounted() {}解决办法...原创 2019-05-11 21:35:49 · 14884 阅读 · 5 评论 -
vue创建的项目如何在手机上调试
vue创建的项目如何在手机上调试手机和电脑要在同一个网络下。找到电脑的IPv4地址地址。我的电脑是mac,打开系统偏好设置——>网络——>高级——>TCP/IP——>IPv4地址。然后去vue的项目下,修改config文件下的index.js文件。将host更改为电脑的IPv4地址。(例如我的IPV4地址是:192.168.43.126)然后在手机的浏览器上打开...原创 2019-05-11 14:03:48 · 3108 阅读 · 0 评论 -
vue数据不更新的原因(vue中数据更改了,但是视图没有更新)
vue数据不更新的原因(vue中数据更改了,但是视图没有更新) 参考链接templete:&lt;div id="app"&gt; &lt;h2&gt;{{dataObj.text}}&lt;/h2&gt;&lt;/div&gt;js:new Vue({ el: '#app',原创 2018-09-21 10:13:27 · 159514 阅读 · 16 评论 -
vue中父子组件之间的通信
vue中父子组件之间的通信1. 父组件向子组件传值父组件向子组件传值,通过props传递parent.vue:父组件向子组件传递一个a值,子组件通过props接受<template lang="html"> <div class=""> <h1>这是父组件</h1> <children :a='a'>原创 2018-09-21 10:27:48 · 298 阅读 · 1 评论 -
基于vue的modal实现(仿monday.com的modal)
基于vue的modal实现(仿monday.com的modal)写modal要有一个父组件,一个子组件。父组件中点击打开modal,子组件中关闭nodal.这里通过v-if来实现modal的打开和关闭。父组件 mondayModal.vue<template> <div class="mondayModal"> <h4>{{txt}}<...原创 2018-09-21 10:30:49 · 1325 阅读 · 0 评论 -
在vue中引入bootstrap和jquery
在vue中引入bootstrap和jquery1. 修改build文件下的webpack.base.config.jsalias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': path.resolve(__dirname, '../src/assets'), 'j...原创 2018-09-21 10:32:40 · 1038 阅读 · 0 评论 -
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件。1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中import './style/reset.css'我引入的是清除默认样式的css文件2. 局部引入<style scoped> @import '../assets/ico......原创 2018-09-21 10:33:11 · 88101 阅读 · 5 评论 -
vue监听路由的变化
vue监听路由的变化watch: { $route(to, from){ console.log(to, from) }}to , from 分别表示从哪跳转到哪,都是一个对象to.path ( 表示的是要跳转到的路由的地址 eg: /home );...原创 2018-09-21 10:33:50 · 3280 阅读 · 0 评论 -
解决vue项目中的因为书写规范而报的错
解决vue项目中的因为书写规范而报的错用vue-cli脚手架起一个项目的时候,默认安装了eslint-loader模块,eslint-loader模块是目前相对比较流行的代码检测工具,可以检测书写的代码是否符合统一规范,可以在一些比较大型的项目开发中统一开发人员的代码风格,这也就是为什么代码缩进有可能导致页面报错的原因(代码缩进不符合规范)。在下次用vue-cli脚手架起一个项目的时候,可以不...原创 2018-09-21 10:34:54 · 1577 阅读 · 0 评论 -
在vue中引入阿里的字体图标
在vue中引入阿里的字体图标1. 进入iconfont 的官网,下载需要的图标到本地2. 解压之后,将iconfont.css 和字体文件放到项目中3. 全局引入iconfont.css,在main.js中引入import './assets/iconfont/iconfont.css'4. 在组件中使用阿里的字体图标<i class="iconfont icon-mima...原创 2018-09-28 09:22:21 · 5922 阅读 · 1 评论 -
vue中的小技巧
vue中的小技巧1 . <router-link to='/citylist' tag='p'>获取城市列表</router-link>router-link 路由中的tag属性,可以将显示路由的标签渲染成任意标签形式。如:渲染成button的形式<router-link tag='button' to='/'></router-link>...原创 2018-09-28 09:23:49 · 217 阅读 · 0 评论 -
vue中的自定义属性并获得属性的值
vue中的自定义属性并获得属性的值例如:data-radius语法: data-属性vue:<div @mouseover='changeRadius($event)' @mouseout='changeRadius(false)' @click='setlocation($event)'> <div data-radius='100'>100m...原创 2018-09-28 09:24:44 · 35997 阅读 · 3 评论 -
浏览器窗口的滚动条的位置
浏览器窗口的滚动条的位置监听浏览器窗口的滚动条的位置,在vue中放在created中执行。window.onscroll = function() { console.log(window.pageYOffset)}基于vue写实时聊天室,让滚动条始终处于最底部的方法this.$nextTick(()=>{ this.$refs.ulTxtBox.scrollTop =...原创 2018-09-28 09:26:27 · 1339 阅读 · 0 评论 -
vue 下配置标题栏 title 图标及文字的具体步骤
1 . 将图片.ico 文件放在项目根目录下2 . 在 index.html 页面上配置图标及文字在项目的index.html 中:<head> <title>标题栏文字</title> <link rel="icon" href="./favicon.ico" type="image/x-icon">&原创 2018-04-18 11:42:20 · 7040 阅读 · 0 评论