本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}ul{margin:100px ;}li{width: 50px;height: 50px;border: 1px solid;float: left;text-align: center;line-height: 50px ;}.act{background: red;}</style> </head> <body> <ul id="app"><li @click="fun(x)" v...
说明：我只是一个刚入门的小前端，你们可以指导我，但千万不要喷我，虽然我知道我很垃圾！人吗，都是要成长的！大佬，请多多指教！！！ 我前段时间刚刚写了一个类似余股票的项目，上边的K线图是要实时去刷新的，所以要用vue做一个心跳，当然大家也可以选择用websocket，大佬们感觉肯定很简单，但是我只是一个刚入门的小前端，特此记录一下。 思路其实思路很简单，首先要了解vue的生命周期和vue的内置函数，其思路就是先定义一个定时...
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的。这篇文章就简单对 Vue 绑定做个总结。操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是属性，所以可用v-bind处理，通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门增强，表达式结果类型除了...
对于使用 vue-cli 脚手架创建的前端项目，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要好几分钟，慢如蜗牛。如果是线上进行热修复，那更是分秒必争，网页响应的速度直接影响了用户体验，用户不会那么有耐心长时间等着，让你慢慢编译。 网上流传 vue-cli 一些优化配置，有些在新版本的 vue-cli 和 webpack3 已经不再需要了，有些是针对 webpack4 的。对于新版本的 vue-cli 和 webpack3，以下简单配置优化后...
最近在搞一个基于vue的后台管理系统兼容IE浏览器，眼泪都要掉下来。后来和产品说了，同意兼容IE11，感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是babel-polyfill 和 "autoprefixer-loader" 这个不用多说，资源一大堆 然后 打包之后一直 const 去不掉，查了之后是 webpack 有 webpack-dev 不支持IE低版本了，要把 webpack 版本往下调，我是拒绝的 1、IE new Date() 失败 new Date(2018-1-1) //Mon Jan 01 2018 ...
pdf显示的方法方法一使用embed标记来使用浏览器自带的pdf工具。这种实现方式优缺点都很明显：优点：自带“打印”，“搜索”，“翻页”等功能，强大且实现方便。缺点：不同浏览器的pdf工具样式不一，且无法满足个性化需求，比如：禁止打印，下载等。方法二使用Mozilla的PDF.js，自定义展示PDF。 基础功能集成使用Text-Layers渲染(可实现pdf内容复制)什么是PDF.JSPDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它...
什么是AST 在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。 Virtual Dom Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 本文通过对源...
首先在最外层div添加v-if="isReloadAlive"，并创建变量isReloadAlive = true 随后添加provide()以及reload方法，如下： export default {provide() {return {reload: this.reload}},data(){isReloadAlive : true},methods: {reload() {this.isReloadAlive = false;this.$nextTick(function(){this.isReloadAlive = true;})}}最后调用this.reload()即可 补充：下面看下vue解决刷新时闪烁问题 1.在vue容器的div里面加上 v-cloak <div...
背景 ?基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式，都是半自动化的，还需要重新修改。 需求点 ?配置化：打包后的配置文件可二次修改 ?配置自动生成：vue-cli 提供了各种环境的打包，要实现相关配置文件的自动打包 ?研发人员无痛感：对于产品研发人员来说，不需要增加额外的打包成本，基于Vue-cli的开发习...
在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理 我们先看一看2种常用定时器： setInterval(function(){}, milliseconds)——会不停的调用函数 setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关（有兴趣的童鞋可自行研究相关资料），用...
提到了vue实现的基本实现原理：Object.defineProperty() -数据劫持 和 发布订阅者模式（观察者），下面讲的就是数据劫持在代码中的具体实现。 1.先看如何调用 new一个对象，传入我们的参数，这个Myvue ，做了啥？上面看到了在实例化一个Myvue 对象的时候，会执行init方法， init 方法做了两个事，调用了observer 方法，和 实例化调用了 compile 方法。 到这里我们就明白了，实例化一个Myvue后，我们要做的就是监听数据变化和编译模...
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： <template><el-table:data="tableData3"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table> </template>其中height="250"是固定值，我们可以...
由于这里是在之前这篇文章的基础上进行稍加修改完成的，因而其绝大部分代码与上面的是一样的，而其不同之处在于，其请求数据的数据源不是来源于json文件，而是来自于后台的数据。此处的后台服务器中的数据由JSON Server所提供。 注意事项 json的数据结构 这是之前所请求的json数据： {"status":0 ,"message":[{"id":1,"name":"张三"} ,{"id":2,"name":"李四"} ] }如果我们直接使用之前所使用的json数据，其在JSON Server中执行下面...
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节...
一、前言 axios的基础使用就不过多的讲解啦，如何使用可以看axios文档使用说明Axios中文说明 在这里和大家分享一下axios拦截在实际项目中的使用 很多人都看过axios的官方文档中拦截器这一栏，有的人可能会有点懵，因为文档只告诉你有这个东西，而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器，毕竟拦截器是可以不使用的，但是使用拦截器，会在页面中减少很多不必要的代码。 二、说在前面的 项目使用的ui框架是ivi...