前陣子參加六角學院 JS 作品實戰夏季班 , 透過鐵人賽 , 逼自己將學習過程重新複習 , 並寫出筆記來 , 溫故而知新 , 期望讓自己更加進步!
資料呈現於畫面上 如果要將 Vue Data 呈現於畫面上,主要有以下的方式: {{}}:使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。 v...
v-model 表單運用 v-model 除了用在 input 上以外,所有的表單項目也都可套用,如 select、checkbox、textarea 皆可,不...
v-bind 動態地綁定 HTML 屬性,將資料傳遞到元素上。 動態屬性 : 是 v-bind 的縮寫。 v-bind 可以使用各種 JS 的表達式。 可以...
v-if, v-else, v-else-if v-if 用於條件的方式渲染一個區塊,當指令的內容回傳為真值時會產生結構內容。 // html <div...
練習1 Vue 將資料呈現於畫面上 codepen Vue 創建資料 codepen // html <div id="app"...
課程練習 此階段多練習 Vue.js 的各項語法及指令,目標先以完成一頁式的產品新增、刪除、修改的頁面(先不串接 API)。課程練習連結 html <di...
課程練習 此階段是實際串接 API 的差異,串接 API 後的一頁式產品新增、刪除、修改的頁面。先製作登入頁驗證使用者帳號,再導入產品頁。 登入頁面 // 登入...
課程練習 串接 API 並可以呈現產品列表、加入購物車、購物車列表功能,表單送出前進行表單驗證。 課程練習連結 // JS // 匯入語系檔案 import...
課程練習 新建完整的路由,並提供導覽進入大部分頁面(進入頁面僅需要文字,不必加入實際的頁面) 使用 Vue Cli 完成路由設定前台頁面: 首頁 產品列表...