ruanhongbiao的专栏

前几天在项目中遇到一个需求，要在离开页面后掩藏某一个按钮，因为之前在开发小程序时，有离开页面的生命周期，所以Vue应该也有这个的。进入路由页面：mounted(){ this.$nextTick(()=>{ show(); })}离开路由页面后执行函数：destroyed: function () { co...

首先简单来说明一下$router和$route的区别//$router : 是路由操作对象，只写对象//$route : 路由信息对象，只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取...

1、如果使用了Vue-router的话，就可以用 this.$router.go（-1） 实现返回；2、如果没使用vue-router，就可以用window.history.go（-1）实现返回效果。可以 定义方法@click="goback"ethods:{ goback(){ this.$router.go(-1);/...

终于轮到Vue来带给React灵感了？react-transition-groupvue的transitionSwitchTransition用法注意事项结束语react-transition-group今天在查看react-transition-group的时候，突然发现多出来了一个组件：咦？奇怪，我记得以前明明只有仨啊，啥时候更新出来的，好奇心驱使我点了进去新出现的那...

我们先来看看vue-li项目结构图：vue中静态资源的引入机制Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。 ○ 诸如<img src="...">、background: url(...)和...

1.初始化 data 和 computed，分别代理其 set 和 get 方法，对 data 中的所有属性生成唯一的 dep 实例2.对 computed 中的 属性生成唯一的 watcher，并保存在 vm._computedWatchers 中3.访问计算属性时，设置 Dep.target 指向 计算属性的 watcher，调用该属性具体方法4.方法中访问 data 的属性，...

在使用Vue开发中，使用组件时报了这么一个错误：[Vue warn]: The data property "panelShow" is already declared as a prop. Use prop default value instead.翻译过来就是：数据属性“panelShow”已经声明为一个PROP。使用PROP默认值代替。经过查找是在组件传值时，传过来了一个...

<!--picker弹窗--><transition name="fade"> <div class="picker_wrap" v-show="roomSelectShow" @click="cancelSelect"> <div class="picker_alert" @click.stop> ...

最近用vue-cli搭建了一个管理后台项目，发现在win7的IE10-11下打开是空白的，win10的edge和chrome等其他浏览器都没有问题，因为vue官网告诉我们它是兼容ie9的，后来想了一下可能是es6的一些新特性IE浏览器不支持导致的。报错原因：Babel 默认只转换新的 JavaScript 语法（如箭头函数），而不转换新的 API ，比如 Iterator、Generato...

项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。1.css、js路径不对解决方法：打开config/index.js，将其中的assetsPublicPath值改为’./’改了之后打包发现虽然css,js文件路径对了，但是css中引用的图片路径和elemen...

一开始根据正常情况下设置了proxyTable属性和全局创建axios实例如下。 proxyTable: { '/api':{ target:'http://xxxx.com', changeOrigin: true, pathRewrite: { '^/api': '/api' } ...

前言近段时间，我正在使用Vue + Element进行新的项目开发。在刚使用完NavMenu组件，准备添加下一项组件时，发生了报错。报错内容Vue Error: The template root requires exactly one element. 报错原因Vue只允许模板里存在一个根节点。解决方案在 <template> 中添加一个 <...

一、首先是正宗的监听事件的写法1、html代码//这是html的输入框。定义了一个获取焦点，失去焦点的方法 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" > 2、JS部分 ...

在调用微信分享api的时候：let shareUrl = https://xxxx#/abcwx.onMenuShareTimeline({ title: '', link: shareUrl, imgUrl: '', success:function() { }, cancel:function() { }});如是这样带有h...

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{{ liveInfo.liveName }}等解决办法：1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题（推荐）具体实现：<div class="active_txt" v-cloak v-if="liveInfo.liveTextImgs!=''"> {{liveIn...

Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTM...

开发中经常遇到的需求是：多个页面调用同一组件，通过传参获取不同的数据展示在页面上。多个路由映射到同个组件，只是传参不同，页面切换不会触发组件的创建cteated方法，怎么办？官方给出的解决办法：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1...

概述几种通信方式无外乎以下几种：Prop（常用） $emit (组件封装用的较多) .sync语法糖 （较少） $attrs 和 $listeners (组件封装用的较多) provide 和 inject （高阶组件/组件库用的较多） 其他方式通信详述1. Prop英式发音：[prɒp]。这个在我们日常开发当中用到的非常多。简单来说，我们可以通过 Prop向子组件传递...

Evan You（尤雨溪）今天（2018年11月16日）早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。我们做了一些笔记并将其与下面的幻灯片结合起来分享给大家。总结起来，Vue 3 以下方面值得我们期待 ：更快 更小 更易于维护 更多的原生支持 更易于开发使用完整...

写在前面刚入门前端的时候写过很多的微信H5页面，时隔多年感觉应该是手到擒来，不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的，做个记录。防止自己以后再去解决解决过的问题。一、微信网页授权 网页授权流程分为四步，这里只说前端需要做的，其中的第一步：跳转授权页面获取code。 这里分享下我的授权逻辑（下图），它有两个优点：  授权跳转在dom渲染之前...

前言随着公司业务的发展，前端项目也越来越多。有的时候客户反馈的一个问题，需要耗费大量的时间去查。错误信息不能第一时间获取，多少会给公司带来损失。这个时候我们就需要一套错误收集机制，去提前发现代码中存在的问题，在客户反馈之前把问题提前处理掉。或者在收到客户反馈的时候可以查到对应的错误栈来帮助我们快速去定位以及解决问题。下面主要介绍vue和微信小程序错误收集的方法。错误收集方法Vue错误收...

得益于 Vue 的 响应式系统 和 虚拟 DOM 系统 ，Vue 在渲染组件的过程中能自动追踪数据的依赖，并精确知晓数据更新的时候哪个组件需要重新渲染，渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上，Vue 应用的开发者一般不需要做额外的优化工作。 但在实践中仍然有可能遇到性能问题，下面会介绍一些定位分析 Vue 应用性能问题的方式及一些优化的建议。 整...

在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染之后才可以，页面没有加载完成之前，获取到的宽高不准确。使用过jquery的都知道，有个ready方法可以使用，但vue.js则需要结合watch和nextTick方法来使用。1.下面开始介绍下，在页面加载一个数据列表完成之后，页面自动滚动定位到...

注:网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:完全不是一个东西，功能虽然都是序列化。假设我要提交的数据如下var a = {name:'hehe',age:10};qs.stringify序列化结果如下 n...

1.使用路由获取页面参数在路由中设置path：{ path: '/detail/:id/', name: 'detail', component: detail, meta: { title: '详情' }}获取参数let id = this.$route.params.id备注:1、参数名需要保持一致2、如果路由...

最近做了一个小的demo，分享给大家，在很多地方都能用到。一般获取短信验证码的时候会用到这个demo：el-button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时：<el-button type="primary" class="code_btn" style="background: #fff;color: #000;border: 1...