摘要:學(xué)習(xí)了一段時間,拿它來做個小組件,練習(xí)一下。源碼放在文末的地址上。接下來看下評論組件條評論這里的將在下面提到,是我們獲取數(shù)據(jù)的位置。最后一個是目前生成獲取靜態(tài)數(shù)據(jù)的文件頭像用戶名評論內(nèi)容就這樣了吧。
學(xué)習(xí)了vue.js一段時間,拿它來做2個小組件,練習(xí)一下。
我這邊是用webpack進(jìn)行打包,也算熟悉一下它的運(yùn)用。
源碼放在文末的 github 地址上。
首先是index.html
Page 文章內(nèi)容...
我將 app這個組件放在 內(nèi)
通過webpack打包后,入口的js文件是entry.js,用來引入app.vue組件
entry.js
let Vue = require("vue"); import App from "./components/app"; let app_vue = new Vue({ el: "#main", components: { app: App } });
接下來看下這個app組件
它有2個子組件,分別是comment.vue和page.vue,通過動態(tài)綁定數(shù)據(jù),進(jìn)行父子間組件通信,我是這樣認(rèn)為的,對于 當(dāng)前在第幾頁 應(yīng)當(dāng)由 page.vue傳遞給app.vue,所以這里我們使用 雙向綁定,其余的如 params, url, isSync,即向后臺請求數(shù)據(jù)的東西以及是否同步或異步操作<當(dāng)然,這里我還沒有測試過后臺數(shù)據(jù),目前是直接js生成靜態(tài)數(shù)據(jù)>。
接下來,看下comment.vue評論組件
{{ totalCommentCount }} 條評論
{{ comment.name }}
{{ comment.context }}
這里的 getData.js 將在下面提到,是我們獲取數(shù)據(jù)的位置。
loading: 本意是在跳轉(zhuǎn)頁碼加載評論時,對于當(dāng)前評論加載0.5的透明度的遮罩,然后ajax通過它的回調(diào)函數(shù)來取消遮罩,現(xiàn)在這樣就不能實(shí)現(xiàn)了,只能強(qiáng)行寫下,然而是沒有用的..
hasComment: comment組件第一次加載的時候,我們就去請求獲得總共的數(shù)據(jù)長度,如果沒有數(shù)據(jù),則不顯示comment組件布局內(nèi)容
·curPageIndex·: 通過父組件app傳遞下來,使用的是props
這些數(shù)據(jù),我們都設(shè)置一個默認(rèn)值與類型比較好。
page.vue
主要是個對于 組件事件的運(yùn)用,=最常見的click事件,以及class與style的綁定,根據(jù) curPageIndex與this.pageIndex來比較,判斷是否擁有這個class,通過computed計(jì)算屬性,來獲得 頁碼數(shù)組 因?yàn)闀鶕?jù)當(dāng)前頁 有所變化,created的時候 計(jì)算出總頁碼。
最后一個是 目前生成獲取靜態(tài)數(shù)據(jù)的js文件.
// let data = { // avatar: "", 頭像 // name: "", 用戶名 // context: "", 評論內(nèi)容 // } let dataArr = []; function randomStr (len) { return Math.random().toString(36).substr(len); } function initData () { for (var i = 0; i<45 ; ++i) { let _avator = "./resources/" + i%7 + ".jpg"; let _name = randomStr(20); let _context = randomStr(2); dataArr.push({ avatar: _avator, name: _name, context: _context }); } } if (!dataArr.length) { initData(); } export function getCommentData (url = "", params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) { /* ajax */ let st = (curPageIndex - 1) * eachPageSize; let end = st + eachPageSize; return dataArr.slice(st, end); } export function getTotalCommentCount(url = "", params = null, isSync = true) { /* ajax */ return dataArr.length; } export function getTotalPageCount(url = "", params = null, isSync = true, eachPageSize = 7) { /* ajax */ return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize); }
就這樣了吧。
github地址
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79797.html
摘要:基礎(chǔ)布局的中主要為部分,分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后,提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣,在這篇文章中,我將繼續(xù)從一種常見的功能——表格入手,展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部...
摘要:基礎(chǔ)布局的中主要為部分,分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后,提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣,在這篇文章中,我將繼續(xù)從一種常見的功能——表格入手,展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部...
摘要:利用中間件實(shí)現(xiàn)異步請求,實(shí)現(xiàn)兩個用戶角色實(shí)時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯(lián)通的項(xiàng)目。刪除分組會連同組內(nèi)的所有圖片一起刪除。算是對自己上次用寫后臺的一個強(qiáng)化,項(xiàng)目文章在這里。后來一直沒動,前些日子才把后續(xù)的完善。 歡迎訪問我的個人網(wǎng)站:http://www.neroht.com/? 剛學(xué)vue和react時,利用業(yè)余時間寫的關(guān)于這兩個框架的訓(xùn)練,都相對簡單,有的...
摘要:中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個問題之后,不要暫時的離開電腦,如果沒有把握先不要提問。珍惜每一次提問,感恩每一次反饋,每個人工作還是業(yè)余之外抽出的時間有限,充分準(zhǔn)備好應(yīng)有的資源之后再發(fā)問,有利于問題能夠高效質(zhì)量地得到解決。 Vue.js資源分享 更多資源請Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/maid...
閱讀 3316·2021-11-25 09:43
閱讀 1304·2021-11-23 09:51
閱讀 3609·2021-10-11 11:06
閱讀 3698·2021-08-31 09:41
閱讀 3597·2019-08-30 15:53
閱讀 3510·2019-08-30 15:53
閱讀 965·2019-08-30 15:43
閱讀 3307·2019-08-29 14:02