Vue文檔傳送門：https://cn.vuejs.org/
Vue是javaScript框架，簡化了dom的操作並以響應式數據驅動
Vue：一款漸進式javaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。
其特點是綜合了Angular(模塊化MVVM)和React（虛擬DOM）的優點 。
第一個vue程序：
- 導入開發版本的vue.js
- 創建vue實例對象，設置el屬性和data屬性
- 使用簡潔的模板語法把數據渲染到頁面上
運行結果：
el:掛載點
- vue實例的作用范圍：Vue會管理el選項命中的元素及其內部的子孫元素
- 使用的選擇器：跟js獲取dom元素一樣，可以選用id、class、元素（eg：div）、name等
- 設置的dom元素：可以使用除HTML和BODY外的其他的雙標簽
data:數據對象
- Vue中用到的數據定義在data中
- data中可以寫復雜類型的數據
- 渲染復雜類型數據時，遵守js的語法（下圖分別是字符串、數組、字典）
v-text指令
- 作用：設置 標簽的內容（textContent）
- v-text默認寫法會替換全部內容，而使用差值表達式{{}}可以替換指定內容
- 內部支持寫表達式
v-html指令
- 作用：設置元素的innerHTML
- 內容中有html結構會被解析為標簽
- v-text指令：無論內容是什么只會解析成文本
v-on指令
- 作用：為元素綁定事件
- 事件名不需要on
- 指令可以簡寫為@
- 綁定的方法定義在methods屬性中
- @keyup.enter="方法名"回車后，調用方法
v-show指令
- 作用：根據真假切換元素的顯示狀態
- 原理：修改元素的display,顯示隱藏
- 指令后面的內容，最終都會解析為布爾值
- 值為true元素顯示，值為false元素隱藏
點擊后：
v-if指令
- 作用：根據表達式的真假切換元素的顯示狀態
- 本質是通過操縱dom元素來切換顯示狀態
- 表達式的值為true，元素存在於dom樹中，為false，從dom樹中移除
v-bind指令
- 作用：為元素綁定屬性
- 完整寫法是v-bind:屬性名
- 簡寫的話可以直接省略v-bind，只保留：屬性名
v-for指令
- 作用：根據數據生成列表結構
- 數組經常和v-for結合使用
- 語法：（item,index）in 數據
- item 和 index 可以結合其他指令一起使用
- 數據長度的更新會同步到頁面上，是響應式的
v-model指令
- 作用：便捷的設置和獲取表單元素的值
- 綁定的數據會和表單元素值相關聯
- 綁定的數據<-->表單元素的值
點擊按鈕后
