iT邦幫忙

鐵人檔案

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

從0開始vue.js的30天學習日誌 系列

實在想不到什麼有趣的題目,藉這個機會給自己一點動力學習新技術(對我自己來說的…),挑戰自己gogo一定要完賽~~~~

鐵人鍊成 | 共 30 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文 團隊這樣母Tom姆熊
DAY 1

01 給自己一個學習的動力 ( 前言 )

大家好,第一次參加鐵人賽,覺得既興奮又緊張,以前沒打文章的經驗,開始的頭兩篇請容許我廢話連篇... 不免俗先自我介紹一下(>∀•́)b 我是位前端設計師,...

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

02 開始Vue.js的前置準備

開始前爬了一些文,大大們都說vue.js輕鬆易學,去谷哥了一下在開始vue.js之前須要會什麼東西,因目前沒有實務操縱資料的經驗,以我的學習速度真的是很怕文章難...

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

03 創建Vue應用程式

在引入vue之後,來建立第一個應用程式: <script> new Vue({ el: "#app01",...

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

04 Vue的模板語法 - v-text, v-html

上篇建立了一個簡單的Vue應用程式,並利用花括號{{}}將data的值綁定至DOM,除此之外也能使用v-text語法: v-text: <!--html-...

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

05 Vue的模板語法 - v-bind屬性綁定

前面提到可使用v-text、{{}}來做資料綁定,但若要綁定html屬性為資料時,必須透過v-bind語法: v-bind 範例 使用v-bind指令:後面接欲...

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

06 Vue的模板語法 - v-bind綁定class及style

綁定class v-bind:class可以與原本的class屬性共存,意思就是說原本HTML屬性上已經有定class了,後面可以再接v-bind:class...

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

07 Vue的模板語法 - v-on偵聽事件

使用v-on指令可以偵聽DOM 事件,並執行後續方法 下面例子在button上bind click事件,在click時改變資料(將原先定義好的counter +...

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

08 Vue的模板語法 - 事件動態切換class的小練習

綜合以上模板語法的學習,過程中照著教學步驟做了一遍,官方範例都很清楚,但實際做的時候一定會遇到滿多問題的,所以想了一個簡單的例子讓自己實作,雖然被範例洗腦太深可...

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

09 Vue的模板語法 - v-model表單雙向綁定

v-model是用在表單、及元素來做雙向數據綁定,就像是結合了v-bind 跟 v-on一樣,初始綁定並呈現資料外還會監聽事件來做資料更新。 官方文件的範例:...

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

10 Vue的模板語法 - 條件判斷 v-if, v-else, v-else-if, v-show

今天來學習條件判斷的指令,Vue提供以下指令可以用來做條件渲染(Conditional Rendering): v-if v-if用來控制元素要不要render...

2018-10-25 ‧ 由 UT 分享