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