iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

學習 vue 30天 系列

一步一步的認識 vue 架構、開發流程、學習 vue 的相關知識,及未來展望。

鐵人鍊成 | 共 30 篇文章 | 52 人訂閱 訂閱系列文 RSS系列文 團隊火箭隊
DAY 11

Vue 11 computed 運算功能及 Methods 與 Computed 的使用情境

computed 直接會將結果存到變數裡面,並且可以直接使用個變數。 一開始在 computed 裡面定義方法,名字叫 reverseText,它會是一個 fu...

2019-09-12 ‧ 由 sunbu 分享
DAY 12

Vue 12 表單與資料的綁定

今天就來學學單純的表單與資料的綁定 表單與資料的綁定 上次有用過的 v-model 可以拿來綁定 textBox checkBox radioButton se...

2019-09-13 ‧ 由 sunbu 分享
DAY 13

Vue 13 元件基礎概念

有的時候我們會需要很多同樣的元件,例如在購物車裡增加數量的元件就有機會同時出現在一個地方很多次,如下圖: 但他們都會有各自的數量,如果我們用 vue 來做會如...

2019-09-14 ‧ 由 sunbu 分享
DAY 14

Vue 14 挑戰 TO DO LIST

到昨天的學習下一章節就是挑戰做 todolist,我想挑戰不看老師的教學試著做出 todolist。這邊把主要的新增、刪除以及顯示已完成做項目出來就好,好那要開...

2019-09-15 ‧ 由 sunbu 分享
DAY 15

Vue 15 進階模板語法介紹 (1) - 資料細節及動態切換 class name 及 style 多種方法

資料細節說明 {{}}: 這是資料雙向綁定的方法,在 {{}} 包含 HTML 的變數或是直接打 HTML 在裡面都只會呈現純文字而已,如果要顯示出 HTML...

2019-09-16 ‧ 由 sunbu 分享
DAY 16

Vue 16 進階模板語法介紹 (2) - v-for 使用細節

v-for 使用細節 v-for 可以用陣列或是物件帶入,比較特別的是用物件帶入的話,是用屬性來做索引。 <h4>陣列與物件的迴圈</h4&g...

2019-09-17 ‧ 由 sunbu 分享
DAY 17

Vue 17 進階模板語法介紹 (3) - v-if 模板判斷

v-if 模板判斷 我們熟知到 if 判斷式通常都會有 else if 或 else 來做後續的判斷處理,那 v-if 當然也會有 v-else-if 或 v-...

2019-09-18 ‧ 由 sunbu 分享
DAY 18

Vue 18 進階模板語法介紹 (4) - 計算及監聽

計算及監聽 這一個小節我們會用到的資料如下: var app = new Vue({ el: '#app', data: { arrayData: [{...

2019-09-19 ‧ 由 sunbu 分享
DAY 19

Vue 19 進階模板語法介紹 (5) - 表單細節操作

表單補充介紹 今天會用到的資料: var app = new Vue({ el: '#app', data: { singleR...

2019-09-20 ‧ 由 sunbu 分享
DAY 20

Vue 20 進階模板語法介紹 (6) - 表單細節操作 - v-on 的頁面操作細節

今天會用到的資料: <script> var app = new Vue({ el: '#app', dat...

2019-09-21 ‧ 由 sunbu 分享