Vue.js (1) - 介紹

Vue.js

Laravel 從第 5 版開始內建支援 Vue.js 的使用，一開始想說怎麼「又」冒出了一個 JavaScript 框架。用了一陣子後，覺得真的是好物，因為簡單易用，所以學起來也很容易，當然進階的部份還是要花點腦力，但即使只學基礎的部份，也足夠讓你快速完成工作。

Vue.js 是什麼

Vue 讀起來音似 View，這也是作者取名的用意，Vue.js 專注於 View。相對其他實作 MVC 的 JavaScript 框架例如 Angular.js、Ember.js 來說，Vue.js 屬於 MVVM 設計模式的實作。

MVVM 由 Model–View–ViewModel 組成，使用者看到的是 View，Model 則是資料，View 會和 ViewModel 做資料綁定，然後由 ViewModel 去存取資料，也就是說 View 不會直接存取 Model (資料)，而是由 ViewModel 來做，它是一個同步 View 和 Model 的物件，Vue.js 主要就是在做 ViewModel 的工作。它讓 View 來和它綁定，然後當 Model 發生變化時，自動反應到 View 上。

Vue.js 是在 2014 年 2 月，由 Evan You 發表，在 2015、2016 年越來越紅，Laravel 在第 5 版時也開始內建支援使用 Vue.js。由於 Vue.js 專注在 View，使得它比其他 MVC 框架來的輕量化，也因此很容易學習，而且更棒的是，它很容易和其他框架或函式庫結合。

如果想知道 Vue.js 和其他函式庫或框架有什麼不同，可以看看 Vue.js 和其它框架的比較。

怎麼用 Vue.js

獨立版本

你可以直接下載 Vue.js 檔案透過 <script> 標籤加入使用。Vue.js 只支援相容 ECMAScript 5 的瀏覽器。
Vue.js 提供兩個版本：

vue.js：開發版本
vue.min.js：產品版本

檔名中包含 .min 的是最小化版本，也就是在實際運作的網站上使用，因為它去除了除錯用的程式碼，不適合開發。我們要用的是開發版本。
你可在連結上按右鍵另存新檔後，加入 html 中：

<script src="js/vue.js"></script>

註：js 是目錄名稱，vus.js 是你下載下來的檔案名稱。

CDN

你也可以透過 CDN 來使用，unpkg.com/vue/dist/vue.js 會保持為最新版本：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

或是從 JsDelivr 或 cdnjs 載入：

<script src="https://cdn.jsdelivr.net/vue/2.1.10/vue.js"></script>
或
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

NPM 或 YARN

npm 及 yarn 是在做同一件事的工具，就是 JavaScript 的套件管理。Yarn 由 Facebook 開發，為了解決 npm 效率太差的問題，你可以看看這部影片(Facebook Yarn vs NPM)比較它們安裝套件的速度。
安裝 Vue.js 的指令

npm install vue
或
yarn add vue

除了指令略有不同，它們做的事是一樣的。

命令列工具

Vue.js 官方有提供一個專用的命令列工具 vue-cli，可以透過 npm 或 yarn 安裝：

npm install -g vue-cli
或
yarn global add vue-cli

因為它是操作用的指令，所以安裝成全域的。
接著你就能在你的專案中使用它：

//以 webpack 為模板建立新專案
vue init webpack my-project
//進入剛建立好的專案目錄
cd my-project
//安裝套件
npm install
或
yarn //直接執行 yarn 預設即為 yarn install
//然後 run
npm run dev
或
yarn run dev

這個命令列工具不適合新手使用，即使不用，你也可以寫 Vue，等日後有需要再找資料學會即可，這裡稍微簡單的說明一下。
Vue-cli 可以將你寫的 Vue 相關的程式碼整合成一個檔案，並且進行最小化，看起來內容像這樣：

webpackJsonp([0],[,function(t,e,a){a(6);var s=a(0)(a(3),a(10),null,null);t.exports=s.exports},,function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=a(9),r=a.n(s);e.default={name:"app",components:{Hello:r.a}}},function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"hello",data:function(){return{msg:"Welcome to Your Vue.js App"}}}},function(t,e,a){"use strict";...//略

這樣有利於被下載。這個工具會根據「樣板」的規格來架構整個開發環境，webpack 就是其中一種樣板的名稱，你可以在 vuejs-templates 查到可用的樣板。

當你以樣板來建構一個新的網站後，它並沒有下載所需的套件，這些套件被寫在 package.json 中，所以當我們執行 yarn 時，它就會依其中的設定來下載所需的套件。
接著，在 package.json 中，有一段 scripts 的內容：

"scripts": {
  "dev": "node build/dev-server.js",
  "build": "node build/build.js"
},

這是這個 Vue-cli 已經寫好的腳本程式，讓你方便執行需要的動作。當我們執行 yarn run dev 時，它會將你的檔案整合並且開啟一個暫時的開發用伺服器，你可以直接在瀏覽器的 http://localhost:8080/ 看到執行結果（Ctrl + C可以結束）。另外的 yarn run build 則是把檔案整合成可以在實際運作的伺服器中的版本。
你要開發的程式碼放在 src 目錄下，整合後的檔案放在 dist 目錄下，當你 run 過上面其中一個腳本指令後，可以在這裡看到最終的整合版本。

使用 JSFiddle 來練習

一個開始的時候，最好不要被不相關的環境設定把耐心給消磨掉，你的目的是要學會使用 Vue.js，所以最快的方式是在瀏覽器上打開 JSFiddle.net 就可以開始練習了。
簡單說一下 JSFiddle 怎麼用。首先，編輯區分為 4 個區塊，左上寫 HTML ，右上寫 CSS，左下寫 JavaScript，右下是輸出結果，當你按下上方工具列的 Run，結果就會顯示在這裡，它就像一個瀏覽器的頁面。
JSFiddle 把大部份的執行環境都處理好了，所以你可以直接寫你要的程式碼即可。例如：

本文網址：http://blog.tonycube.com/2017/03/vuejs-1-introduction.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀