iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

網頁設計靠 Vue.js 轉前端 系列

網頁設計靠 Vue.js 轉前端

DAY 1

Vue[01]-為什麼是Vue?

身為一個網頁設計師,過去一直夾在設計與前端工程之間,這曖昧的角色定位隨著網頁技術的演進開始改變,網頁切版將普遍歸類到前端工程,而成為前端工程當然不能只會Html...

2018-10-16 ‧ 由 adam747 分享
DAY 2

Vue[02]-開發環境安裝

今天要先來安裝vue的開發環境了!首先我們要先在電腦中安裝node.js,它是什麼呢?簡單說它是一個能夠在伺服器端運行JavaScript的開放原始碼,並能跨平...

2018-10-17 ‧ 由 adam747 分享
DAY 3

Vue[03]-套件推薦

安裝套件 VS Code除了內建市集介面外,還可到網站https://marketplace.visualstudio.com/vscode逛逛,雖然VS Co...

2018-10-18 ‧ 由 adam747 分享
DAY 4

Vue[04]-安裝Vue ui

今天要來安裝vue ui了!它把過去許多要自已輸入執行的內容,全改用視覺化的網頁介面表現,對設計來說可是一大福音!首先打開vs code,在上方選單選擇「終端機...

2018-10-19 ‧ 由 adam747 分享
DAY 5

Vue[05]-資料綁定

今天要開始寫點簡單的vue,首先先說明為什麼要用資料綁定!現今的網站開始使用component觀念,也就是將會重復使用到的網頁結構寫成一個「元件」,在需要用到它...

2018-10-20 ‧ 由 adam747 分享
DAY 6

Vue[06]-資料雙向綁定

昨天學完了基本資料綁定,它是單純的綁入data內的資料,所以屬於「單向綁定」,那如果我們也可以輸入資料呢?那就叫「雙向綁定」了! v-model 要講到「雙向綁...

2018-10-21 ‧ 由 adam747 分享
DAY 7

Vue[07]-陣列v-for

昨天講完了「雙向綁定」,大家因該還記得有提到陣列v-for吧?它也是非常常用的基本語法喔!先來寫個簡單的範例吧!我們用<ul><li>來...

2018-10-22 ‧ 由 adam747 分享
DAY 8

Vue[08]-Components

還記得一開始提過的component觀念嗎?我們把會重復使用的網頁結構寫成一個元件,需要時就引用它,這麼做不但能減少不必要的重工,還能讓維護更加方便有效率!現在...

2018-10-23 ‧ 由 adam747 分享
DAY 9

Vue[09]-Props接收資料

昨天我們寫完component,今天要來把資料傳進去了!props就是今天的主角,放心它一樣是平易近人的,現在我們打開昨天的檔案當實例完成它。 Props實做...

2018-10-24 ‧ 由 adam747 分享
DAY 10

Vue[10]-Router

過去9天裡我們學了些基礎,但目前一直在做單頁式的網頁,只有在App.vue檔上做編輯,該如何新增子頁並設定連結? Router 今天我們就來看vue route...

2018-10-25 ‧ 由 adam747 分享