场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前，http 异步获取数据 mockData ，预先判断是进入 A 页、还是 B 页，还是留在本页；而如果留在本页的话，还需要在 mounted 根据 mockData 来判断显示哪种状态（可以在本页面实例创建后，重新发起 http 请求获取 mockData ,但是没有必要，造成代码冗余）； 执行顺序:async beforeRouteEnter(to, from, next) {let res = await gameData()console.log(beforeRout...
v-cloak 当用户频繁刷新页面或网速慢时，页面未完成 Vue.js 的加载时，导致 Vue 来不及渲染，这就会导致在浏览器中直接暴露插值(表达式)，Vue由此也给出了解决方法。在指定标签或整个父容器加入v-cloak指令，通过css选择器选中v-cloak，隐藏元素即可。 // html <div v-cloak id="app"><span>{{ msg }}</span> </div> // css [v-cloak]{display:"none"; } // vue实例对象 => vm var vm = new Vue({el:#app,data:{msg:"hello world",...
介绍mptoast 是一个基于mpvue的简单弹窗组件 github地址： https://github.com/noahlam/mpvue-toast特性 1.轻量 目前整个项目未打包前大概只有120行代码(包括注释)，5kb左右(包括图标) 2.配置少 尝试过无数种优化方法，只为减少配置 3.冗余少 每个页面（page）只需要引入一次，该页面里面如果有多个子组件，可以跟页面共用一个，无需重复引入。 4.使用简单 除了必须的在page页面对组件import，注册，和html引入（这些麻烦的东西由于...
本文实例讲述了vue-router两种模式区别及使用注意事项。分享给大家供大家参考，具体如下：Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。 hash模式 hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。window.onhashchange = function(event){console.log(event);}...
为什么要迁移至TypescriptJavascript本身是动态弱类型的语言，这样的特点导致了Javascript代码中充斥着很多Uncaught TypeError的报错，给开发调试和线上代码稳定都带来了不小的负面影响。而Typescript提供了静态类型检查，使很多类型错误在编写时就已经发现，不会带到测试阶段。同时，Javascript不定义model就可以使用一个对象，有人喜欢这样的灵活性，的确这样的语法在model不复杂的时候可以快速的开发出需要的功能，但一旦model庞...
一、业务背景最近在利用mpvue+ts开发小程序的过程中，由于苹果X等手机会出现底部的按钮，会遮盖掉需要操作的按钮。由于在小程序开发，微信爸爸已经做了对机型的检查，相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。二、实现思路 判断机型方法注入全局组件mixin加入全局安全距离css页面上进行class类处理三、实现过程1、判断机型方法小程序的官方文档提供了一个方法wx.getSystemInfo,我们可以利用该方法来对小程序的对...
本文实例为大家分享了vue回到顶部监听滚动事件，供大家参考，具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)">QQ</li> <li @mouseover="mouseOver(2)">微信</li> </ul> <div v-if="showIndex === 1">玩QQ</div> <div v-if="showIndex === 2">玩微信</div> </div> </template> <script> exp...
一，安装 npm i -s vue-property-decorator二，用法 1，@Component(options:ComponentOptions = {}) @Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选项 虽然也可以在 @Component 装饰器中声明 computed，watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错误提示 import { Vue, Component } from vue-property-decorator@Component({filters: {t...
前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，今天我们也来简单了解一下他的使用，深入学习可能还是要去看官方文档...
前言最近的项目用到了 vue.js + vuex + vue-router 全家桶，版本为 >2.0，在搞Store的时候发现，圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式，很少有涉及到比较复杂的模块化拆分的Store实践，而且事实上也有朋友在实践中问到过这方面的内容，vuex自身提供了模块化的方式，因此在这里总结一下我自己在项目里的心得。 模块化拆分vue.js的项目文件结构在这里就不说了，大家可以通过vue-cli初始化项目,脚手架会为你搭建一个...
最近使用Vue和Koa2重构了自己的博客，过程中踩了不少坑，查了很多资料，最后总算成功上线。之后我计划围绕这个过程写一系列文章，讲讲如何用Vue+Koa2写一套网站。 而现在，先来讲讲最后一步，在写完Vue和Koa2后，如何将它们部署到线上。 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了，毕竟后面都是后端的事情。如果你用的是Vue-cli3.0，那么打包这一步会非常简单，只需要执行一条命令即可，其它的不用关心： npm run build...
本文实例为大家分享了vue移动端城市三级联动组件的具体代码，供大家参考，具体内容如下 先看效果图以下组件代码 <template><div class="address"><div class="addressboxbg" @click="cancel"></div><div class="addressbox"><p class="text_btn"><span style="float:left;" @click="cancel">取消</span><span style="float:right;color:#107E52;" @click="complete">完成</span></p><div class="addressSelect" ><div class="selec...
在前端开发过程中，难免习惯了 console.log 。 但是刚入门vue时，基于vue-cli 3.x，运行时终端老抛出error。一看信息，发现是不能使用 console.log ，另外import后的但是没有使用的变量也提示error信息，这是不错的。 1. 修改rules 但的你想去掉console提示？那可以通过 package.json 修改 rules 规则。 在package.json中，有这几其中的一项，在 rules 中添加 "no-console": "off" ,如下： 修改完成后，重新运行即可生效。 "eslint...
事故还原:今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据. 下面是html+vuejs+layui lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的. 对...
什么是vue.js Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目...