準備好之後，接下來我們要來引入 Bootstrap 套件了，參考 鐵人賽Day28 - Vue Cli 我們除了可以在 App.vue 的 style 引入 B...
這裡開始是實戰的學習紀錄，首先我們要先創建一個新專案，採用 Vue Cli 安裝辦法參考這裡 鐵人賽Day28 - Vue Cli 接著進行 vue route...
在 vue router 文件中有提到一些方法，可以讓我們使用 參考資訊 我們先在 menu.vue 內新增兩個 <a> 連結，一個是切換到指定頁面...
如果我們想要在 App.vue 執行兩個 <router-view> 是否可行 ? 答案是可以的 我們先到 App.vue 在原先的 <rou...
前面我們製作了 localhost:8080/#/page 的頁面 現在我們要製作 localhost:8080/#/page/child1 localhost...
按照鐵人賽的規則，只要發文30篇即可，但是我不小心把 Day5 給刪了，所以才會有 Day31 的出現 雖然我中間因為忘記發文早已失去資格了 但是這裡我還是...
首先我們要先安裝 Vue Router Vue Router 安裝參考資訊 先在終端機輸入 $npm install vue-router --save 接著我...
Vue Cli是什麼? 基於 webpack 所建置的開發工具 便於使用第三方套件 (Bootstrap,axios,Vue Router...) 可運行...
前一篇有講到 .forEach() 和 .map()，所以這裡就不講這兩個部分，我們先有個基本的陣列資料: const people = [ { n...
在以往我們在字串的組合上會比較冗長，如下: const people = [ { name: '小明', friends: 2 },...
var callSomeone = function (someone) { return someone + '吃飯了' } 上面是我們一般傳統函式的寫...
const Frieza = '弗利沙' const GinyuTeam = { Ginyu: '基紐', Jeice: '吉斯', burter:...
這篇是透過網路教學資源自我學習，並將學到的東西做個紀錄 主要是在說明各個component中(XXX.vue 獨立分割的component)如何透過Vuex來...
解構賦值的概念，有點像是把一份資料複製到另外一份，在以往我們要把陣列的值取出來，要透過宣告一個變數來放置，如下: let family = ['小明', '杰倫...
在陣列的操作上，ES6 多了許多方便的方法，首先先介紹展開，展開的部分可以讓我們合併陣列更直覺: let groupA = ['小明', '杰倫', '阿姨']...
前言 今天要介紹的Getter，我們其實可以把它想像成Vue中的computed屬性。OK，那我們就開始吧！ Vuex Getter 介紹 使用時機： 昨天我們...
接下來的篇幅會開始寫關於 ES6 的部分，首先先從變數的宣告下手，在以往我們都是使用 var 來宣告變數 先來講 let 的部分，假設今天我們的程式碼如下: c...
前言 昨天我們簡單介紹了何謂 Vuex、 Vuex 運作流程以及 Vuex 可以幫我們解決什麼問題。那我們今天就來了解一下Vuex 核心概念該如何使用吧！ 開始...
本文同步發表於斜槓女紙部落格：Day29 Vue CLI專案實作(三)：VueScrollTo套件應用 嗨~今天要來說說實作vue-scrollto 的過...
前面幾篇講到了元件，並介紹元件之間由外而內資料傳遞的屬性 props 還有由內而外傳遞的事件 emit 元件也不只可以重複的讓我們來做使用，如果今天一個元件我們...
本文同步發表於Andy's Blog 前言 先前我們介紹到元件與元件之間的溝通方式之ㄧ：event bus，可以透過向bus發送事件與訂閱事件來將元件從原本...
本文同步發表於斜槓女紙部落格：Day28 Vue CLI專案實作(二)：Axios串接API及房間列表畫面 嗨！延續昨天的進度，今天要來實作首頁的房間列表...
本文同步發表於斜槓女紙部落格：Day27 Vue CLI專案實作(一)：新增路由路徑及首頁banner 嗨！延續昨天的進度，今天要來試著調整首頁畫面，將原...
前言 昨天介紹完Vue CLI2、3如何建立後，我們今天來認識一下Vue-router怎麼使用吧！ Vue Router簡介 Vue Router就是由前端模...
本文同步發表於斜槓女紙部落格：Day26 閒不下來的史萊姆(四)：幫專案搬新家吧！ 嗨！又見面了。 是的沒錯，我又手癢了~ 今天要來試著把之前的codin...
前言 延續昨天的話題，我們今天來介紹Vue ClI3建立的方法與檔案結構說明，並同時介紹一下CL3中很大的特色：GUI圖形化介面。 Vue CLI3特色 1.完...
本文同步發表於斜槓女紙部落格：Day25 萬丈高樓平地起(8)：Vue Router簡介，頁面跳轉不卡卡 今天要來和大家談談Vue Router的基本簡介...
前言 目前已經將元件內容大致上介紹完了，那我們今天就要先來介紹Vue CLI2吧！開始前我們先來認識何謂Vue CLI吧！ 什麼是Vue CLI? 基於Webp...
本文同步發表於斜槓女紙部落格：Day24 萬丈高樓平地起(7)：Vue CLI專案檔案結構簡介 延續昨天的進度，安裝好Vue CLI-3專案以後，應該可以...
本文同步發表於Andy's Blog 前言 在介紹slot之前，我們必須先瞭解一個觀念：編譯作用域 我們先來看個範例 codepen連結 <div i...
Jerry Huang
chunwen
鍾小呆
iT 邦幫忙鐵人賽