iT邦幫忙

鐵人檔案

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

JS 作品實戰應用 - Vue 電商網站 系列

前陣子參加六角學院 JS 作品實戰夏季班 , 透過鐵人賽 , 逼自己將學習過程重新複習 , 並寫出筆記來 , 溫故而知新 , 期望讓自己更加進步!

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

21. Vue 常用指令與方法 1

資料呈現於畫面上 如果要將 Vue Data 呈現於畫面上,主要有以下的方式: {{}}:使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。 v...

2020-10-06 ‧ 由 古德瑞 分享
DAY 22

22. Vue 常用指令與方法 2

v-model 表單運用 v-model 除了用在 input 上以外,所有的表單項目也都可套用,如 select、checkbox、textarea 皆可,不...

2020-10-07 ‧ 由 古德瑞 分享
DAY 23

23. Vue 常用指令與方法 3

v-bind 動態地綁定 HTML 屬性,將資料傳遞到元素上。 動態屬性 : 是 v-bind 的縮寫。 v-bind 可以使用各種 JS 的表達式。 可以...

2020-10-08 ‧ 由 古德瑞 分享
DAY 24

24. Vue 常用指令與方法 4

v-if, v-else, v-else-if v-if 用於條件的方式渲染一個區塊,當指令的內容回傳為真值時會產生結構內容。 // html <div...

2020-10-09 ‧ 由 古德瑞 分享
DAY 25

25. Vue指令練習

練習1 Vue 將資料呈現於畫面上 codepen Vue 創建資料 codepen // html <div id="app&quot...

2020-10-10 ‧ 由 古德瑞 分享
DAY 26

26. 產品管理頁面

課程練習 此階段多練習 Vue.js 的各項語法及指令,目標先以完成一頁式的產品新增、刪除、修改的頁面(先不串接 API)。課程練習連結 html <di...

2020-10-11 ‧ 由 古德瑞 分享
DAY 27

27. Vue 與 API 串接練習

課程練習 此階段是實際串接 API 的差異,串接 API 後的一頁式產品新增、刪除、修改的頁面。先製作登入頁驗證使用者帳號,再導入產品頁。 登入頁面 // 登入...

2020-10-12 ‧ 由 古德瑞 分享
DAY 28

28. 表單驗證

課程練習 串接 API 並可以呈現產品列表、加入購物車、購物車列表功能,表單送出前進行表單驗證。 課程練習連結 // JS // 匯入語系檔案 import...

2020-10-13 ‧ 由 古德瑞 分享
DAY 29

29. 建立路由

課程練習 新建完整的路由,並提供導覽進入大部分頁面(進入頁面僅需要文字,不必加入實際的頁面) 使用 Vue Cli 完成路由設定前台頁面: 首頁 產品列表...

2020-10-14 ‧ 由 古德瑞 分享
DAY 30

30. 鐵人賽心得

鐵人賽心得 這是第二次參加鐵人賽,第一次主題是javasript的入門學習,第二次是比較有一點難度的 VUE 入門學習。在這次學習過程,因為都是線上影片教學,都...

2020-10-15 ‧ 由 古德瑞 分享