Vue2.0实用笔记

1、vue中的过渡、动画效果

单组件(<transition name=”” mode=””><p v-if=””></p></transition>)
v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。
(定义了过渡名称,可用过渡名代替前缀v)
v-enter-active和v-leave-active体现可见的主要状态,可在此添加主效果;
v-enter是过渡的最开始状态,v-leave-to是结束的状态,可在此添加开始和结束的状态。
过渡模式
in-out(先进入,旧元素再消失),out-in(旧元素先消失,新元素再进入)

列表(<transition-group><p v-for=””><p></transition-group>)

2、功能插件

①vue-lazyload(图片懒加载)

②mint-ui/vux(轮播图,各种弹框、提示框)

③vue-matomo(前端统计,使用做记录浏览量)详细链接:https://www.cnblogs.com/heior…

④vue-infinite-scroll(无限加载)

⑤fastclick(移动端click事件延迟问题)
npm install fastclick –save
impor Fastclick from ‘fastclick’
Factclick.attach(document.body);

3、数据和渲染

组件以templete形式来渲染,开始遍历data中的数据,mounted时挂载虚拟DOM。

通过设置getter和setter追踪更新,只有在data中定义的数据才能被跟踪更新,数组元素发生变化不能追踪,对象的属性可以(watch-deep:true)。

computed中的数据在mounted后触发计算,起始不进行watch监听,只有监听数据发生变化时才触发监听函数(监听函数先于computed触发)

DOM的异步更新。vue实例中,可追踪数据发生变化时,vue会开启一个队列,把变化记录其中,在下一次事件循环tick前,进行去重优化,然后重新渲染DOM。有时我们需要在DOM渲染之后再执行以下操作,比如DOM操作(渲染前执行会出错情况下),需要特殊处理vue.nextTick(callback),则可以在本轮tick中操作,在下一轮tick时,DOM渲染完执行。

4、vue-router使用及路由原理解析

路由的分类:前端路由和后端路由。早起路由是后端负责,随着前端复杂程度的上升以及前后端分离的普及,后端路由缺点逐渐明显,依赖网速、用户体验差、前后端耦合,后端路由逐渐消失。

前端路由模式:hash模式和history模式。哈希模式是最早的路由模式,优点是兼容低版本,缺点是url中带#,不美观,某些情况下不会刷新。history模式是HTML5标准新增的API,出兼容低版本外可弥补hash缺点。

路由的基本原理:单页面应用中(多页面不涉及路由的问题),我们希望公用一部分页面(头部和底部),达到通过改变中间内容完成应用的所有展示和功能,其中一个需求就是在路由跳转时刷新页面可以保持当前状态。最早通过hash实现了这一需求,通过hashchange事件可监听hash的变化,实现不同页面的操作。后来HTML5提出了history,并提供了history.pushState()和history.replaceState()方法实现页面的不刷新跳转,不足的是,我没有方法监听history的变化,由此我们可以分析url的变化来实现响应的操作①浏览器前进、后退按钮②a标签的跳转③代码中location.href跳转,其中浏览器按钮可通过onpopstate事件监听,a标签可禁止其默认行为,由此,我们可以监听history的变化。

vue-router:路由跳转涉及功能钩子函数,beforeEach(to, from, next)–全局守卫函数,可在路由发生变化时做处理;组件中使用的钩子函数beforeRouterEnter(to, from, next)—组件尚未被创建,在此this无用;beforeRouterUpdate(to, from, next)–组件被复用时,,触发此函数,比如动态路由中的参数变化;beforeRouterLeave(to, from, next)–离开当前组件时调用。

5、过滤器的使用

filter.js:
const filters = {
    filter1: (value) => {
        doSomthing;
    },
    filter2: (value) => {
        doSomthing;
    },
}
export default filters;
import filters from './filters/filter'
//通过object.keys引入vue中
Object.keys(filters).forEach(k=>Vue.filter(k,filters[k]))

    原文作者:Fardwn
    原文地址: https://segmentfault.com/a/1190000018589532
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞