iT邦幫忙

鐵人檔案

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

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

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

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

(第十一天)自我學習 - 都有 v-if 為什麼還要有 v-show

v-show 使用 v-show 很簡單跟 v-if 使用起來一樣 //建立一個變數,利用觸發按鈕的方式來讓變數切換 data: { result...

2018-10-24 ‧ 由 LucyLiou 分享
DAY 12

(第十二天)自我學習 - Vue checkbox 複選

複選資料的取得 我們來學一下當資料被複選時,可以如何取得這次會使用的屬性有 v-model //在 data 裡面加入一個 datas 的 list da...

2018-10-25 ‧ 由 LucyLiou 分享
DAY 13

(第十三天)自我學習 - 下拉式選單

下拉式選單的資料存取與顯示 今天來試試看下拉式選單要如何使用吧! 先把資料準備好! data: { //等等要做的事最喜歡的城市 Myfav...

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

(第十四天)自我學習 - component 第二次學習

component 資料顯示 在第一次學習 component 的時候,只有標籤可以使用,但是這次有學到如何在 component 顯示 data 裡面的資料...

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

(第十五天)自我學習 - component Table 標籤使用

Table 標籤使用 component 在使用 Table 標籤的時候需要注意,因為普通使用標籤的時候可以直接的使用,但是 component 在使用的時候...

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

(第十六天)自我學習 - component 事件傳遞

使用 component 的事件傳遞 當我們在使用 component 的時候會有組件,那這些組件之間會如何傳遞資料呢?又或者如何使資料可以進入到組建中呢?...

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

(第十七天)自我練習專案 - 資料的移動

開始練習 WorkBoard 需要的套件 Vue.Draggable 是這次我們用來製作 WorkBoard 的重要套件,這個套件可以實現我們在實作 Work...

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

(第十八天)自我練習專案 - 可以移動的資料

透過 Vue.Draggable 來做資料搬移 我們這次來試試看簡單的資料搬移,資料在同一個 list 裡面我們可以如何透過 Draggable 來把資料移動...

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

(第十九天)自我練習專案 - 雙綁定 list

移動到另外一個 list 當我們在做卡片的拖移的時候可能不只要改動同一個 list 我們也需要改動另外一個 list。 那先在 data 裡面新增兩個 l...

2018-11-01 ‧ 由 LucyLiou 分享
DAY 20

(第二十天)自我練習專案 - Column 的移動

移動 Column 我們這次要學的是 column 的移動,因為每個卡片都需要有自己的意思,當然在 column 裡面會有卡片,所以 Column 代表我們卡...

2018-11-02 ‧ 由 LucyLiou 分享