# NodeJS & Vue
##### Steve Jian
---
#### 開始之前稍微複習一下Linux基本知識及指令
```.```
表示當前目錄
```..```
表示上層目錄
```~```
表示家目錄也就是
```/home/<username>```
----
家目錄有dir目錄
dir目錄內有1
1目錄內有2
2目錄內有3
----
----
```bash=
#這兩個是絕對路徑
$ cd /home/<username>/dir/1
$ cd ~/dir/1
#這兩個是相對路徑
$ cd ./2 # ~/1/2
$ cd .. # ~/1
```
----
```bash=
$ cd <path> #移動目錄
$ mkdir <name> #新增目錄
$ pwd #顯示所在目錄的絕對路徑
```
---
## Install NodeJS & Npm
```bash=
$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt install -y nodejs
```
----
## Check
```bash=
$ node -v
$ npm -v
```
---
# NodeJS
----
## 伺服器端JavaScript
NodeJS允許在後端（脫離瀏覽器環境）
運行JavaScript程式碼
----
## Run JS File
```bash=
echo "console.log('hello world')" >> /tmp/hello.js
node /tmp/hello.js
```
---
# npm
----
## Node Package Manager
管理 node 的套件
就像Python與pip的關係
----
```bash=
#產生package.json
$ npm init
#安裝package.json內所有套件
$ npm install
#安裝套件並將資料寫入packahe.json內
$ npm install <package> --save
#移除套件並將資料從packahe.json內刪除
$ npm uninstall <package> --save
#安裝全域套件
$ npm install <package> -g
#移除全域套件
$ npm uninstall <package name> -g
#執行npm腳本
$ npm run <script name>
```
----
package.json, package-lock.json, node_modules
由npm產生
----
package.json內有專案的基本資料,
可運行的腳本及相依套件清單
----
npm 允許在package.json里面設定脚本命令
```json=
{
"scripts": {
"build": "node build.js"
}
}
```
build命令對應的腳本是node build.js
```bash=
$ npm run build
# 等於
$ node build.js
```
----
package-lock.json紀錄相依套件的版本資料及
相依套件的相依套件的版本資料 🤔
----
npm將所有相依套件安裝在node_modules資料夾內
不同專案的工作目錄互不影響
因放置所有套件在工作目錄內非常佔容量
一般會加進.gitignore內排除版控
---
## 練習時間～
1. 用npm安裝全域套件 vtop 並執行
（安裝如發生錯誤請嘗試排除）
2. clone下來[這個](https://github.com/steve5631/EX.code/tree/vue)然後用npm腳本執行它
之前有clone過的可以pull
ps 記得切換branch
----
----
----
---
# Vue
----
前端早已不是過去寫寫html操縱DOM
或JQuery獨大的時代了
Vue,Angular及React成了現代前端開發的首選
----
## Why choose Vue
1. 主要開發者是中國人，中文資源多
2. Vue相較Angular和React更好上手
3. 屬於漸進式框架
4. 官方文檔非常詳細
----
## mvvm架構
(Model–View–Viewmodel)
---
# How to use Vue
----
## 只使用Vue核心功能
```htmlmixed=
<html>
<head>
<title>count</title>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
</head>
<body>
<h1>simple counter</h1>
<div id="app">
<button id="click" @click="add()">click me</button>
<h1 id="time">{{ count }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0
},
methods:{
add() {
this.count++
}
}
})
</script>
</body>
</html>
```
上次社課的[簡易計數器](https://codepen.io/steve5631/pen/XWWLGmE?editors=1000)就是用Vue核心功能寫的
----
載入Vue核心功能
----
建立 Vue 實體(mvvm中的View Model)
* ###### el : 將這個 Vue 實體掛載到這裡設置的元素上。
* ###### data : 登錄資料，當這些資料改變時，畫面會依照變化做改變。
* ###### methods : 登錄方法，這些方法可以藉由 DOM 事件觸發，也可以在 Vue 實例中被叫用
----
靜態模板(mvvm中的View)
* ```{{ count }} ```:
綁定 Vue 實例中的 count 資料
* ```@click＝"add()" ```:
綁定 Vue 實例中的 add() 方法至 Click 事件中
---
## 模板语法
```htmlmixed=
<html>
<head>
<title>Template Syntax</title>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
</head>
<body>
<h1>Vue Template Syntax</h1>
<div id="app">
<h3>{{str}}</h3>
<h3 v-html="str2"></h3>
<h3>{{ str3*100 }} {{str3===10?true:false}}</h3>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
str: "灰化肥發黑，黑化肥髮灰。灰化肥揮發會發黑，黑化肥揮發會髮灰，灰化肥發黑揮發會髮灰，黑化肥髮灰揮發會發黑",
str2: '<p style="color:red;">灰化肥發黑，黑化肥髮灰。灰化肥揮發會發黑，黑化肥揮發會髮灰，灰化肥發黑揮發會髮灰，黑化肥髮灰揮發會發黑</p>',
str3: 20
}
});
</script>
</body>
</html>
```
[傳送門](https://codepen.io/steve5631/pen/GRgrWbm?editors=1000)
----
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
```htmlmixed=
<h3>{{str}}</h3>
```
無論何時，綁定的數據對像上 str 屬性發生了改變，插值處的內容都會更新
----
雙大括號會將數據解釋為普通文本，而非 HTML
為了輸出真正的 HTML 需要使用 v-html 指令：
```htmlmixed=
<h3 v-html="str2"></h3>
```
----
使用 JavaScript 表达式
對於所有的數據綁定，Vue 都提供了完全的 JS 表達式支援
```htmlmixed=
<h3>{{ str3*100 }} {{str3===10?true:false}}</h3>
```
---
## 條件渲染 v-if
```htmlmixed=
<html>
<head>
<title>IF</title>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
</head>
<body>
<h1>Vue IF</h1>
<div id="app">
<div>
<button id="click" @click="show()">click me</button>
</div>
<div>
<img src="https://66.media.tumblr.com/tumblr_ltagtuRNC11qjkvo7o1_400.gif" />
</div>
<div>
<img src="https://i.imgur.com/1hCQ0Hc.png" v-if="bool" />
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
bool: false
},
methods: {
show() {
this.bool = !this.bool;
}
}
});
</script>
</body>
</html>
```
[傳送門](https://codepen.io/steve5631/pen/eYmgpdg?editors=1000)
----
在需要條件判斷的元素加上v-if屬性
並賦予 一bool值變數 或 一判斷式
data object的bool預設為False
按鈕觸發show() function 使變數bool與原狀態相反
---
## 列表渲染 v-for
```htmlmixed=
<html>
<head>
<title>For</title>
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
</head>
<body>
<h1>Vue For</h1>
<div id="app">
<div v-for="i in list">
<li>學號:{{ i.num }} , IP: {{ i.ip }}</li>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
list: [
{ num: "B10800001", ip: "140.125.0.0" },
{ num: "B10800002", ip: "140.125.0.1" },
{ num: "B10800003", ip: "140.125.0.2" },
{ num: "B10800004", ip: "140.125.0.3" },
{ num: "B10800005", ip: "140.125.0.4" }
]
}
});
</script>
</body>
</html>
```
[傳送門](https://codepen.io/steve5631/pen/MWYJazo?editors=1000)
----
在需要重複產生的元素加上v-for屬性
並賦予變數i一陣列(用法類似python)
元素的內容可以照需求排版輸入key得value
---
## 練習時間～
在家目錄底下新增一個空白的html
並以Vue框架寫一個計數器
每按一下遞增但是偶數會隱藏數字
(禁用JS的if-else只可用v-if)
---
Vue的官方文檔非常詳細
可以在上面學到更多應用及功能
[傳送門](https://vuejs.org/v2/guide/)
----
當Vue用得上手後可以挑戰
nuxt.js, yarn, typescript等
進階應用
---
# *fin*
~~Super Gopher~~
{"metaMigratedAt":"2023-06-15T02:29:55.729Z","metaMigratedFrom":"YAML","title":"NodeJS & Vue","breaks":false,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"d182e945-f719-41cd-8488-cb93bdb49c93\",\"add\":9997,\"del\":3214}]"}