1-1

vue cli ui操作建立專案、現今 webpack 有內建壓縮和醜化功能雖然 gulp 的 webpack 插件版本有點舊，但它參數可以 require webpack 和寫好的 webpack.config 進去，方便很多全域安裝 eslint &完成 twitch 專案的 airbnb 語法規範

vue 元件的 data 都用函式 return，因為多個組件都會用到同個一包資料 export 元件的 name 不要取 html 標籤相同名稱的，同樣引入時也不要取撞標籤名稱的 props 傳值父元件寫在標籤內值名稱和子元件接收值的名稱要一樣被傳入值的元件不能直接修改 props 值，綁 v-model 改值可用 computed 內設一個物件變數(原本是用函式變數)，物件內設 set() 和 get() 方法，get 拿 props 值、 set(val) 可拿變動後的參數去傳父或做其他事若純粹改值後傳父，沒有其他更多事情要做的話，可改用 this.$emit('update:text', val); 純粹通知父更新 props值，在父層就不用設事件函式，直接在 :text 綁的值後面加 .sync (例: <component :text.sync="test" />) vue router 如果以 component: () => import('../views/About.vue') 用箭頭函式載入，在網頁上則會分支 js檔、進到這個路由頁面後才 request router 中 redirect 為重定向，假如到 /a 可以定向為 /b ，亦可以 /a 定向到 /a/2 做為預設

路由傳參：query 在網址後 + ?day=4 ，即為 this.$route.query.day = 4 params 在網址後 + /4 和路徑綁定 path: '/dataRouter/:day' ，即為 this.$route.params.day = 1 路由連接帶參數可寫在 router-link 裡或函式內 this.$router.push，replace 為替換目前的頁面，不會留下 history 在 vue 元件中用 addEventListener 需在 destroyed 時 removeEventListener，不然元件重新渲染的話，事件會重複註冊觸發 query 或 params 解析可能為字串，要用在數字計算上要先 parseInt() 轉換在 VueJS30 的範例中，傳參導向的路由往上一頁時畫面不會更新，故需要 watch $route 的變化，畫面才會響應 vuex複習：在組件在 mounted 中 dispatch 給 actions 拿 api 資料、vuex 中 actions 做 request ，將回傳結果 commit 到 mutations 來做 state 資料的更新組件在 computed 中拿 state 的資料，如會修改到，則改 get、set 方式，在 set() 中 commit 給 mutations

vuex 可以模組化分開管理，有兩種處理方式： 1.根據只有短時間處理需求的可以在 vue 組件中引入 store 的模組檔並在 beforeMount() 中向 this.$store.registerModule(‘命名’, 引入的變數名稱) 註冊，並在組件 destroyed 中解除註冊 this.$store.unregisterModule('命名') 這樣 store 模組的狀態資料只有在那個組件被引用時才會產生，在其他組件時不會產生，解除註冊是因為避免組件重新渲染時重複註冊 2.在主 store.js 檔中引入 store 的模組檔，並添加 modules: { 引入名1, 引入名2, .... } 建議在 store 模組檔內添加 namespaced: true，避免不同模組內事件名稱相衝，之後在 vue 組件內拿 store 模組的資料會變成：例：this.$store.dispatch('模組名/事件', this.day)、this.$store.state.模組名.變數 vuex-router-sync 套件可把 router 相關資料儲存在 store 裡面，方便用 this.$store.state.route.path 等等來存取 forEach、map 方法精闢解說：https://blog.fundebug.com/2018/02/05/map_vs_foreach/ 在 export default 之外，一樣可以寫物件函式等等給 default 內的程式碼用(就外部沒辦法用而已)

web localstorage 認識使用：存在使用者的瀏覽器上，僅能讀、存、刪除，容量不多但無期限，session 為一離開網頁就刪除 Custom Directives - vue 提供自定義的 v-??? 做使用，可全局註冊或元件內，範例中創建一個 v-focus 套用到元件上使頁面一載入就使輸入框為 focus 狀態 markdown — 一種輕量級標記式語言文件、VuePress — 靜態網站生成，其主要為撰寫文章部落格而生、hightlight.js — 為文章中程式碼像 IDE 一樣上色、Vuetify — UI framework、Element UI — vue component library

git 操作指令：git init 在所在資料夾建一個數據庫、查詢狀態 git status、將變更的檔案加到索引 git add . (因為有很多檔案會變更，所以就 . 直接加所有檔案)、將索引檔變成一次更新(commit) git commit -m ‘此次更新的說明文字’、下載遠端數據庫到自己本地電腦上：git clone <數據庫網址> 下載遠端數據庫、更新遠端數據庫 git push origin master (origin 為本地註冊遠端數據庫的分支名稱，通常因應開發會需要連兩三個遠端數據庫，故可以自訂名稱) (master 為分支名稱)、git remote add origin <遠端儲存庫網址> 註冊遠端數據庫 git push -u origin2 master(其中 -u 為預設它會推到哪個遠端數據庫、之後打 git push 就預設會推到 origin2 數據庫的 master 分支) nuxt-app 部署至 github page 根據開發環境設定路徑，用指令推送單一資料夾至分支

創辦 bitbucket 帳戶並執行一次推送 git check 有很多使用方式，其主要是切換到各個 git 節點(也包含分支，分支其實是節點貼上一個’標籤‘) head 是目前 git 的指標、回頭觀看版本內容：git checkout 編號、返回最新的版本： git checkout master(分支名稱)、觀看詳細歷史紀錄：git reflog(包含checkout、reset等等動作)、觀看 commit 紀錄：git log、顯示即將清除的為追蹤檔案：git clean -n 、強制清除檔案：git clean -f 指定還原工作目錄上已更改的檔案(已追蹤但尚未加索引)：git checkout -- <file> git reset 為把目前變成某個節點狀態，相當於復原，但在之後的節點看起來是消失但歷史紀錄還是查得到，所以也能找得回來關於 git reset 有三種模式和觀念可參考這篇：https://gitbook.tw/chapters/using-git/reset-commit.html 、文中工作目錄和暫存區經我實際操作後：工作目錄是你修改或新增程式碼而且儲存(command+s)後的狀態，暫存區是你 git add . 新增索引後的狀態例1：我今天心不在焉，寫的東西(還沒 commit )都要砍掉的話，要用 hard 模式、reset 前後的程式碼差異會依模式來決定要留在暫存區還是工作目錄上或清除掉例2：假設今天修改了多筆檔案(都還沒 commit)，但其中一個檔案錯超多，乾脆回復到最近一次 commit 的狀態，針對ㄧ筆檔案可以先用 git reset HEAD(預設 mixed 模式)將修改都退回到工作目錄上，再針對那筆檔案 git checkout -- <file> 復原。 git reset —hard ＋ git clean -df(d為包含資料夾，多用於刪除 build 過和 reset 時追蹤不到的檔案)、可把目前工作目錄完全復原到最近一次 commit 的狀態。新增分支：git branch 分支名稱、新增並切換至新分支：git checkout -b 分支名稱、查看分支：git branch 、刪除分支：git branch -d 分支名稱

git push 到遠端資料庫其實是合併 merge git merge 要被合併的分支名稱、當兩個分支源頭都一樣時，合併會直接快轉，但這樣很難看出是否曾經有合併過，所以用 git merge 要被合併的分支名稱 --no-ff 取消快轉，會再新生出一個 commit 代表合併。(當兩個分支源頭不一樣時直接用 git merge 自動會生出合併 commit) git clone 之後若遠端又更新了，這時可以下 git fetch 讓自己本地的遠端分支更新，git pull 是從遠端下載更新到自己本地端再與本地 master 進行 merge 合併，相當於 git fetch＋git merge、git pull —rebase 是將預設的 merge 改成 rebase 來合併 git push 新分支到遠端時，若遠端沒有那個新分支的話會自動生成新分支對應本地新分支，因此分支名稱在本地和遠端永遠都是一對一關係 git rebase 也是合併的一種，它像嫁接一樣會把目前的分支節點複製貼到指定的分支後面，有衝突的話會按順序一個一個節點合併，舊的分支的節點會隱藏消失(在reflog能查到)，舊分支標籤會貼到合併分支後最新節點上。 (節錄自文章：Rebase 等於是修改歷史，修改已經推出去的歷史可能會對其它人帶來困擾，所以對於已經推出去的內容，非必要的話請盡量不要使用 Rebase) git revert 可以取消上一次的 commit ，但不是像 reset，revert 會再新增一個 commit 來取消上一次的 commit，適合對於想要修正已發送出去的內容，因為不算修改歷史紀錄(團隊合作)，只是這個 commit 和上個 commit 抵銷。 github 發現別人的程式碼有點小瑕疵想幫忙：在別人的遠端數據庫按 fork ，拷貝一份數據庫到自己的遠端數據庫上，接著 clone 自己的遠端數據庫下來，修改好後 push 上自己的遠端數據庫，接著向別人的遠端數據庫發起 pull request 請求，別人就可以 pull 你的更新檔到他的遠端數據庫內了當本地的遠端分支要 push 到遠端數據庫時發現不能快速倒轉時，會先要求 pull 遠端數據庫來合併本地遠端分支，解決衝突後再push 上去

git flow 是一套版控使用的標準程序，有五個分支：master (上線版本)、develop (開發分支)、hotfix (用於緊急處理上線版本的問題)、release (即將發佈的新版本)、feature (從 dev 分支出來的開發中功能分支) git flow 文章：https://gitbook.tw/chapters/gitflow/why-need-git-flow.html websocket 是一種傳輸協定，瀏覽器端透過 http 協定和伺服握手後，會變成 websocket 協議 socket.io 是一個框架一個類庫，當瀏覽器不支援 websocket 時會改用傳統輪詢方式運作 socket.io 學習進度：連線離線訊息廣播，自定義事件和伺服連動

F2Eweek7 UI 稿切版 Vue cli 導入 Vuetify，學習使用其元件系統排版實作版控 git flow 模式

主頁切版完成，組件的 UI 操作已做好，聊天室頁面切版進度 50％遇到突發狀況：之前把終端機改為 zsh 並美化後，vscode 因為沒重開過所以終端機還是 bash，這時 zsh 就已經沒辦法用 npm node 等等指令，今天重新開機後，vscode 的終端機改成 zsh，我切換到 bash 後 npm 居然也是 command not found...... 上網搜尋各種方法，重裝 node 、更新 brew 、瞎弄一通後 npm、node 在 zsh 跟 bash 都可以下指令了，但 nvm 沒辦法.... 順便美化了 vscode 的終端機，改主題為 power9k，可以顯示時間、git 圖示等等

vue props 傳值：沒 v-bind 直接傳是傳字串，有些組件可以直接傳數字字串是它有自己轉換，要 v-bind 才可以傳 JS 表達式打 prop 的名稱沒傳值會默認為 true，false 還是需 bind 聊天室頁面切版完成，剩下資料結構和 socket.io 串接

問題：上次遇到突發狀況後，今天發現 vue 指令也找不到，然後又下載了一次全局安裝 vue cli.... 導入 Vuex 狀態管理串接 socket.io git 更新和推送遠端 github 申請 Heroku 帳號，並和 github 連線自動部署應用待解決：Heroku 伺服器架設有問題自己解決的一個大坑：在組件內導入 socket.io 時不知為何在接收訊息時會一定跳 this.$store 這東西 undefined ，後來發現是我用傳統 funtion 寫法時，在 socket.on() 內用 this 會指向 socket 本身，要改成箭頭函式才會指向外層的 vue 實體

加入發訊時間、判別己他方訊息、使用者進出聊天室訊息根據情況有新訊息時會自動滾動到底：element.scrollHeight、element.scrollTop、elementclientHeight 監測資料變更後，this.$nextTick() 方法能在 dom 更新後設回呼函式優化在 safari 自動滾動到底時，margin 會塌陷，改用 padding 部署教學：https://www.codementor.io/@ravianand1988/easily-4-steps-to-continuous-delivery-auto-deploy-vue-js-app-on-heroku-xljk977pq

瀏覽器優化隱藏滾動條 ~~實在解決不了如何在 Heroku 啟用 socket ，參照了官網、stackoverflow等等網站寫法都無法解決，只好到FB社團發問＝＝~~ 已解決：client 端引用 socket 後，不用輸入網址參數直接 const socket = io() ，我也不知道為何＝＝

修正小bug、優化使用者體驗和手機版面 word-break: break-all; 超出容器邊界強制換行 vue 識別文本換行：資料綁 v-html 讓文本解析成 html 格式，再將\n 轉換成<br>標籤： replace(/\n/g, '<br>') 另種方法：純 CSS：white-space: pre-wrap; 空白字符換行，\n即可 v-for 裡面要綁值的話不用加 this

github md 簡介 Markdown 練習、聊天室專案附上個人github和設計師名 (我 master 和 develop 因應部署和本機端開發，所以路徑和指令設不太一樣，git merge 衝突解決一次之後，相同地方好像不會再衝突而是會自動選跟上次一樣的方式合併) ~~繼續研究 F2E挑戰week6 的 vuex 接 api 拿資料給組件還是一直報 undefined~~ 第一頁解決方法只要 computed 取 state 值時給條件判斷，取不到就先預設值。(用 if else ，三元表達式不行) 第二頁一樣設預設值、v-if 判斷值拿到沒，各種方法大雜燴。其中在元件 dispatch 後 .then() 時就算把 loading 關掉，這時也不代表回 api 資料時 store 那邊可以馬上拿得到值，所以把 loading 換到 watch 裡面，觀察 state 的值有拿到再關掉，這樣之後都不會再報錯了。 watch 值不用加 this

F2E挑戰week6 畫面和比例調整、圖片壓縮引入自訂 JS 檔，在 main.js 中 import 後 Vue.prototype.名稱 = 名稱 ，即可在全局用 this.名稱拿到自訂 JS 檔中寫函式，給 vue 組件中使用新增 loading 動畫、footer 作者資訊

codewar 解題：覺得有用的解題寫法

var even = int.filter(a=>a%2==0);

return even.length==1? even[0] : odd[0];

switch (walk[i]) {
  case 'n': dy--; break
  case 's': dy++; break
  case 'w': dx--; break
  case 'e': dx++; break
}

function isValidWalk(walk) {
  return walk.length == 10 && !walk.reduce(function(w,step){ return w + {"n":-1,"s":1,"e":99,"w":-99}[step]},0)
}