iT邦幫忙

新手上路相關文章
共有 78 則文章

技術 Day36 - 實戰之引入 Bootstrap套件,客製化樣式

準備好之後,接下來我們要來引入 Bootstrap 套件了,參考 鐵人賽Day28 - Vue Cli 我們除了可以在 App.vue 的 style 引入 B...

技術 Day35 - 實戰之開啟新專案

這裡開始是實戰的學習紀錄,首先我們要先創建一個新專案,採用 Vue Cli 安裝辦法參考這裡 鐵人賽Day28 - Vue Cli 接著進行 vue route...

技術 Day34 - 自定義切換路由方法

在 vue router 文件中有提到一些方法,可以讓我們使用 參考資訊 我們先在 menu.vue 內新增兩個 <a> 連結,一個是切換到指定頁面...

技術 Day33 - 同一個路徑載入兩個頁面元件

如果我們想要在 App.vue 執行兩個 <router-view> 是否可行 ? 答案是可以的 我們先到 App.vue 在原先的 <rou...

技術 Day32 - 製作巢狀路由頁面

前面我們製作了 localhost:8080/#/page 的頁面 現在我們要製作 localhost:8080/#/page/child1 localhost...

新手初探 Vue 系列 第 30

技術 鐵人賽Day31 - 新增路由路徑及連結

按照鐵人賽的規則,只要發文30篇即可,但是我不小心把 Day5 給刪了,所以才會有 Day31 的出現 雖然我中間因為忘記發文早已失去資格了 但是這裡我還是...

新手初探 Vue 系列 第 29

技術 鐵人賽Day30 - Vue Router 及配置路由文件

首先我們要先安裝 Vue Router Vue Router 安裝參考資訊 先在終端機輸入 $npm install vue-router --save 接著我...

新手初探 Vue 系列 第 28

技術 鐵人賽Day29 - Vue 插曲之 Git 基本指令

這次的挑戰也即將要進入尾聲了,雖然不能準時完賽,但至少我盡力了,但還是覺得有點可惜 之所以會這麼跳 tone 跑到 Git 來,是因為剛好有這個需求,就順便來摸...

新手初探 Vue 系列 第 27

技術 鐵人賽Day28 - Vue Cli

Vue Cli是什麼? 基於 webpack 所建置的開發工具 便於使用第三方套件 (Bootstrap,axios,Vue Router...) 可運行...

新手初探 Vue 系列 第 26

技術 鐵人賽Day27 - 常用的陣列方法

前一篇有講到 .forEach() 和 .map(),所以這裡就不講這兩個部分,我們先有個基本的陣列資料: const people = [ { n...

新手初探 Vue 系列 第 25

技術 鐵人賽Day26 - ES6 之字串模板 Template String

在以往我們在字串的組合上會比較冗長,如下: const people = [ { name: '小明', friends: 2 },...

新手初探 Vue 系列 第 24

技術 鐵人賽Day25 - ES6 之箭頭函式

var callSomeone = function (someone) { return someone + '吃飯了' } 上面是我們一般傳統函式的寫...

新手初探 Vue 系列 第 23

技術 鐵人賽Day24 - ES6 之縮寫

const Frieza = '弗利沙' const GinyuTeam = { Ginyu: '基紐', Jeice: '吉斯', burter:...

新手初探 Vue 系列 第 22

技術 鐵人賽Day23 - ES6 之解構賦值

解構賦值的概念,有點像是把一份資料複製到另外一份,在以往我們要把陣列的值取出來,要透過宣告一個變數來放置,如下: let family = ['小明', '杰倫...

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 21

技術 鐵人賽Day22 - ES6 之展開與其餘

在陣列的操作上,ES6 多了許多方便的方法,首先先介紹展開,展開的部分可以讓我們合併陣列更直覺: let groupA = ['小明', '杰倫', '阿姨']...

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 20

技術 鐵人賽Day21 - ES6 之 let 和 const

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 19

技術 鐵人賽Day20 - slot 插槽

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

鐵人賽 Modern Web DAY 23
鉄人28号FX 系列 第 23

技術 鉄人28号FX 鉄人23号「字臉獅」@font-face

★ 地圖雷奧鎮近郊處 ↓↓↓ 閱讀前,建議先前往 鉄人22号「速記豹」獲取通行資格,此為雷奧鎮近郊續文。 顯示雷奧鎮位置圖 :真納悶?? 剛才問的問題和什麼通行...

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 18

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

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 17

技術 鐵人賽Day18 - props 的型別

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 16

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

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 15

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

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 14

技術 鐵人賽Day14 - Computed & Watch

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 13

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

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 12

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

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

鐵人賽 自我挑戰組 DAY 11
新手初探 Vue 系列 第 11

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

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

鐵人賽 自我挑戰組 DAY 10
新手初探 Vue 系列 第 10

技術 鐵人賽Day10 - 基礎語法整理

綜合了前面所講的,來稍微整理一下 Vue 的常用語法: 首先我們一樣先寫好 Vue 的相關資料,如下: <script> var app = new...

鐵人賽 自我挑戰組 DAY 9
新手初探 Vue 系列 第 9

技術 鐵人賽Day09 - 表單與資料雙向綁定

這篇要來介紹,基本常用的一些表單元素,與 Vue 的資料綁定時會如何做 我們一樣先把 Vue 的架構寫出來,只是這次在 data 內新增多個變數來存放不同的表單...

鐵人賽 自我挑戰組 DAY 8
新手初探 Vue 系列 第 8

技術 鐵人賽Day08 - 動態加上 class

這裡來介紹在 Vue 動態加上 class 一樣先把 Vue 的架構先撰寫出來,而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class,再...

鐵人賽 自我挑戰組 DAY 7
新手初探 Vue 系列 第 7

技術 鐵人賽Day07 - 修飾符

先前有講到 v-on 和 v-bind 指令 v-on 用在事件上,v-bind 用在綁定標籤的屬性上 而這些指令其實是有修飾符可以用的,意指縮寫。 拿前面章節...