vue
利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
公共组件：<template><div><divclass="upload-box"><divclass="image-box"v-if="imageUrl":style="{'background-image':'url('+imageUrl+')','height':i...
详解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。//模板<divclass="ap...
vue里ref ($refs)用法
ref有三种用法： 1、ref加在普通的元素上，用this.ref.name获取到的是dom元素 2、ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法。 3、如何利用v-for和ref获取一组数组或者dom节点 注意： 1、ref需要在dom渲染完成后才会有，在使...
vue组件的hover事件模拟、给第三方组件绑定事件不生效问题
1、vue里面实现hover效果基本需要用事件模拟<div@mouseover="overShow"@mouseout="outHide"> 或者是：mouseenter、mouseleave2、比如给第三方组件ElementUI的button，在绑定mouseover和mouseout事件时，发现绑在按...
vue按需引入echarts
下载安装echarts包：npminstallecharts-D一、全局引入 main.js中配置importechartsfrom'echarts'//引入echartsVue.prototype.$echarts=echarts//引入组件 缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文...
vue嵌套路由总结
嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。 比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。1、为什么要使用嵌套路由？ ...
详解vue组件的keep-alive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive>与<transition>相似，只是一个抽象组件，它不...
详解vue组件的is特性：限制元素&动态组件
在vue.js组件教程的一开始提及到了is特性 意思就是有些元素，比如ul里面只能直接包含li元素，像这样：<ul><li></li></ul>//而不能：<ul><your-component></ul> 这样就不能复用you...
2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
1、路由全局守卫 在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirect是没办法更好解决...
Vue上传图片预览组件
父组件：<template><div><h4>基于Vue.2X的html5上传图片组件</h4><divcolor:#800000;">"width:502px;"><uploader:src="'/api/imgsupload'"></...
Vue背景图打包之后访问路径错误
问题背景：项目里面有用到背景图片，开发模式下正常，打包之后发现报404错误。查看发现是背景图片引用路径出错。解决方法：.map{width:100%;height:397px;background:url(../../../static/backImgs/about5.png)no-repeat;backgroun...
IE浏览器报Promise未定义的错误、解决vuex requires a Promise polyfill in this browser问题
一个vue-cli构建的vue项目，一个使用angular的项目，两个项目在其他浏览器一切正常，但是ie中会报Promise未定义的错误解决办法： 一、vue的项目： 1、npminstallbabel-polyfill--save 2、在main.js中 import"babel-poly...
vue-router各个属性的作用及用法
vue-router是vue单页面开发的路由，就是决定页面跳转的！ <router-link>组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。Props属性1、to 表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()。<router-...
Vue路由scrollBehavior滚动行为控制锚点
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意:这个功能只在HTML5history模式下可用。 当创建一个Router实例，你可以提供一个 ...
vue组件级路由钩子函数介绍，及实际应用
正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。 有多种方式可以在路由导航发生时执行钩子：全局的、单个路由独享的、或者组件级的。一、全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子：...
