必須老實說, 寫這篇時, 我已經把六角「Vue出一個電商網站」課程上完並實作作品出來了
BUT!!! 雖然已經做完, 但絕大部分都是跟著課程影片照本宣科
回頭來看基礎篇, 還是有一堆不會或是忘記或是完全沒印象的觀念
俗話說, 熟能生巧
於是乎我又把整個課程基礎篇搭配官方文件再完整的複習了一遍, 也加強了自己不足的部分
而我也給自己訂了一個年度目標, 在做完這些筆記心得後, 要來實作自己的作品
希望能實現我的目標xD

#Vue是什麼?

萬用起手式來了
雖然可能絕大部分的人都已經知道
不過我還是來充個版面

Vue (讀音/vjuː/，類似於view )是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動。 --取自Vue官網

((真的是超級大偷懶欸!!!

簡而言之 Vue就是一個網頁前端框架, 非常重視 View 的部分, 也就是使用者所看到的, 瀏覽器所呈現的部分

##為什麼使用Vue

這邊我只講我個人觀點, 我是先接觸三大框架之一的 React, 所以有辦法比較
而不得不說, 比起 React, Vue 對新手來說真的是友善許多
比較好理解, 使用上不複雜
重點是!!!官方文件有中文版 哈哈哈
(更新:React現在也有中文翻譯了~)
對於英文能力差的我來說真是一大福音~

其它詳細的三大框架比較, 網路上也有許多文章已經分享過了~
這邊就不細講直接進主題~

#開發環境

使用框架開發前, 都必須先建置好適合開發的環境
而 Vue 在環境建置上就真的是非常的友善簡單
可以看到官方文件提到, 只需要引用一段 script 即可

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

開發環境就是開發時使用的, 他會幫忙跳出所發生的錯誤訊息, 協助開發者釐清問題
生產環境就是開發完之後要發布時使用的, 錯誤訊息那些就不會跳出給使用者看到
兩種環境版本使用上都是相同的, 差在錯誤提示訊息

當在一個 html 文件上引用之後, 就可以開始來使用 Vue 了

補充一點, 有看過我前面幾篇文的人應該有印象, 我有提到公司網管會擋CDN引用的部分
如果說網管會擋就沒辦法, 必須只能把文件下載回來從本機端引用囉!!

#建立一個Vue應用

建立Vue應用的部分, 可以參考官方文件說明
首先 html 要準備一個命名為 'app' 的 div

<div id="app">
</div>

接著 script 部分, 就可以來建立一個 Vue應用

var app = new Vue({
  el: '#app'
})

其中 el 對應到的就是剛才建立的命名為 'app' 的 div

但因為現在甚麼資料都沒有, 畫面會是一片空白的
我們可以來幫這個應用加上資料
加資料的方式一樣是寫在Vue應用內, 在裡面加上一個 data, 並在 data 內加上 message, 最後會長這樣:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

加好之後, 就可以在 div 上使用這些資料, 直接使用的方式是把資料包兩層花括弧{{資料}}

<div id="app">
    {{ message }}
</div>

最後就可以看到這資料已經渲染在畫面上了~

這時如果我們把 message 改變一下

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello 我是來亂的!'
  }
})

可以看到畫面會渲染成這樣

如此就完成了建立Vue應用的基本範例

今天只能到這, 希望可以講解的巨細靡遺, 也希望下次回顧時不要再有觀念遺忘 哈哈哈哈