iT邦幫忙

鐵人檔案

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

初學者前端應用30天 系列

前端javascript、Vue.js(vue cli)相關內容和套件使用

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文 團隊imac_web_Sr
DAY 1

[DAY1]參賽前言、方向介紹

從大概2年前就知道有這比賽,當時覺得實力不夠就沒參加比賽(現在也是),然而今年被半強迫參加,這真的是有夠緊張的,不知是否能順利完成。 第一次參加iT鐵人賽,也是...

2020-09-14 ‧ 由 jxes6102 分享
DAY 2

[DAY2]vue cli 安裝

Vue-cli 是由 Vue 官方提供的開發工具,可以快速透過指令建立出一個立即可用的開發環境。在我們用npm 安裝 vue-cli之前,需要先安裝node.j...

2020-09-15 ‧ 由 jxes6102 分享
DAY 3

[DAY3]vue-cli 實用套件安裝

我們在開發vue專案可能會用到bootstrap和jquery來美化頁面,串接api則要用到axios,所以我們要把它們引入到vue-cli中,讓功能更強大!!...

2020-09-16 ‧ 由 jxes6102 分享
DAY 4

[DAY4]vue 元件基礎和生命週期

tags: vue 元件基礎: 在用vue開發一定會用到components(元件),每個元件都有統一的架構,如下圖 template:裡要放一個div包住所有...

2020-09-17 ‧ 由 jxes6102 分享
DAY 5

[DAY5]vue router 簡單應用

tags: vue vue-route是用來跳轉頁面切換和傳值的東西 基本用法 一開始我們先找到專案裡的,src/router裡的index.js,這檔案是用來...

2020-09-18 ‧ 由 jxes6102 分享
DAY 6

[DAY6]vue v-model v-bind

v-bind v-bind 簡寫為:,可以用在html標籤裡的屬性,讓屬性值等於你的data。 用個簡單的範例:先在data新增一個link值為https://...

2020-09-19 ‧ 由 jxes6102 分享
DAY 7

[DAY7]vue watch computed v-on

基本概念這次我們來說明watch、computed、v-on的用法,watch有點像是監聽的概念,當監聽的值或物件有變動時,就會觸發watch裡的程式。comp...

2020-09-20 ‧ 由 jxes6102 分享
DAY 8

[DAY8]vue v-if-else v-show v-for

v-for v-for是一種新增畫面的方式,比起傳統一個一個新增html元素還要方便許多,我們先來做個簡單範例。 v-for 有分渲染物件和陣列的方式 物件:先...

2020-09-21 ‧ 由 jxes6102 分享
DAY 9

[DAY9]v-model、v-if、watch、computed 結合

經過了前幾天的教學,相信大家對v-model、v-if 、 watch、computed有初步的理解,我們現在來做一個小東西,將它們都結合起來。 我們來做三個i...

2020-09-22 ‧ 由 jxes6102 分享
DAY 10

[DAY10]vue filter 過濾器

我們這次來介紹vue filter的使用方式,翻成中文叫過濾器,它有點像computed,差別在computed可以應用在其他computed、methods、...

2020-09-23 ‧ 由 jxes6102 分享