iT邦幫忙

vue學習筆記相關文章
共有 135 則文章

技術 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 系列 第 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:...

技術 [學習筆記] Vuex 保存登入的用戶名

這篇是透過網路教學資源自我學習,並將學到的東西做個紀錄 主要是在說明各個component中(XXX.vue 獨立分割的component)如何透過Vuex來...

新手初探 Vue 系列 第 22

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 29
前端新手筆記-Vue.js 系列 第 29

技術 Day29 Vuex Getter用法介紹

前言 今天要介紹的Getter,我們其實可以把它想像成Vue中的computed屬性。OK,那我們就開始吧! Vuex Getter 介紹 使用時機: 昨天我們...

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

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

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

鐵人賽 自我挑戰組 DAY 28
前端新手筆記-Vue.js 系列 第 28

技術 Day 28 Vuex state用法介紹

前言 昨天我們簡單介紹了何謂 Vuex、 Vuex 運作流程以及 Vuex 可以幫我們解決什麼問題。那我們今天就來了解一下Vuex 核心概念該如何使用吧! 開始...

鐵人賽 自我挑戰組 DAY 29

技術 Day29 Vue CLI專案實作(三):VueScrollTo套件應用

本文同步發表於斜槓女紙部落格:Day29 Vue CLI專案實作(三):VueScrollTo套件應用 嗨~今天要來說說實作vue-scrollto 的過...

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

技術 鐵人賽Day20 - slot 插槽

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

鐵人賽 自我挑戰組 DAY 27
前端新手筆記-Vue.js 系列 第 27

技術 Day 27 Vuex 簡介

本文同步發表於Andy's Blog 前言 先前我們介紹到元件與元件之間的溝通方式之ㄧ:event bus,可以透過向bus發送事件與訂閱事件來將元件從原本...

鐵人賽 自我挑戰組 DAY 28

技術 Day28 Vue CLI專案實作(二):Axios串接API及房間列表畫面

本文同步發表於斜槓女紙部落格:Day28 Vue CLI專案實作(二):Axios串接API及房間列表畫面 嗨!延續昨天的進度,今天要來實作首頁的房間列表...

鐵人賽 自我挑戰組 DAY 27

技術 Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner

本文同步發表於斜槓女紙部落格:Day27 Vue CLI專案實作(一):新增路由路徑及首頁banner 嗨!延續昨天的進度,今天要來試著調整首頁畫面,將原...

鐵人賽 自我挑戰組 DAY 26
前端新手筆記-Vue.js 系列 第 26

技術 Day 26 Vue-router簡介

前言 昨天介紹完Vue CLI2、3如何建立後,我們今天來認識一下Vue-router怎麼使用吧! Vue Router簡介 Vue Router就是由前端模...

鐵人賽 自我挑戰組 DAY 26

技術 Day26 閒不下來的史萊姆(四):幫專案搬新家吧!

本文同步發表於斜槓女紙部落格:Day26 閒不下來的史萊姆(四):幫專案搬新家吧! 嗨!又見面了。 是的沒錯,我又手癢了~ 今天要來試著把之前的codin...

鐵人賽 自我挑戰組 DAY 25
前端新手筆記-Vue.js 系列 第 25

技術 Day 25 Vue CLI3介紹(含GUI介面介紹)

前言 延續昨天的話題,我們今天來介紹Vue ClI3建立的方法與檔案結構說明,並同時介紹一下CL3中很大的特色:GUI圖形化介面。 Vue CLI3特色 1.完...

鐵人賽 自我挑戰組 DAY 25

技術 Day25 萬丈高樓平地起(8):Vue Router簡介,頁面跳轉不卡卡

本文同步發表於斜槓女紙部落格:Day25 萬丈高樓平地起(8):Vue Router簡介,頁面跳轉不卡卡 今天要來和大家談談Vue Router的基本簡介...

鐵人賽 自我挑戰組 DAY 24
前端新手筆記-Vue.js 系列 第 24

技術 Day24 Vue CLI2與Webpack介紹

前言 目前已經將元件內容大致上介紹完了,那我們今天就要先來介紹Vue CLI2吧!開始前我們先來認識何謂Vue CLI吧! 什麼是Vue CLI? 基於Webp...

鐵人賽 自我挑戰組 DAY 24

技術 Day24 萬丈高樓平地起(7):Vue CLI專案檔案結構簡介

本文同步發表於斜槓女紙部落格:Day24 萬丈高樓平地起(7):Vue CLI專案檔案結構簡介 延續昨天的進度,安裝好Vue CLI-3專案以後,應該可以...

鐵人賽 自我挑戰組 DAY 23
前端新手筆記-Vue.js 系列 第 23

技術 Day23 Vue Component(元件)-slot元件插槽

本文同步發表於Andy's Blog 前言 在介紹slot之前,我們必須先瞭解一個觀念:編譯作用域 我們先來看個範例 codepen連結 <div i...