• MDN this 文件

this 指向

1
2
3
4
5
6
7
8
9

this 的指向為何
var obj = {
  name: '小明',
  fn: function(params) {
    console.log(params, this, window, arguments);
  }
}

obj.fn(1, 2, 3); // 這邊 this 指向 obj

什麼是語法糖?

語法糖讓程式更加簡潔，有更高的可讀性。語法糖不會影響程式運作，邏輯與當前 JS 一致。

物件字面值 Object literals

• 物件內的函式

1
2
3
4
5
6
7
8

const apple = {
  name: '蘋果',
  fn: function() {
    return this.name;
  }
}

console.log(apple.fn());

直接將 fn: function() {} 改為 fn() {} 即可

vue-loading-overlay 套件

npm vue-loading-overlay
cdn vue-loading-overlay

loading 樣式

loading.io

在根目錄新創建 vue.config.js 檔案以及deploy.sh 檔案

• GitHub Pages 手動推送更新

1. 新增 vue.config.js 檔案

1
2
3
4
5

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/你的 repository 名稱/'
      : '/'
}

flex 六角線上模擬器

為了要精進自己的切版技術，我報名了六角的網頁切版直播班，這幾天都在惡補 flex 的課程，以下就是我這周在上課做的筆記。

傳統的 float 排版只能左右流動，因此無法應對現在多元的排版方式。Ex:置中、垂直、等距等等。

flex 不只解決這些問題，還比 float 更有彈性，了解 flex 之後就可以做出更多樣化的網頁排版，所以 flex 是現在前端必學的超強大排版方式!

這個禮拜切版直播班的主題是期待已久的 Flex !!!

以前在學 float 跟 flex 都傻傻分不清楚，透過直播班還沒開課之前老師釋出的「Flex 精神時光屋」的教學與練習，幫助我釐清複雜的 Flex ~~

學會 Flex 真的讓排版更輕鬆，省掉 margin 、 padding 推來推去的麻煩!

這次切版直播班老師帶我們看了很多網頁的範例，透過互動回答也幫助我複習了 flex ，對 flex 的使用也更了解。

為了精進自己的切版能力，報名了六角學院推出的網頁切版直播班，這次上課讓我收穫很多，有複習到舊觀念也有增加新知識，以下為第一周上課的筆記。

Emmet

老師有建議想要提升切版速度，熟悉 Emmet 很重要，也可以減少打錯字找不到 bug 的狀況出現。

所以本周作業嘗試著全程使用 Emmet 做練習，雖然有些不習慣，但是真的有減少之前常常打錯字的問題。

keybr 英打練習

我的 keybr profile 連結

熟練英打也可以提升切版速度，因為有報名 21 天英打鍛鍊武道大會，所以持續都有在練習，也發現每天練 10 分鐘，真的可以積沙成多，每天都有進步一點點。

HEXO 資料夾設定好之後，當然希望它能正式上線，這樣才是真正的部落格!你可以透過部屬到 Github pages 上擁有超潮 github.io 域名(XDDD)，當然也可以省下買域名的錢，對我這個小資族來說 CP 值超高 !

將 HEXO 部屬到 Github 上要先開一個 repository，沒有 Github 帳號的可以先註冊一個，流程很快的。

附上 Github 註冊網址

以下是我不專業的分享，有誤敬請見諒!

接下來就趕緊進入部屬 HEXO 到 Github 上的步驟吧!

終於架好部落格了!!!

第一篇就要來記錄安裝 HEXO 的過程

因為報名參加六角舉辦的鼠年鐵人賽寫文馬拉松活動，每個禮拜都會在 Medium 上更新文章。後來看到許多參賽者都是自己架一個部落格寫技術文，也讓我躍躍欲試!所以我就開始摸索 HEXO 部落格架站!!

話不多說，趕快進入正題!