# VUE
###### tags: `vue`
> Vue (音同View) 是一套以視圖層為基礎發展的 JavaScript 漸進式框架。

## 發展簡史
- Vue.js 最初源於 2013 年，當時只是作者**尤雨溪 (Evan You)** 在 Google Creative Lab 的創意技術人員（Creative Technologist）工作時的業餘專案。
(ps. Angular 2008 / React 2013)
- 結合了過去開發 AngularJS 的經驗，在 2014 年 2 月在 Hacker News 與 Reddit 等網站對外正式發表了這個 Vue.js 0.8 的版本。吸引到知名 PHP 框架 Laravel 的作者 Taylor Otwell 在 Twitter 上為 Vue.js 打起免費廣告， 並在後續版本中被納入 Laravel 官方指定的入門套件，這使得 Vue.js 逐漸在技術圈更加廣為人知。

:::spoiler **雨溪冷知識**
- 動漫阿宅
- VUE 1.0 Evangelion（新世紀福音戰士）
- VUE 2.0 Ghost in the Shell（功殼特攻隊）
- VUE 3.0 One Piece（海賊王）
- 半路出家的工程師（大學主修室內設計和藝術史～）
- 有老婆跟可愛小孩～
:::
## 核心理念
> 輕量、簡潔、漸進式
### **漸進式框架 Progressive Framework**
#### 導入 Vue 的方法
:::info
**瀏覽器插件**

:::
- CDN 無痛導入專案
- Vite [Huli的解釋文](https://blog.techbridge.cc/2020/08/07/vite-and-esmodules-snowpack/)
- Vue Cli
#### 實體化(instance)與套件
- Vue Router
- Vuex...

// Vue 2
const vm = new Vue({   // 使用 new 關鍵字（過程稱爲實體化） // vm 為 view model 的簡稱
        store: store,  // 第三方套件擴充於此！
    
	// options API
	el: '#app', // 使用 el 屬性，指定目標 DOM 節點
    data(){
	return {name: "月薪"}
    },
    methods:{...},
    computed:{...},
});

### **宣告式渲染 Declarative Rending**
#### MVVM 架構
> **M**odel(數據模型) **V**iew(畫面+使用者互動) **V**iew**M**odel(連結資料與畫面)

#### HTML 模板語義（V 前綴字）
> Vue 的神奇黑魔法(最佳效能)
#### Mustache {{}}

// Mustache 語法

<div id="app">
	{{ name*2 }} 說你好！  // 可以進行簡單運算（陳述式）
</div>

#### v-on(@)

<button @click="click1">
	<button @click.stop="click2">Click Me</button>  // 使用 .stop 就可以停止冒泡行爲向上觸發
</button>

#### v-model

<template>
  <div id="app">
    <input type="text" v-model.lazy="myname" value="myname">  
      // lazy 輸入結束才執行 // tirm 去掉空白 // number
    <p>大家好！我叫 {{ myname }}</p>
  </div>
</template>

#### v-bind(:)
#### v-if
#### v-show
#### v-for
#### v-once

### **原件系統 Component System**
#### 資料傳遞（單向資料流）
- prop
- emit
#### 生命週期
- el
- mount...

### ~~React vs Vue?~~
> 派系之爭永遠存在，我們一定要選邊站嗎？ [Evan You的回應](https://kknews.cc/zh-tw/news/3n948l3.html)

如果多年以後要論歷史地位，React 肯定是高於 Vue 的。事實上，我作為一個開發者，也是由衷地佩服 Jordan Walke, Sebastian Markbage 這樣的，能從開發模式層面上提出突破性的新方向的人。
React 從一開始的定位就是提出 UI 開發的新思路。當年 Pete Hunt 最開始推廣 React 的時候的一句口號就叫 "Rethinking Best Practices"，這樣的定位使得 React 打開了一些全新的思路，吸引了一群喜歡折騰的早期核心用戶，並在這個基礎上通過社區疊代孵化出了許多今天被 React 開發者當作常識的 pattern。這是 React 偉大的地方，Vue 裡面也有很多地方是直接受到了 React 的啟發。React 敢做這樣的嘗試，是因為它是 Facebook。這樣的體量的公司，在 infrastructure 層面獲得質的提升，收益是巨大的，而且 Facebook 的工程師們足夠聰明又要靠工資吃飯，改變他/她們的習慣並不是什麼問題。而對外推廣，則是一種大公司才有的 「改變業界」 的底氣。