【上課筆記】第一堂 #Vue 直播班 — 2022 春季班

2022.01.08

之前參加了六角切版直播班，很榮幸學習到快尾聲時就轉職成功找到一份前端的工作，這次希望也能為自己打好基礎，往更大的目標邁進！

1. JavaScript 必學語法

語法糖 與 新增語法

• 語法糖不會影響程式碼，原程式碼修改後仍然正常運作；新增語法會造成程式碼結果不同

• let.const 作用域在{}，var的作用域在function中

樣板字面值

let word='我是單字'
let text=`${word}組成字串`

詳細可參考老師的文章：鐵人賽：JavaScript Template String 樣板字串
僅紀錄還不太熟悉的功能：

1. 可以在 ${} 內使用函式 (函式內可在使用 Template String)。不過這裡特別注意，單行的箭頭函式會自動 return。 //就可以將 js 寫的類似模板的形狀了！
2. 也可以在函式內增添更多的判斷式。
3. 如果有需要插入特殊字元，一樣可以使用 \ 反斜線來插入；
4. 跳脫字元是不佔字符數；
5. 取得含特殊字元的字串可用 String.raw()：MDN||String.raw()

陣列方法

全部的重點都在老師的影片哩，自己去找吧！JavaScript 陣列處理必學巧技

• 使用 …{物件or陣列} 展開，物件跟陣列不能互轉
• 解構=把物件反向倒裝。
  (💡前面有this.不給解構)

• 📌 可選串聯運算子

• 📌類陣列轉陣列

如果想了解更多 JS 的用法原理可以查詢 JS的原型

2. ESModule

• 單一檔案程式碼不要太長(200行，至多不要超過300行)

3. 關注點分離

👽之後可以研究：Vue Setup? Vue3.0改版在前，我該知道些什麼!?

1. 載入 Vue.js CDNjs || Vue

• CDN

• ESModule

• Vue Cli (ESModule)

2. 常見起手式

1. 建立基礎結構
2. createApp 建立
3. mount 生成

3. View（畫面上的） 常用的指令

• {{ }}
• v-for
  v-for=“item in people” (item :單數的參數)
• v-bind: 針對屬性 (不需要 {{ }} )
  v-bind:src=“person.imageUrl”
• v-on -> 事件監聽 addEventListener
• v-if, v-else