<!-- {%hackmd BJrTq20hE %} -->
###### tags: `Vue相關內容`
# Vue學習 Day1
1. 安裝node.js 選擇LTS(安全性較好)
1. cmd確認版本=>**node -v** 、 **npm -v**
7. **npm install yarn -g 在哪個路徑都可直接執行**
8. 安裝 **subline** or **VsCode**

### 安裝vue-cli不同版本
* 2.9.4
* `npm install -g vue-cli (新增)`
* `npm uninstall -g vue-cli (移除)`

* 4.x.x
* `npm install -g @vue/cli (新增)`
* `npm uninstall -g @vue/cli (移除)`
* `npm i -g @vue/cli-init (設定init為全域)`
>若打不開vue ui環境變數加上:`%SystemRoot%\system32`

### 創建專案
`vue create 專案名`

以下為自選~
* **Choose Vue version**：要選，下一步我們要手動選擇Vue3版本。
* **Babel**：要選。
* **Router**：以路由方式轉跳頁面。
* **Vuex**：大型專案建議要選，資料集中管理的套件。
* **CSS Pre-processors**：應該幾乎沒有人在寫純的css了吧，下一步會讓你選是要用哪種預編譯。
* **Linter/Formater**：要選，讓你的程式碼漂亮排版、自動提醒語法錯誤，現在專案都是必用的了。

### package.json簡介
* name:專案名稱
* version:版本名稱
* author:作者
* description:詳細說明
* keywords:關鍵字

# NPM簡介
套件管理程式
### NPM安裝
**Terminal**
* **輸入值建立package.json**:`npm init()`
* **JQ不帶版本號則最新**:`npm install jquery@3.1.0`
* **Bootstrap不帶版本號則最新**:`npm install bootstrap@4.1.0`
* **安裝在package.json中的devDependencies內**:
`npm install webpack --save-dev`
* **安裝在Globall環境內**:`npm install webpack -g`
* **查詢安裝版號**:`npm ls`
### webpack為樹狀圖，從最上層用以下指令
**查目前安裝的套件**:`npm ls --depth = 0`
**查目前GLOBAL安裝的套件**:`npm ls -g --depth = 0`
#### 刪除套件
`npm uninstall webpack`

---

## package-lock.json
保持大家的套件版本一致(**版本控制**)

# yarn簡介
facebook出產(為了解決npm安裝效率問題)**為了取代npm**。

## yarn安裝
**若無法執行yarn init**

打開 PowerShell 
1.執行 Set-ExecutionPolicy -Scope CurrentUser
2.執行 Set-ExecutionPolicy RemoteSigned

在 Windows 10 使用 yarn 安裝 @vue/cli ，
若輸入 vue 卻沒有此指令時, 那是因為環境參數沒有加入 
%USERPROFILE%\AppData\Local\Yarn\bin; ，
可以在 電腦(右鍵)->內容->進階系統設定->環境變數->
選取系統變數Path->編輯->
加入指令路徑->確認設定 加入即可。

**Terminal**
* 初始化 `yarn init`
* 新增最新套件 `yarn add [package]`
* 新增特定版本套件 `yarn add [package]@[version]`
* 新增特定tag套件 `yarn add [package]@[tag]`
* 新增套件至 `devDependencies yarn add [package] --dev`
---

* **安裝jq3.1.0**:`yarn add jquery@3.1.0`
* **移除webpack**:`yarn remove webpack`
* **GLOBAL新增**:yarn **global** add webpack
* **GLOBAL查詢**:yarn **global** list
* **GLOBAL刪除**:yarn **global** remove webpack

---

# MVX 及 Flux
### MVX主要核心概念
MVX、MVC(Control、View、Model)、MVP、MVVM

* MVP=>替換掉controller(presenter
* 重要:**資料雙向綁定**
* **Flux**-單向資料流
* **簡化**程式的**複雜性**

---

# Vue.js 特性簡介
1.MVVM概念設計。具備**雙向綁定**。
2.搭配v-bind可實現**單一資料流(flux)**。
3.元件開發，將**網頁拆分成不同元件**。
4.狀態機管理，搭配VUEX可**實現狀態機管理**，統一管理顯示資料。

---
### jsDelivr--
以CDN引用JS套件

---

# Vue 實作HELLO WORLD
**app.js**

var vm = new Vue({
	el: "#app",
	data: {
		message: 'Hello World',
        list: ['超級白','草尼馬','八哥牙落']
	},
    method: {
        test(){
        
        },
        test1:function(){
        
        }
    }
})

**基本指令說明** index.html

<div id="app">
	<!-- 1.文字的綁定 -->
	{{message}}
    
	<!-- 2. 迴圈 v-for -->
	<ul>
		<li v-for='name in list'>{{name}}</li>
	</ul>
    
	<!-- 3. 事件 v-on -->
	<button v-on:click='test'>按我一下</button>
    
	<!-- 4. 表單輸入 v-model -->
	<input type="text" v-model="message"/>
    
	<!-- 5. 條件式 v-if -->
	<ul v-if="isShow">
		<li v-for='name in list'>{{name}}</li>
	</ul>

</div>

## 資料綁定(v-bind)與Class、Style控制
**is-active**若使用的class有"-"，需要**單引號**

<div id="app">
<!-- 1. 資料綁定 與 Class 控制 -->
	<p v-bind:class="{'is-active': isActive, child:isChild }" class="item">
		變動的Class
	</p>
	
    <!-- 2. 更新綁定資料 與 Class 控制 -->
	<button v-on:click="isActive=!isActive">切換</button>
	
    <!-- 3. 資料綁定 與 Style 控制 -->
	<p v-bind:style="{color: textColor}" class="item">
		變動的樣式(style)
	</p>
	
    <!-- 4. 更新綁定資料 與 Style 控制 -->
	<button v-on:click="changeColor">按我變顏色唷</button>
</div>

## DEMO圓
**index.html**

<div id="app">
	<!-- v-model -->
	<svg>
		<circle cx="100" cy="75" v-bind:r="radius" fill="pink">
	</svg>

	<input type="range" min="0" max="100" v-model="radius" />
</div>

**app.js**

var vm = new Vue({
	el: "#app",
	data: {
		radius:30,
	},
	methods: {
		
	}
})

# BootStrap官網利用CDN

BootStrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

JS
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

# 一日總結
* **View**：呈現資料、與使用者互動
* **ViewModel**：處理資料的邏輯
* **Model**：資料儲存、資料型別、撈資料