本篇文章是一篇Vue.js的教程,目標在於用一種常見的業務場景——分頁/無限加載,幫助讀者更好的理解Vue.js中的一些設計思想。與許多Todo List類的入門教程相比,更全面的展示使用Vue.js完成一個需求的思考過程;與一些構建大型應用的高階教程相比,又更專注於一些零碎細節的實現,方便讀者快速掌握、致用。
需求分析
當一個頁面中信息量過大時(例如一個新聞列表中有200條新聞需要展示),就會產生問題,例如:
》數據量過大,影響加載速度
》用戶體驗差,很難定位到之前自己看過的某篇文章
》擴展性差,如果200條變為2000條或者更多
所以常見的解決思路就是至底時加載數據或者分頁展示。無限加載的實現過程類似於:
1.ajax類方法獲取數據
2.數據存入本地數組
3.數組中的每條數據對應插入一個HTML模板片段中
4.將HTML片段append到節點中
前端分頁的實現過程類似於:
1.ajax類方法獲取數據
2.數據替換本地數組
3.數組中的每條數據對應插入一個HTML模板片段中
4.清空節點後將HTML片段append到節點中
往往修改或者維護代碼時,我們會發現渲染HTML和插入部分是比較煩人的。因為我們需要將HTML拼接成字符串,在對應的位置插入數據,往往就是一段非常長的字符串,之後想要加個class都費勁。es6的模板字符串讓這個情況有所好轉,但是依然有瑕疵(例如實際編寫時無法HTML代碼高亮)。同時我們還需要寫不少for或者forEach去循環數組,再命令式的append,如果這段代碼片段有一些復雜的交互,可能還需要通過事件代理綁定一堆方法。
如果在完成這類業務時,你也遇到過上述的問題,那麼你就會發現Vue真是太coooooool了,let's vue!
新建一個Vue.js項目
強烈推薦使用vue-cli來新建一個項目。
一開始你可能會認為用node.js和npm安裝一大堆庫,生成了一些你不太了解的目錄和配置文件,一寫代碼還會跳出一堆eslint的提示。但是這絕對物有所值,因為這樣的一個模板可以幫你更好的理解Vue.js組織文件的思路,並且當你適應之後,你會發現這些條條框框極大地加快了你的開發效率。
在這次的教程中,我們新建了一個名叫loadmore的項目,具體的新建項目流程可以參照官網教程的安裝一節。
布局頁面結構
為了配合教程的逐步深入,我先從完成 加載更多 功能入手。為了和之後的分頁保持一致,我的頁面准備由兩部分組成,一是信息列表,二是底部的一個加載更多的按鈕,我將他們都放在App.vue這個根組件中。
<template> <div id="app"> <list></list> <a class="button" @click="next" >GO NEXT</a> </div> </template> <script> import List from './components/List' export default { components: { List }, data () { return { ... } }, methods: { next () { ... } } } </script> <style scoped> .button { display: block; width: 100%; background: #212121; color: #fff; font-weight: bold; text-align: center; padding: 1em; cursor: pointer; text-decoration: none; } .button span { margin-left: 2em; font-size: .5rem; color: #d6d6d6; } </style>
在這個過程中,我們根據Vue的設計思想有了如下思路:
1.在信息列表中,我們會完成我們上文中提到的幾個步驟,而這些步驟都只和信息列表本身有關,與Next按鈕間唯一的聯系就是Next點擊後需要觸發信息列表去獲取,而這可以通過props傳遞。所以我們把列表及其自身業務邏輯、樣式都放在List.vue這個組件中。
2.我們為按鈕定義了一些基本的樣式,但是我們用的css選擇器就是一個.button類名,可能會和別的組件中的.button樣式沖突,所以我們加入了一個scoped屬性,讓App.vue中的style樣式只作用於這個組件內部。
注意:scoped並不會影響css的作用優先級,使用scoped不代表不會被外部樣式表覆蓋。
3.我們想引入一些基礎樣式,比如reset.css。如果在項目中使用了sass之類的語言,那麼可以將對應的外部sass文件放在assets文件夾中,通過import引入。普通的css可以直接寫在一個不加scoped屬性的組件中,但是如果你確定這個樣式表不會被頻繁改動,那麼也可以作為第三方靜態資源引入index.html中。例如這個例子中,我在index.html中加入了:
<link rel="stylesheet" href="./static/reset.css">
效果:
完成List.vue
目前我們主要的業務邏輯都是圍繞信息列表展開的,也就是我們創建的List.vue。首先,我們需要獲取目標數據,我選用了cnodejs.org社區的API作為例子進行編寫。如果你也想用一個封裝好的ajax庫的話,應該這麼做:
引入第三方JS庫
將目標JS庫文件放在static文件夾中,例如我選擇的是reqwest.js,然後在index.html先引入。
<script src="./static/reqwest.min.js"></script>
然後在build配置文件夾中,修改webpack.base.conf.js,export externals屬性:
externals: { 'reqwest': 'reqwest' }
這樣我們在我們的項目中,就可以隨時加載第三方庫了。
import reqwest from 'reqwest'
寫個API接口
在這個例子中,我們只需要調用文章列表這一個接口,但是實際項目中,可能你需要調用很多接口,而這些接口又會在多個組件中被用到。那麼調用接口的邏輯四散在各個組件中肯定是不好的,想象一下對方的url發生了變化,你就得在無數個組件中一個個檢查是否要修改。
所以我在src文件夾中新建了一個api文件夾,用於存放各類API接口。當前例子中,要獲取的是新聞列表,所以新建一個news.js文件:
import reqwest from 'reqwest' const domain = 'https://cnodejs.org/api/v1/topics' export default { getList (data, callback) { reqwest({ url: domain, data: data }) .then(val => callback(null, val)) .catch(e => callback(e)) } }
這樣我們就擁有了一個獲取新聞列表的API:getList。
編寫組件
我們用一個<ol>作為新聞列表,內部的每一個<li>就是一條新聞,其中包括標題、時間和作者3個信息。
在data中,我們用一個名為list的數組來儲存新聞列表的數據,一開始當然是空的。我們再在data中設置一個名為limit的值,用來控制每頁加載多少條數據,作為參數傳給getList這個API。
因此我們的template部分是這樣的(加入了一些style美化樣式):
<template> <ol> <li v-for="news of list"> <p class="title">{{ news.title }}</p> <p class="date">{{ news.create_at }}</p> <p class="author">By: {{ news.author.loginname }}</p> </li> </ol> </template> <style scoped> ol { margin-left: 2rem; list-style: outside decimal; } li { line-height: 1.5; padding: 1rem; border-bottom: 1px solid #b6b6b6; } .title { font-weight: bold; font-size: 1.3rem; } .date { font-size: .8rem; color: #d6d6d6; } </style>
之後我們顯然需要使用getList來獲取數據,不過先想想我們會在哪幾個地方使用呢?首先,我們需要在組件開始渲染時自動獲取一次列表,填充基礎內容。其次,我們在每次點擊APP.vue中的Next按鈕時也需要獲取新的列表。
所以我們在methods中定義一個get方法,成功獲取到數據後,就把獲取的數組拼接到當前list數組後,從而實現了加載更多。
沿著這個思路,再想想get方法需要的參數,一個是包含了page和limit兩個屬性的對象,另一個是回調函數。回調函數我們已經說過,只需要拼接數組即可,因此只剩下最後一個page參數還沒設置。
在初始化的時候,page的值應該為1,默認是第一頁內容。之後page的值只由Next按鈕改變,所以我們讓page通過props獲取App.vue中傳來的page值。
最後則是補充get方法觸發的條件。一是在組件的生命周期函數created中調用this.get()獲取初始內容,另一是在page值變化時對應獲取,所以我們watch了page屬性,當其變化時,調用this.get()。
最後List.vue的script長這樣:
<script> import news from '../api/news' export default { data () { return { list: [], limit: 10 } }, props: { page: { type: Number, default: 1 } }, created () { this.get() }, watch: { page (val) { this.get() } }, methods: { get () { news.getList({ page: this.page, limit: this.limit }, (err, list) => { if (err) { console.log(err) } else { list.data.forEach((data) => { const d = new Date(data.create_at) data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` }) this.list = this.list.concat(list.data) } }) } } } </script>
同時我們將App.vue中的<list>修改為:
<list :page="page"></list>
再為page在App.vue中添加一個初始值以及對應的方法next:
data () { return { page: 1 } }, methods: { next () { this.page++ } }
這樣我們就已經完成了加載更多的功能。
改寫為分頁
因為之前我們的思路非常清晰,代碼結構也很明了,所以改寫起來會非常簡單,只需要將List.vue中拼接數組改為賦值數組就可以了:
// 常規loadmore // this.list = this.list.concat(list.data) // 分頁 this.list = list.data
就這麼簡單的一行就完成了功能的改變,這就是Vue.js中核心的數據驅動視圖的威力。當然,接下來我們還要做點更cooooool的。
添加功能
因為分頁替換了原來的數組,所以僅僅一個Next按鈕不夠用了,我們還需要一個Previous按鈕返回上一頁。同樣的,也給Previous按鈕綁定一個previous方法,除了用this.page--改變page的值以外,還需要對this.page === 1的邊界條件進行一個判斷。
同時為了方便知道我們當前的頁數,在按鈕中,加入{{ page }}顯示頁數。
<a class="button" @click="next" >GO NEXT<span>CURRENT:{{page}}</span></a>
transition動畫
編寫和完善功能的過程中,已經充分體現了Vue.js清晰和便利的一面,接下來繼續看看其它好用的功能,首先就是transition動畫。
為了展示transition的威力,首先我找到了一個模仿的對象:lavalamp.js( Demo地址 )。
在Demo中可以看到頁面以一種非常優雅的動畫過渡完成了切換內容的過程,其本身是用JQuery+CSS動畫完成的,我准備用Vue.js進行改寫。
首先學習了一下原作者的實現思路以後,發現是將一個div作為loader,position設定為fixed。當翻頁時,根據點擊的按鈕不同,loader從頂部或者底部擴展高度,達到100%。數據加載完畢後,再折疊高度,最終隱藏。
那麼初步的思路如下:
1.添加一個loader,最小高度與按鈕一致,背景同為黑色,讓過渡顯得更自然。
2.loader高度需要達到一個屏幕的高度,所以設置html和body的height為100%。
3.需要有一個值,作為loader是否顯示的依據,我定為finish,其默認值值為true,通過給loader添加v-show="!finish"來控制其顯示。
4.在next和previous方法中添加this.finish = false觸發loader的顯示。
5.在App.vue和List.vue建立一個雙向的props屬性綁定至finish,當List.vue中的get方法執行完畢後,通過props將App.vue中的finish設定為true,隱藏loader。
6.給loader添加一個transition。由於動畫分為頂部展開和底部展開兩種,所以使用動態的transition為其指定正確的transition名稱。
7.新增一個值up,用於判斷動畫從哪個方向開始,其默認值為false。在previous方法中,執行this.up = true,反之在next方法中,則執行this.up = false。
根據思路,寫出的loader應該是這樣的(style等樣式設定在最後統一展示):
<div id="loader" v-show="!finish" :transition="up? 'up-start':'down-start'"> <span>Loading</span> </div>
可以看到我設定了up-start和down-start兩種transition方式,對應的css動畫代碼如下:
.down-start-transition { bottom: 0; height: 100%; } .down-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .down-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: 0; bottom: auto; } .up-start-transition { top: 0; height: 100%; } .up-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .up-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: auto; bottom: 0; } @keyframes expand { 0% { height: 3em; transform: translate3d(0, 0, 0); } 100% { height: 100%; transform: translate3d(0, 0, 0); } } @keyframes collapse { 0% { height: 100%; transform: translate3d(0, 0, 0); } 100% { height: 3em; transform: translate3d(0, 0, 0); } }
設置了expand和collapse兩個animation,再在transition的各個生命周期鉤子中做對應的綁定,就達到了和lavalamp.js相接近的效果。
為了保證動畫能執行完整,在List.vue的get方法執行完之後,還使用了一個setTimeout定時器讓finish延時0.5秒變為true。
優化體驗
動畫效果完成之後,實際使用時發現lavalamp.js還有個巧妙地設計,就是點擊Previous後,頁面前往底部,反之點擊Next後則前往頂部。
實現後者並不復雜,在next方法中加入以下一行代碼調整位置即可:
document.body.scrollTop = 0
previous前往底部則略微復雜一點,因為獲取到數據之後,頁面高度會發生改變,如果在previous中執行scrollTop的改變,有可能會出現新的內容填充後高度變長,頁面不到底的情況。所以我watch了finish的值,僅當點擊按鈕為previous且finish變化為false至true時前往底部,代碼如下:
watch: { finish (val, oldVal) { if (!oldVal && val && this.up) { document.body.scrollTop = document.body.scrollHeight } } }
前端路由
完成以上內容之後,發現不論翻到第幾頁,一旦刷新,就會回到第一頁。vue-router就是為解決這類問題而生的。
首先我們引入VueRouter,方式可以參考上文中的“引入第三方JS庫”。然後在main.js對路由規則進行一些配置。
我們的思路包括:
1.我們需要在url上反映出當前所處的頁數。
2.url中的頁數應該與所有組件中的page值保持一致。
3.點擊Next和Previous按鈕要跳轉到對應的url去。
4.在這個例子中我們沒有router-view。
因此main.js的配置如下:
import Vue from 'vue' import App from './App' import VueRouter from 'VueRouter' Vue.use(VueRouter) const router = new VueRouter() router.map({ '/page/:pageNum': { name: 'page', component: {} } }) router.redirect({ '/': '/page/1' }) router.beforeEach((transition) => { if (transition.to.path !== '/page/0') { transition.next() } else { transition.abort() } }) router.start(App, 'app')
首先定義了一個名為page的具名路徑。之後將所有目標路徑為'/',也就是初始頁的請求,重定向到'/page/1'上保證一致性。最後再在每次路由執行之前做一個判斷,如果到了'/page/0'這樣的非法路徑上,就不執行transition.next()。
根據之前的思路,在App.vue中,獲取路由對象的參數值,賦值給page。同時給兩個按鈕添加對應的v-link。
本文已被整理到了《Vue.js前端組件學習教程》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。