VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
前言
我的JavaScript水平比較一般.好吧,是相當(dāng)?shù)囊话?因此,對(duì)于最新的前端框架技術(shù),實(shí)在是有點(diǎn)困難,但現(xiàn)實(shí)讓我必須面對(duì).因此,學(xué)習(xí)是唯一的出路.
縱向比較了N款前端框架,最終選擇了VUE，為什么呢？理由如下:
1.angular 前途不明,1.x學(xué)習(xí)曲線高,并且好像被放棄了,而2則還沒(méi)有正式推出.
2.react 比較厲害,但是沒(méi)接觸.
3.VUE簡(jiǎn)單,通過(guò)上手,比較適合我的思維和水平.
4.vue有中文文檔,我看起來(lái)比較舒服.
既然決定學(xué)習(xí)vue,那么最好的學(xué)習(xí)方法就是實(shí)戰(zhàn).偶然看到 cNodeJs.Org 論壇有公開(kāi)的api可以使用,這太方便了.于是,我決定用這個(gè)公開(kāi)的api來(lái)寫(xiě)一個(gè)demo.
接口簡(jiǎn)介
這是 cNodeJs.Org 公開(kāi)提供的的接口.當(dāng)然,他不僅僅是用來(lái)給我們前端用的.可以用在各種程序上.接口地址是http://cnodejs.org/api 通過(guò)這個(gè)頁(yè)面,詳細(xì)介紹了相關(guān)的內(nèi)容.
他們提供的接口是完全的,也就是說(shuō)我們可以通過(guò)這些接口再做一個(gè)他們這樣的論壇.
項(xiàng)目計(jì)劃
1.做一個(gè)列表頁(yè)面,可以讀取cNodeJs的列表內(nèi)容.
2.做一個(gè)詳情頁(yè)面,在列表頁(yè)面點(diǎn)擊鏈接,進(jìn)入詳情頁(yè)面.
3.采用ssi技術(shù)實(shí)現(xiàn)html代碼的復(fù)用.相關(guān)內(nèi)容搜索ssi+shtml了解.
4.css代碼使用sass預(yù)編譯.
文件目錄
├─index.shtml 渲染列表頁(yè)面
├─content.shtml 渲染詳情頁(yè)面
├─inc 碎片文件
│ ├─bar.html 側(cè)邊欄代碼
│ ├─footer.html 版權(quán)部分代碼
│ ├─head.html head區(qū)域調(diào)用js等代碼
│ └─header.html 頁(yè)頭logo以及導(dǎo)航代碼
└─res 資源文件
├─image
├─js
│ ├─common 我的代碼目錄
│ │ ├─common.js 公共執(zhí)行js
│ │ └─method.js 自定義方法js
│ ├─jquery jquery源碼目錄
│ ├─plugins 其他插件目錄
│ │ └─laypage laypage 分頁(yè)插件
│ └─vue VUE源碼目錄
└─style
├─style.scss sass源文件
├─style.css 編譯好的css 文件
├─base
└─scss
下載我的源文件 https://github.com/fengcms/vue-cNodeJsOrgTest
開(kāi)始寫(xiě)代碼
首先是按照上面的文件目錄設(shè)計(jì),開(kāi)始往里面寫(xiě)文件.res里面是資源目錄,你可以稍微看下,或者知道里面是什么就可以了.
其實(shí)重點(diǎn)就是 index.shtml和content.shtml兩個(gè)文件而已.
準(zhǔn)備首頁(yè)列表html文件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>title</title> <link rel="stylesheet" href="res/style/style.css"> </head> <body> <header class="header"> <h1 class="logo"> <a href="index.html" title="cnNodeJs.Org Home By FungLeo">cnNodeJs.Org Home By FungLeo</a> </h1> <nav class="nav"> <ul> <li>導(dǎo)航列表</li> </ul> </nav> </header> <section class="home"> <section class="main"> <ul class="list"> <li> <i class="user_ico"> <img src="#頭像url" alt="用戶(hù)名"> <span>用戶(hù)名</span> </i> <time class="time">發(fā)表于 5 天前</time> <a class="talk" href="content.html?鏈接ID">帖子標(biāo)題</a> </li> </ul> <div class="page"></div> </section> <aside class="bar"> <h3>本頁(yè)說(shuō)明</h3> ... </aside> </section> <footer class="copy"> 版權(quán)說(shuō)明 </footer> <div class="go_top"></div> </body> </html>
如上代碼,是我首先寫(xiě)出來(lái)的靜態(tài)頁(yè)面.配合我的css,效果如下圖所示:
完整代碼請(qǐng)從github 里面獲取
引入vue&jquery等js文件
<script src="res/js/jquery/jquery-2.2.3.min.js"></script> <script src="res/js/vue/vue.min.js"></script> <script src="res/js/common/common.js"></script>
從接口獲取數(shù)據(jù)
首先,無(wú)論怎么樣,我們先要從接口拿到數(shù)據(jù)才能接著往下干.我們通過(guò)jQuery用ajax方法把數(shù)據(jù)拿過(guò)來(lái)再說(shuō).
如下代碼:
$(function(){
$.ajax({
type:'get',
url:"http://cnodejs.org/api/v1/topics",
dataType: 'json',
success: function(data){
if (data.success){
console.log(data)
}else{
alert(JSON.stringify(data));
}
},
error: function(data){
alert(JSON.stringify(data));
}
});
})
代碼如上,我們看下瀏覽器控制臺(tái),截圖如下:
如上圖所示,我們成功的拿到了數(shù)據(jù).
分析數(shù)據(jù)
如上圖所示,數(shù)據(jù)里面包含了如下內(nèi)容
1.作者
1.作者頭像url
2.作者用戶(hù)名
2.作者ID
3.帖子內(nèi)容
4.發(fā)布時(shí)間
5.是否是精華
6.帖子ID
7.最后回復(fù)時(shí)間
8.回復(fù)數(shù)量
9.歸屬標(biāo)簽
10.帖子標(biāo)題
11.是否置頂
12.瀏覽統(tǒng)計(jì)
數(shù)據(jù)接口如上.當(dāng)然,如果是做全功能的論壇的話,這些數(shù)據(jù)都是有作用的.而在我的項(xiàng)目中,有很多是用不到的.我們來(lái)看下我需要那些.
<li> <i class="user_ico"> <img src="#頭像url" alt="用戶(hù)名"> <span>用戶(hù)名</span> </i> <time class="time">發(fā)表于 5 天前</time> <a class="talk" href="content.html?鏈接ID">帖子標(biāo)題</a> </li>
如上代碼所示,我們需要循環(huán)的內(nèi)容包括
1.作者頭像url
2.作者用戶(hù)名
3.發(fā)布時(shí)間
4.帖子ID
5.帖子標(biāo)題
沒(méi)有問(wèn)題,我們所需要的內(nèi)容,接口全部都是有的.
封裝 ajax 代碼
ajax 代碼雖然不長(zhǎng),但是我看著還是比較難受.因此,我用下面的代碼進(jìn)行封裝
// ajax get json 方法
function getJson(url,func){
$.ajax({
type:'get',
url:url,
dataType: 'json',
success: function(data){
if (data.success){
func(data);
}else{
alert("接口調(diào)用失敗");
}
},
error: function(data){
alert(JSON.stringify(data));
}
});
}
如上,在需要的地方,我們只需要用 getJson(url,func) 這個(gè)函數(shù)就可以了.
引用封裝好的代碼
$(function(){
var url = "http://cnodejs.org/api/v1/topics";
getJson(url,function(data){
console.log(data);
});
});
修改成這樣之后,我們?cè)賮?lái)看下,看看能不能打印出來(lái)我們所需要的數(shù)據(jù)?如下圖所示:
沒(méi)有任何問(wèn)題,我們依然獲得了數(shù)據(jù).我們?cè)诎堰@個(gè)回調(diào)的函數(shù)再封裝一下,改成下面的代碼
$(function(){
var url = "http://cnodejs.org/api/v1/topics";
getJson(url,pushDom);
});
function pushDom(data){
console.log(data);
}
好,如果沒(méi)有出錯(cuò)的話,絕對(duì)還是能夠打印出來(lái)接口數(shù)據(jù)的.這樣操作后,我們的代碼就無(wú)比的簡(jiǎn)練,并且可閱讀性大大增加了.而我們下面要做的事情,就是在 pushDom(data) 這個(gè)函數(shù)里面去做就好了.
vue 渲染代碼
首先,我們需要在頁(yè)面中用 vue 的方法寫(xiě)入我們要插入的數(shù)據(jù).
html代碼部分
<li v-for="info in data">
<i class="user_ico">
<img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}">
<span>{{ info.author.loginname }}</span>
</i>
<time class="time">{{ info.create_at }}</time>
<a class="talk" href="content.html?{{ info.id }}">{{ info.title }}</a>
</li>1
vue知識(shí)點(diǎn)
循環(huán)數(shù)據(jù) http://vuejs.org.cn/api/#v-for
JS代碼部分
function pushDom(data){
var vm = new Vue({
el: '.list',
data: data
});
}
我們來(lái)看一下效果:
好,非常興奮,短短的幾行代碼,我們就成功用vue將列表給渲染出來(lái)了.
小結(jié)
1.ajax獲取數(shù)據(jù)是關(guān)鍵
2.了解一點(diǎn)點(diǎn)vue的內(nèi)容,就可以上手了.
3.構(gòu)建項(xiàng)目時(shí),代碼和文件一定要清晰明了.
附錄
VUE官方網(wǎng)站
cNodeJs Api 詳細(xì)介紹
本系列教程源碼下載
VUEJS 實(shí)戰(zhàn)教程第一章,構(gòu)建基礎(chǔ)并渲染出列表
VUEJS 實(shí)戰(zhàn)教程第二章,修復(fù)錯(cuò)誤并且美化時(shí)間
VUEJS 實(shí)戰(zhàn)教程第三章,利用laypage插件實(shí)現(xiàn)分頁(yè)
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Vuejs第一篇之入門(mén)教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
- 深入理解Vue 的條件渲染和列表渲染
- 詳解vuejs之v-for列表渲染
- vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
- Vue列表頁(yè)渲染優(yōu)化詳解
- Vue.JS入門(mén)教程之列表渲染
- Vue.js學(xué)習(xí)教程之列表渲染詳解
- Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
- Vue 監(jiān)聽(tīng)列表item渲染事件方法
- Vue前端高效開(kāi)發(fā)之列表渲染指令
相關(guān)文章
vue.js學(xué)習(xí)之UI組件開(kāi)發(fā)教程
前端開(kāi)發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對(duì)于組件化開(kāi)發(fā)的需求也越來(lái)越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開(kāi)發(fā)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要介紹了詳解Vue2 添加對(duì)scss的支持，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式
這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中實(shí)現(xiàn)代碼高亮與語(yǔ)法著色的方法介紹
在Vue的開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語(yǔ)法著色，Vue提供了多種方式來(lái)實(shí)現(xiàn)代碼高亮與語(yǔ)法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法
這篇文章主要給大家分享了vue全局過(guò)濾器概念及注意事項(xiàng)和基本使用方法，下面文字圍繞vue全局過(guò)濾器的相關(guān)資料展開(kāi)具體的詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
這篇文章主要介紹了Vue+Koa2 打包后如何進(jìn)行線上部署，給大家分享了一些問(wèn)題及解決方法,需要的朋友可以參考下2019-07-07
Vue實(shí)現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶(hù)編輯。本文將詳細(xì)介紹如何實(shí)現(xiàn)contenteditable元素的雙向綁定，需要的可以參考一下2022-05-05