iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天) 系列

會使用 Vue 的前端框架來製作 workboard 可以學習到簡單的 Vue 操作,在過程中會使用一般導入 Vue 的 CDN來做簡單的使用,後期也會介紹 Vue CLI,CLI 部分會使用到 Route 來做頁面的切換等...,過程中也會使用 Bootstrap 來輔助前端的設計,也會大概介紹一下 Bootstrap 的使用方式。

參賽天數 24 天 | 共 24 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 1

(第一天)自我學習 - 簡單認識 Vue

為什麼會選擇 Vue Lucy老師最近剛學習Vue的前端框架,今天要帶利用30天來看看Vue的使用並且跟大家一起做出自己的WorkBoard,像是Trello...

2018-10-14 ‧ 由 LucyLiou 分享
DAY 2

(第二天)自我學習 - Vue 與 index.html

上一篇(自我學習 - 簡單認識 Vue) 今天Lucy老師要跟大家一起學習的有二個部分 Vue 在 index.html 可以如何使用? 什麼事 Trello...

2018-10-15 ‧ 由 LucyLiou 分享
DAY 3

(第三天)自我學習 - Vue 判斷與迴圈

上一篇(自我學習 - Vue 與 index.html) 條件判斷與迴圈 今天要學的是條件判斷 v-if 跟迴圈 v-for 的使用 v-if 使用 在想...

2018-10-16 ‧ 由 LucyLiou 分享
DAY 4

(第四天)自我學習 - 如何使用 v-on 按鈕事件

按鈕 v-on 事件 今天要講的屬性是 v-on 這個屬性 v-on 這個屬性有一些比較常用的事件(keydown, keyup, click, dbcli...

2018-10-17 ‧ 由 LucyLiou 分享
DAY 5

(第五天)自我學習 - Vue輸入並即時顯示

Vue 如何及時的顯示出使用者輸入的資料 今天會使用到的屬性是 v-model v-model 在這邊使用時會像是綁定在(input,select,tex...

2018-10-18 ‧ 由 LucyLiou 分享
DAY 6

(第六天)自我學習 - Vue Component

使用Vue Component Component 在管理方面變得好方便!現在可以把一個頁面切成一個一個的 Component ,這樣有什麼好處呢?把畫面拆解...

2018-10-19 ‧ 由 LucyLiou 分享
DAY 7

(第七天)自我學習 - 監督者 Watch

Watch 的方便之處 在使用 Watch 就像監督者一樣,隨時監督著變數,只要一有變動監督者就會啟動,並且觸發事件。 我們來試試看如何使用 Watch 這...

2018-10-20 ‧ 由 LucyLiou 分享
DAY 8

(第八天)自我學習 - 綁定標籤上的 Class

標籤上面的 Class 如何來控制呢? 這一次我們會使用的是 v-bind:class 這個屬性,為什麼需要這個呢?像是在使用樣式的轉換的時候很好用直接可以判...

2018-10-21 ‧ 由 LucyLiou 分享
DAY 9

(第九天)自我學習 - 標籤上指定一個 Class 做綁定

單一 Class 綁定 上次學的是把所有的 class 做綁定,不知道大家有沒有這樣的一個問題,如果想要綁定一個的話怎麼辦呢? //一開始在 data 裡面...

2018-10-22 ‧ 由 LucyLiou 分享
DAY 10

(第十天)自我學習 - v-if v-else-if v-else

判斷式 我在學前面的時候想說為什麼只有 v-if 這個屬性,為什麼沒有 else 或是什麼 else if 之類的,最近學的時候就發現了。 來看看如何使用吧...

2018-10-23 ‧ 由 LucyLiou 分享