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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞