Vue 001 構建一個投票介面
阿新 • • 發佈：2018-12-26
目標：構建一個投票介面顯示，票數高的在上方，票數低的在下方，可以點選進行投票，並動態顯示。
推薦使用工具：
sublime Text 谷歌瀏覽器
搭建主介面：
<!DOCTYPE html> <html> <head> <!--引入css檔案--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> <link rel="stylesheet" href="../public/styles.css" /> </head> <body> <div id="app"> <h2 class="title has-text-centered dividing-header">UpVote!</h2> </div> <!--引入vue，引入兩個js檔案--> <script src="https://unpkg.com/vue"></script> <script src="./seed.js"></script> <script src="./main.js"></script> </body> </html>
效果如圖：
新增一個投票詳情資訊：
<!DOCTYPE html> <html> <head> <!--引入css檔案--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> <link rel="stylesheet" href="../public/styles.css" /> </head> <body> <div id="app"> <h2 class="title has-text-centered dividing-header">UpVote!</h2> <div class="section"> <article class="media"> <figure class="media-left"> <img class="image is-64x64" src="../public/images/submissions/image-yellow.png"> </figure> <div class="media-content"> <div class="content"> <p> <strong> <a href="#" class="has-text-info">Yellow Pail</a> <span class="tag is-small">#4</span> </strong> <br> On-demand sand castle construction expertise. <br> <small class="is-size-7"> Submitted by: <img class="image is-24x24" src="../public/images/avatars/daniel.jpg"> </small> </p> </div> </div> <div class="media-right"> <span class="icon is-small"> <i class="fa fa-chevron-up"></i> <strong class="has-text-info">10</strong> </span> </div> </article> </div> </div> <!--引入vue，引入兩個js檔案--> <script src="https://unpkg.com/vue"></script> <script src="./seed.js"></script> <script src="./main.js"></script> </body> </html>
效果如圖：
採用資料驅動進行渲染：
定義資料（這裡是寫死的資料，實際上從服務端獲取）：
定義一個Vue例項，el確定Vue元素，data是資料：
資料繫結（使用“{{}}”進行資料繫結）：
注：對於html的href，id，src等屬性進行繫結的時候，需要配合v-bind:進行使用，如v-bind:id="{{}}"
效果如圖 ：
迴圈繫結（對於重複出現的部分迴圈繫結）：
article是包含的整個迴圈的部分。
迴圈的基本語法是：
為了避免衝突或者重複，我們為元素指定key：
修改原來投票區的程式碼：
<div class="section">
<article v-for="submission in submissions" v-bind:key="submission.id"
class="media">
<figure class="media-left">
<img class="image is-64x64"
v-bind:src="submission.submissionImage">
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>
<a v-bind:href="submission.url" class="has-text-info">
{{ submission.title }}
</a>
<span class="tag is-small">#{{ submission.id }}</span>
</strong>
<br>
{{ submission.description }}
<br>
<small class="is-size-7">
Submitted by:
<img class="image is-24x24"
v-bind:src="submission.avatar">
</small>
</p>
</div>
</div>
<div class="media-right">
<span class="icon is-small">
<i class="fa fa-chevron-up"></i>
<strong class="has-text-info">{{ submission.votes }}</strong>
</span>
</div>
</article>
</div>顯示效果：
對投票列表進行排序：
修改迴圈節點所使用的資料來源：
效果如圖：
Vue事件繫結：
定義Vue方法：
效果預繫結：
