Vue2.0實用筆記

JowayYoung 發布于2019-08-30 15:56 / 2590人閱讀

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中

1、vue中的過渡、動畫效果

單組件（

）
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(舊元素先消失，新元素再進入)

列表（

）

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]))

GPU云服務器云服務器 vue2.0 cdn 漂亮實用實用實用函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117552.html

Vue2.0實用筆記

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...

draveness 2019-08-23 16:09 評論0 收藏0
Vue2.0實用筆記

摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...

maochunguang 2019-08-02 16:08 評論0 收藏0
2017年3月份前端資源分享

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

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

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

kamushin233 2019-08-29 12:34 評論0 收藏0