iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
自我挑戰組

輕鬆Vue一下 系列

簡單介紹Vue框架,並實作一個網頁

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1-為什麼要學Vue?

Vue是近幾年開始流行的一種框架,它一開始是以AngularJS作為靈感進行開發的,因此它的一些語法和AngularJS相似,相較於其他常見的React、Ang...

2019-09-17 ‧ 由 linchij 分享
DAY 2

Day2-Hello Vue

1.先新建一個html網頁,並引入vue.js的cdn,藉此導入整個框架。2.因為在框架中是利用{{}}的格式獲取資料內容,而message則是自訂的資料名稱3...

2019-09-18 ‧ 由 linchij 分享
DAY 3

Day3-條件渲染(1)

v-if是vue.js框架中扮演條件渲染的角色,有時會利用數據直接進行控制,有時還會加上一些邏輯運算,像是:若在v-if中加入!則意味著將原有的資料否定,tru...

2019-09-19 ‧ 由 linchij 分享
DAY 4

Day4-條件渲染(2)

在條件渲染中,還有一個元素v-show,它的用法跟v-if大同小異,因此不多做說明,在這裡主要要說明它們之間的差別。如果使用v-if來隱藏網頁內容,那網頁加載時...

2019-09-20 ‧ 由 linchij 分享
DAY 5

Day5-迴圈v-for

v-for在vue中扮演著迴圈的角色,它的用法分為兩種:1.顯示出目標陣列:item in items表示著一個名為item的物件在items陣列中循環,再藉由...

2019-09-21 ‧ 由 linchij 分享
DAY 6

Day6-雙向綁定v-model(文字)

v-model屬性可以在表單input、textarea及select元素上創建雙向數據綁定,它會根據物件類型自動選取正確的方法來更新元素,但是它會忽略元素中的...

2019-09-22 ‧ 由 linchij 分享
DAY 7

Day7-雙向綁定v-model(單選&複選)

在數據的雙向綁定中,有時會遇到單選和複選的問題,而它們在初始值設定上不太一樣,前者就像一般的字串內容設定一個字串即可;後者則是需以一個陣列的型態來設定初始值,如...

2019-09-23 ‧ 由 linchij 分享
DAY 8

Day8-事件處理v-on:click

在vue中當然也有用來完成事件處理的屬性,那就是v-on:click。一般來說,它可以設定一些簡單的事件處理,而一些較為複雜的會透過vue中的method來進行...

2019-09-24 ‧ 由 linchij 分享
DAY 9

Day9-v-bind(Class)

v-bind在vue中是一個可以用來處理css內容的屬性,它可以使用陣列的格式來處理欲使用的class,有時會簡寫成:class。利用v-bind在網頁中的di...

2019-09-25 ‧ 由 linchij 分享
DAY 10

Day10- v-bind(style)

v-bind在vue中除了可以使用陣列的格式來處理欲使用的class,它也可以用來處理style中各種屬性的值,可以用:style作為簡寫。這裡以較常見的col...

2019-09-26 ‧ 由 linchij 分享