---
# System prepended metadata

title: 第一週共筆文件
tags: [Vue 實戰班]

---

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

# 第一週共筆文件

## 👆上半場
> 前端與後端運作
![](https://i.imgur.com/LCzdvrH.png)

## 資料處理方法-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(樣板字面值)
```javascript
let originString = 'My name is ' + people[0].name + '.';
let literalString = `My name is ${ peoplep[2].name } .`;
```


### 設計模式
**MVC**
![](https://i.imgur.com/LG14sNc.png)


**MVVM**
![](https://i.imgur.com/8HA484O.png)


## 開發環境介紹
- VSCode
    - 套件：Live Server ⇒ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
![](https://i.imgur.com/wTEoklW.png)

    - 套件：Atom One Dark Theme ⇒ https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark
![](https://i.imgur.com/TH5dWzW.png)


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

![](https://i.imgur.com/fZNVppe.png)

### 樣板字面值 範例

![](https://i.imgur.com/J8op1d0.png)

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>
#### 接續麵條式語法的例子，操作到畫面的部分：

```javascript=
list.innerHTML = string;
```

```javascript=
e.target.parentNode.remove();
```

#### 資料建構的部分：
```javascript=
var text = input.value;
```

#### 資料跟畫面綁在一起的部分
```javascript=
var sourceData = list.innerHTML;
  var string = sourceData + `<li>${text}
  <button class="btns">移除</button>
</li>`;
```

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

#### 接續麵條式語法，修改後的程式碼內容，操作到畫面的部分：
```javascript=
var text = input.value;
```

#### 修改後、資料建構的部分：
```javascript=
data.push({
    text: input.value,
  });
```
```javascript=
data.splice(e.target.dataset.id, 1);
```

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

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