Vue介紹和基本使用
Vue介紹
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合，可以一點一點地使用它，只用一部分，也可以整個工程都使用它
js的框架，跟jq是一類東西
bootstrap：ui框架不是js框架（css樣式）
vue中使用ui可以引入bootstrap，elementui(餓了麼團隊出的)，Vant(移動端ui：有贊)，ant-design-vue（ant-design本身是react的ui庫）
網站：
文件：https://cn.vuejs.org/v2/guide/
版本：
1.X：使用得較少
2.X：普遍使用
3.X：剛出沒多久，只有Beta版
M-V-VM思想
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，是一種事件驅動程式設計方式
Model ：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中，js中變數
View ：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS)
ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的（雙向資料繫結
元件開發、單頁面開發
元件開發
類似於DTL中的include，每一個元件的內容都可以被替換和複用
單頁面開發
只需要1個頁面，結合元件化開發來替換頁面中的內容，頁面的切換隻是元件的替換，頁面還是隻有1個index.html
引入方式
1、CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、下載後匯入
其實就是直接在瀏覽器中開啟https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然後複製下來，建立一個js檔案再貼上進去
<script src="js/vue.js"></script>
簡單使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的簡單使用</title> <script src="static/vue.js"></script> </head> <body> <div id="box"> {{name}} </div> <script> let vm = new Vue({ el:'#box', data:{ name:'hello world' } }) </script> </body> </html>