今天早上来到公司，没事看了一下别人的博客，然后试了一下，发现的确是可以的，在此记录一下，方便自己日后查阅。 首先新建一个文件夹：commonFunction ,然后在里面建立 一个文件common.js建立好之后，在main.js里面引入这个公共方法最后是调用这个公共方法测试一下，我在公共方法里面写了一个简单的一段代码如下： export default{login:function(){console.log("1111");} }如何在我的login.vue里面控制台输出了：1111，那就说明了...
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。 在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。 如何声明自定义指令？ 就像vue中有全局组件和局部组件一样，他也分全局自定义指令和局...
什么时候需要登录验证与权限控制1、业务系统通常需要登录才能访问受限资源，在用户未登录情况下访问受限资源需要重定向到登录页面；2、多个业务系统之间要实现单点登录，即在一个系统或应用已登录的情况下，再访问另一个系统时不需要重复登录；在登录过期或失效时，需要重定向到登录页面如何使用路由守卫定义一个index.js页面用来定义页面的路由，代码如下：import Vue from vue import Router from vue-router import blogIndex f...
屏幕快照 2019-04-01 下午8.06.02.png 方法一：iframe插入视频链接 1.1 ##### 当前播放的视频 <div class="video-wrap" style="width:80%;float:left;oveflow:hidden;"><iframe :src="this.activeVideo.youtobeURL" frameborder=0allow=autoplay;encrypted-media allowfullscreen style=width:100%;height:500px;></iframe><h3>{{this.activeVideo.title}}</h3></div>1.2#####视频列表 <div class="video-list" style="float:right...
简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。1. 基础知识 我们首先初始化一个vue项目，删除不需要的组件和样式，主要针对src下一些初始化资源，有过vue项目基础的应该很容易理解，如果没有vue基础建议先熟悉每个初始化文件的作用。关于vue中如何开发插件可以直接看vue官方文档，简单了解插件开发过程，vue插件文档。现在我们在src目录...
前言 Vue的slot插槽，可以从字面意思来了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。 一、个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽，它的使用场景是什么，很多解释都是“父组件向子组件传递dom时会用到插槽”，这并不能很好的解决我的疑惑。既然你用了子组件，你为什么要给她传一些dom，直接去定义复用的子组件不就好...
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下 2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的 根据项目需求，这...
首先我们会想着在mounted或者created里面加入想要执行的方法，但是有的时候会遇到在你执行这个方法的时候，页面还并没有被渲染完成，所以就会出现这个方法在匹配页面标签报错的情况。 解决思路： 1.通过子页面调用父页面的方法，因为在子页面开始渲染的时候，你的父页面肯定是已经渲染好了的，前提这里的方法中是去找寻父页面的标签。 2.直接在本页面监视一个参数，发现参数被初始化了，说明页面也已经加载完成，因为你的页面用到了...
最近接手了一个后台管理系统，技术栈主要是vue全家桶+elementui，老大打开测试环境页面的时候，说看到首页需要6秒钟，那如何进行优化呢？ 首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin()) } // config/index.js build: {/...
第一步 去高德地图开放平台申请密钥 高德地图开放平台第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的 主要是导出密钥 // 高德地图 key export const MapKey = 你的密钥key // 地图限定城市 export const MapCityName = 武汉utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址（） export default function remoteLoad (url, hasCallback...
思路：1 在组件内部监听事件并把事件 emit2 在组件上监听 emit 出来的事件3 当事件发生时执行对应的函数去修改根实例上的 data 实现：1 在组件内部的 input框 中监听 input事件，并给 input事件 绑定triggerInput函数2 当往 input框 中输入内容时，触发 triggerInput 函数triggerInput函数 向外部 emit 一个 edit事件 和 输入框的值3 在组件上监听这个 edit事件 并给 edit事件 绑定 triggerEdit函数4 此时会触发 triggerEdit函数，...
前言 平时部署前端项目流程是：先部署到测试环境ok后再发布到生产环境上，部署到测试环境用 xshell 连上服务器，然后用 xftp 连接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp 上传到服务器上，整个流程感觉稍有繁琐，重复。 本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx 一 安装scp2 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。 而ssh2就是一个使用no...
前言 echarts 提供了直观，交互丰富，可高度个性化定制的数据可视化图表。而vue更合适操纵数据。 最近一直忙着搬家，就没有更新博客，今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的echarts demo，我在使用npm的时候对比了echarts和vue-echarts两个依赖，最后决定使用echarts依赖包，因为它更接近原生，使用现实更小，如果对vue生命周期比较了解，那就更容易操作。 下面讲一下做出这样一个echarts图。话不多...
本文介绍了vue v-model进行数据绑定，分享给大家，具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话： 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。 示例： 先来一个组件，不用vue-model，正常父子通信<!-- parent --><template><p class="parent"><p>我是父亲, 对儿子说： {{sthGiveChild}}</p><Child @returnBack="turnBack" :give="sthGiveChild"></Child></p></template><sc...
前言：vue3.0要用Proxy来实现双向绑定，因此先来尝试一下实现方法。 1 Object.defineProperty 实现原来vue2的实现使用Object.defineProperty，监听set，但对于数组直接下标给数组设置值监听不了。 function observe(data) {if (!data || typeof data !== object) {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);}); };function defineReactive(data, key, val) {obs...