---
tags: Vue 實戰班
---

# 第一週共筆文件

## 👆上半場
> 前端與後端運作

## 資料處理方法-forEach
可以解決 90% 以上的問題
> [Array.prototype.forEach() @ MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

- 不能提前中斷
- forEach(值,索引,array)
> array 可以省略

## 模板字串組合技巧-Template Literal(樣板字面值)

let originString = 'My name is ' + people[0].name + '.';
let literalString = `My name is ${ peoplep[2].name } .`;

### 設計模式
**MVC**

**MVVM**

## 開發環境介紹
- VSCode
- 套件：Live Server ⇒ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

- 套件：Atom One Dark Theme ⇒ https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark

- Chrome 開發者工具
- Elements ⇒ 畫面除錯
- Console ⇒ 資料、語法除錯
### forEach 上課範例


### 樣板字面值 範例


console.dir(xxx)

---
## 👇下半場

## 麵條式語法
<iframe height="265" style="width: 100%;" scrolling="no" title="關注點分離,麵條式" src="https://codepen.io/ycsteve/embed/vYLxevd?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ycsteve/pen/vYLxevd'>關注點分離,麵條式</a> by Steve
(<a href='https://codepen.io/ycsteve'>@ycsteve</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

- 程序執行時，已會出現一些問題
- 想到什麼就寫什麼
- 畫面的繪製跟資料綁在一起

## 重點設計模式-關注點分離

### <font color="e7305b">分為兩個部分：資料跟畫面</font>
#### 接續麵條式語法的例子，操作到畫面的部分：

list.innerHTML = string;

e.target.parentNode.remove();

#### 資料建構的部分：

var text = input.value;

#### 資料跟畫面綁在一起的部分

var sourceData = list.innerHTML;
  var string = sourceData + `<li>${text}
  <button class="btns">移除</button>
</li>`;

### 「關注點分離」概念
- <font color="c70039">資料先定義出來</font>
- 畫面繪製與資料處理分開執行
- 著重在資料處理的能力

#### 接續麵條式語法，修改後的程式碼內容，操作到畫面的部分：

var text = input.value;

#### 修改後、資料建構的部分：

data.push({
    text: input.value,
  });

data.splice(e.target.dataset.id, 1);

#### HTML5 中的 data-* attribute 屬性

https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html