成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Vue2.0實(shí)用筆記

JowayYoung / 2621人閱讀

摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中

1、vue中的過(guò)渡、動(dòng)畫(huà)效果

單組件（

）
v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。
(定義了過(guò)渡名稱(chēng)，可用過(guò)渡名代替前綴v）
v-enter-active和v-leave-active體現(xiàn)可見(jiàn)的主要狀態(tài)，可在此添加主效果；
v-enter是過(guò)渡的最開(kāi)始狀態(tài)，v-leave-to是結(jié)束的狀態(tài)，可在此添加開(kāi)始和結(jié)束的狀態(tài)。
過(guò)渡模式
in-out(先進(jìn)入，舊元素再消失),out-in(舊元素先消失，新元素再進(jìn)入)

列表（

）

2、功能插件

①vue-lazyload(圖片懶加載)

②mint-ui/vux(輪播圖，各種彈框、提示框）

③vue-matomo(前端統(tǒng)計(jì)，使用做記錄瀏覽量)詳細(xì)鏈接：https://www.cnblogs.com/heior...

④vue-infinite-scroll（無(wú)限加載）

⑤fastclick(移動(dòng)端click事件延遲問(wèn)題)
npm install fastclick --save
impor Fastclick from "fastclick"
Factclick.attach(document.body);

3、數(shù)據(jù)和渲染

組件以templete形式來(lái)渲染，開(kāi)始遍歷data中的數(shù)據(jù)，mounted時(shí)掛載虛擬DOM。

通過(guò)設(shè)置getter和setter追蹤更新，只有在data中定義的數(shù)據(jù)才能被跟蹤更新，數(shù)組元素發(fā)生變化不能追蹤，對(duì)象的屬性可以(watch-deep:true)。

computed中的數(shù)據(jù)在mounted后觸發(fā)計(jì)算，起始不進(jìn)行watch監(jiān)聽(tīng)，只有監(jiān)聽(tīng)數(shù)據(jù)發(fā)生變化時(shí)才觸發(fā)監(jiān)聽(tīng)函數(shù)（監(jiān)聽(tīng)函數(shù)先于computed觸發(fā)）

DOM的異步更新。vue實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，vue會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)tick前，進(jìn)行去重優(yōu)化，然后重新渲染DOM。有時(shí)我們需要在DOM渲染之后再執(zhí)行以下操作，比如DOM操作（渲染前執(zhí)行會(huì)出錯(cuò)情況下），需要特殊處理vue.nextTick(callback)，則可以在本輪tick中操作，在下一輪tick時(shí)，DOM渲染完執(zhí)行。

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

路由的分類(lèi)：前端路由和后端路由。早起路由是后端負(fù)責(zé)，隨著前端復(fù)雜程度的上升以及前后端分離的普及，后端路由缺點(diǎn)逐漸明顯，依賴(lài)網(wǎng)速、用戶(hù)體驗(yàn)差、前后端耦合，后端路由逐漸消失。

前端路由模式：hash模式和history模式。哈希模式是最早的路由模式，優(yōu)點(diǎn)是兼容低版本，缺點(diǎn)是url中帶#，不美觀，某些情況下不會(huì)刷新。history模式是HTML5標(biāo)準(zhǔn)新增的API，出兼容低版本外可彌補(bǔ)hash缺點(diǎn)。

路由的基本原理：?jiǎn)雾?yè)面應(yīng)用中（多頁(yè)面不涉及路由的問(wèn)題），我們希望公用一部分頁(yè)面（頭部和底部），達(dá)到通過(guò)改變中間內(nèi)容完成應(yīng)用的所有展示和功能，其中一個(gè)需求就是在路由跳轉(zhuǎn)時(shí)刷新頁(yè)面可以保持當(dāng)前狀態(tài)。最早通過(guò)hash實(shí)現(xiàn)了這一需求，通過(guò)hashchange事件可監(jiān)聽(tīng)hash的變化，實(shí)現(xiàn)不同頁(yè)面的操作。后來(lái)HTML5提出了history，并提供了history.pushState()和history.replaceState()方法實(shí)現(xiàn)頁(yè)面的不刷新跳轉(zhuǎn)，不足的是，我沒(méi)有方法監(jiān)聽(tīng)history的變化，由此我們可以分析url的變化來(lái)實(shí)現(xiàn)響應(yīng)的操作①瀏覽器前進(jìn)、后退按鈕②a標(biāo)簽的跳轉(zhuǎn)③代碼中l(wèi)ocation.href跳轉(zhuǎn)，其中瀏覽器按鈕可通過(guò)onpopstate事件監(jiān)聽(tīng)，a標(biāo)簽可禁止其默認(rèn)行為，由此，我們可以監(jiān)聽(tīng)history的變化。

vue-router：路由跳轉(zhuǎn)涉及功能鉤子函數(shù)，beforeEach(to, from, next)--全局守衛(wèi)函數(shù)，可在路由發(fā)生變化時(shí)做處理；組件中使用的鉤子函數(shù)beforeRouterEnter(to, from, next)---組件尚未被創(chuàng)建，在此this無(wú)用；beforeRouterUpdate(to, from, next)--組件被復(fù)用時(shí)，，觸發(fā)此函數(shù)，比如動(dòng)態(tài)路由中的參數(shù)變化；beforeRouterLeave(to, from, next)--離開(kāi)當(dāng)前組件時(shí)調(diào)用。

5、過(guò)濾器的使用

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117552.html

相關(guān)文章

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中 1、vue中的過(guò)渡、動(dòng)畫(huà)效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    draveness 評(píng)論0 收藏0

  • Vue2.0實(shí)用筆記

    摘要：實(shí)例中，可追蹤數(shù)據(jù)發(fā)生變化時(shí)，會(huì)開(kāi)啟一個(gè)隊(duì)列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過(guò)實(shí)現(xiàn)了這一需求，通過(guò)事件可監(jiān)聽(tīng)的變化，實(shí)現(xiàn)不同頁(yè)面的操作。過(guò)濾器的使用通過(guò)引入中 1、vue中的過(guò)渡、動(dòng)畫(huà)效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    maochunguang 評(píng)論0 收藏0

  • 2017年3月份前端資源分享

    平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...

    ermaoL 評(píng)論0 收藏0

  • 2017年3月份前端資源分享

    平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進(jìn)擊的 Promise Effective JavaScript leeheys blog -...

    kamushin233 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<