Coding Diary

Vue 101-Day 1

23 Apr 2019 |

Vue

前言

前公司使用Angular的時間大概有六個月左右的時間，但目前公司是使用Vue作為開發前端的框架， 公司同事也跟我說『 Vue很簡單 』，但還是要自己下去學習、瞭解這一個框架才能深刻體會。 自己也決定花時間好好的深入淺出Vue這個框架，所以打算寫一系列的文章來好好瞭解Vue。

介紹

Vue 是一個開源漸進式JavaScript框架，關注的核心是view layer，且易於與現有專案或是其他library整合

MVVM架構

MVVM架構 View(畫面)透過ViewModel與Model進行雙向綁定(two-way binding)。 ViewModel有點像觀察者(Observer)的角色，當View的資料有改變，ViewModel觀察到有異動，將View更新的資料對應到Model，反之亦然，Model的資料有異動，ViewModel察覺到有變化，讓View做出相對應的調整

特點

  • 易學
  • 靈活
  • 高效
  • 可維護
  • 可測試
  • 可重複使用的Component

安裝

在專案使用基本上可以用兩種方式(寫此篇文章時最新的版本為2.6.10; vue-cli為2.9.6)

  1. 使用npm 安裝 
    $ npm install vue
$ npm install -g vue-cli
  2. 引用CDN 官方推薦第一種引用方式，畢竟第二種引用最新版可能會碰到什麼問題 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

參考資料：

Comments