iT邦幫忙

鐵人檔案

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

新手初探 Vue 系列

想藉由這次活動,來初探 Vue 30天

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

鐵人賽Day11 - 動態切換 class 和 style 多種方法

先建置 Vue 資料的基本狀態: <script> var app = new Vue({ el: '#app', data: {...

2019-09-27 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day12 - v-for 使用細節

在前面我們有稍微提到了 v-for,現在來複習一下,一樣先建構 Vue 的基本結構和資料: <script> var app = new Vue({...

2019-09-29 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day13 - v-if 使用細節

在前面提到 v-if 都是搭配 v-for 來做使用,但 v-if 也可以單獨的做使用一樣先給 Vue 的架構和資料: <script> var a...

2019-10-02 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day14 - Computed & Watch

接下來要來介紹 Vue 裡面的 computed(計算)& watch(監聽)computed 的運用上,是我們要返回某個值且顯示到頁面上,會用到的舉個...

2019-10-03 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day16 - Vue.js 基礎元件認識

在 Vue 裡面,我們可以使用元件來動態掛載 HTML而元件到底是什麼? 如果以 HTML 來說的話,就會類似像是 Header Content 這樣一個區塊一...

2019-10-04 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day17 - Vue.js 基礎元件認識 -2

我們在前面講了很長篇幅的元件,那元件可以分為局部註冊跟全域註冊,前面的方式我們都是採用全域註冊,而所謂的全域就是指,當我在新增一個 Vue 的應用程式時,它也可...

2019-10-05 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day18 - props 的型別

在前面我們已經了解了元件,現在我們要來多加說明 props 這個屬性props 是由外而內傳遞資料所使用的屬性有時候我們傳遞的資料也許是需要數值型態來計算的,這...

2019-10-06 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day19 - 向外傳遞事件 emit

前面講到 props,它是由外而內傳遞資料的一種屬性不同於 props,emit 是一種事件,而且特性是由內至外有一種情境是,當我們在 Vue 的 method...

2019-10-07 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day20 - slot 插槽

前面幾篇講到了元件,並介紹元件之間由外而內資料傳遞的屬性 props 還有由內而外傳遞的事件 emit元件也不只可以重複的讓我們來做使用,如果今天一個元件我們只...

2019-10-14 ‧ 由 Jerry Huang 分享
DAY 11

鐵人賽Day21 - ES6 之 let 和 const

接下來的篇幅會開始寫關於 ES6 的部分,首先先從變數的宣告下手,在以往我們都是使用 var 來宣告變數先來講 let 的部分,假設今天我們的程式碼如下: co...

2019-10-15 ‧ 由 Jerry Huang 分享