VUEJS實戰教程第一章 構建基礎並渲染出列表
VUEJS實戰教程第一章,構建基礎並渲染出列表
2017年8月補充
2016年，我寫了一系列的 VUE 入門教程，當時寫這一系列博文的時候，我也只是一個菜鳥，甚至在寫的過程中關閉了程式碼審查，否則通不過校驗。
本來寫這一系列的博文只是為了給自己看的，但沒想到的是，這系列博文的點選量超過了2萬以上，搜尋引擎的排名也是非常理想，這讓我誠惶誠恐，生怕我寫的博文有所紕漏，誤人子弟。
再者，這一年的發展，VUE 專案快速迭代，看著我一年前寫的博文，很可能各種提示已經發生改變，對照著過時的資料，非常可能導致新手在學習的過程中產生不必要的困擾。
因此，本人決定，重寫這個系列的博文，力求以簡明、清晰、準確的圖文以及程式碼描述，配合 github 的專案開原始碼，給各位 VUE 新手提供一個高質量的入門文案。
以下為我寫的博文：
以下為原文
前言
我的javascript水平比較一般.好吧,是相當的一般.因此,對於最新的前端框架技術,實在是有點困難,但現實讓我必須面對.因此,學習是唯一的出路.
縱向比較了N款前端框架,最終選擇了VUE ,為什麼呢?理由如下:
- angular 前途不明,1.x學習曲線高,並且好像被放棄了,而2則還沒有正式推出.
- react 比較厲害,但是沒接觸.
- VUE簡單,通過上手,比較適合我的思維和水平.
- vue有中文文件,我看起來比較舒服.
既然決定學習vue,那麼最好的學習方法就是實戰.偶然看到 cNodeJs.Org 論壇有公開的api可以使用,這太方便了.於是,我決定用這個公開的api來寫一個demo
介面簡介
這是 cNodeJs.Org 公開提供的的介面.當然,他不僅僅是用來給我們前端用的.可以用在各種程式上.介面地址是http://cnodejs.org/api 通過這個頁面,詳細介紹了相關的內容.
他們提供的介面是完全的,也就是說我們可以通過這些介面再做一個他們這樣的論壇.
專案計劃
- 做一個列表頁面,可以讀取cNodeJs的列表內容.
- 做一個詳情頁面,在列表頁面點選連結,進入詳情頁面.
- 採用
ssi技術實現html程式碼的複用.相關內容搜尋ssi+shtml瞭解. css程式碼使用sass預編譯.
檔案目錄
├─index.shtml 渲染列表頁面├─content.shtml 渲染詳情頁面├─inc 碎片檔案│ ├─bar.html 側邊欄程式碼│ ├─footer.html 版權部分程式碼│ ├─head.html head區域呼叫js等程式碼│ └─header.html 頁頭logo以及導航程式碼└─res 資原始檔 ├─image ├─js │ ├─common 我的程式碼目錄 │ │ ├─common.js 公共執行js │ │ └─method.js 自定義方法js │ ├─jquery jquery原始碼目錄 │ ├─plugins 其他外掛目錄 │ │ └─laypage laypage 分頁外掛 │ └─vue VUE原始碼目錄 └─style ├─style.scss sass原始檔 ├─style.css 編譯好的css 檔案 ├─base └─scss
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
開始寫程式碼
首先是按照上面的檔案目錄設計,開始往裡面寫檔案.res裡面是資源目錄,你可以稍微看下,或者知道里面是什麼就可以了.
其實重點就是 index.shtml和content.shtml兩個檔案而已.
準備首頁列表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>導航列表</li> </ul> </nav> </header> <section class="home"> <section class="main"> <ul class="list"> <li> <i class="user_ico"> <img src="#頭像url" alt="使用者名稱"> <span>使用者名稱</span> </i> <time class="time">發表於 5 天前</time> <a class="talk" href="content.html?連結ID">帖子標題</a> </li> </ul> <div class="page"></div> </section> <aside class="bar"> <h3>本頁說明</h3> ... </aside> </section> <footer class="copy"> 版權說明 </footer> <div class="go_top"></div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
如上程式碼,是我首先寫出來的靜態頁面.配合我的css,效果如下圖所示:
完整程式碼請從
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>- 1
- 2
- 3
從介面獲取資料
首先,無論怎麼樣,我們先要從介面拿到資料才能接著往下幹.我們通過jquery用ajax方法把資料拿過來再說.
如下程式碼:
$(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)); } });})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
程式碼如上,我們看下瀏覽器控制檯,截圖如下:
如上圖所示,我們成功的拿到了資料.
分析資料
如上圖所示,資料裡面包含了如下內容
- 作者
1.作者頭像url
2.作者使用者名稱 - 作者ID
- 帖子內容
- 釋出時間
- 是否是精華
- 帖子ID
- 最後回覆時間
- 回覆數量
- 歸屬標籤
- 帖子標題
- 是否置頂
- 瀏覽統計
資料介面如上.當然,如果是做全功能的論壇的話,這些資料都是有作用的.而在我的專案中,有很多是用不到的.我們來看下我需要那些.
<li> <i class="user_ico"> <img src="#頭像url" alt="使用者名稱"> <span>使用者名稱</span> </i> <time class="time">發表於 5 天前</time> <a class="talk" href="content.html?連結ID">帖子標題</a></li>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
如上程式碼所示,我們需要迴圈的內容包括
- 作者頭像url
- 作者使用者名稱
- 釋出時間
- 帖子ID
- 帖子標題
沒有問題,我們所需要的內容,介面全部都是有的.
封裝 ajax 程式碼
ajax 程式碼雖然不長,但是我看著還是比較難受.因此,我用下面的程式碼進行封裝
// ajax get json 方法function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.success){ func(data); }else{ alert("介面呼叫失敗"); } }, error: function(data){ alert(JSON.stringify(data)); } });}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
如上,在需要的地方,我們只需要用 getJson(url,func) 這個函式就可以了.
引用 封裝好的程式碼
$(function(){ var url = "http://cnodejs.org/api/v1/topics"; getJson(url,function(data){ console.log(data); });});- 1
- 2
- 3
- 4
- 5
- 6
修改成這樣之後,我們再來看下,看看能不能打印出來我們所需要的資料?如下圖所示:
沒有任何問題,我們依然獲得了資料.我們在把這個回撥的函式再封裝一下,改成下面的程式碼
$(function(){ var url = "http://cnodejs.org/api/v1/topics"; getJson(url,pushDom);});function pushDom(data){ console.log(data);}- 1
- 2
- 3
- 4
- 5
- 6
- 7
好,如果沒有出錯的話,絕對還是能夠打印出來介面資料的.這樣操作後,我們的程式碼就無比的簡練,並且可閱讀性大大增加了.而我們下面要做的事情,就是在 pushDom(data) 這個函式裡面去做就好了.
vue 渲染程式碼
首先,我們需要在頁面中用 vue 的方法寫入我們要插入的資料.
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
JS程式碼部分
function pushDom(data){ var vm = new Vue({ el: '.list', data: data });}- 1
- 2
- 3
- 4
- 5
- 6
我們來看一下效果:
好,非常興奮,短短的幾行程式碼,我們就成功用vue將列表給渲染出來了.
小結
- ajax獲取資料是關鍵
- 瞭解一點點vue的內容,就可以上手了.
- 構建專案時,程式碼和檔案一定要清晰明瞭.