學習要點：
1.渲染掛載
2.搜索方式
本節課我們來開始了解 Vue3.x 創建使用的聲明渲染，了解數據的動態改變。
一．渲染掛載
1. 前端框架基本都是為了簡化：模版渲染、事件綁定和用戶交互問題；
2. Vue 的 MVVM 模型：即視圖(View)-視圖模型(ViewModel)-模型(Model)；
3. Vue 的操作核心：即使用模版語法聲明式的將數據渲染進 DOM 中去；
4. 比如，創建一個 DOM 結構，內部需要一個動態變化數據使用 Vue 處理；
<div id="app">
計數器：0
// 這里的 0 需要動態改變
div>
5. 那么，首先引入 Vue.js，然后在下方編寫需要的 JS 代碼；
<script src="/vue.global.js">script>
6. 其次，在引入 Vue 的下面編寫一個對象，用于實現 0 的動態改變；
// 聲明一個選項對象
const App = {
// 初始數據
data() {
return {
counter : 100
}
}
}
PS：選項對象內部包含初始數據，方法、事件、聲明周期等等要素；
7. 這個選項對象 App，是需要當作參數傳遞到 Vue 的全局 API：createApp()；
8. createApp()方法會返回應用實例，再通過這個實例來掛載對應的 DOM 即可；
// 全局 API 對象.創建實例(App).掛載('#app')
Vue.createApp(App).mount('#app')
PS：如果想查閱這個全局 API，更多的文檔了解，選擇 API 參考：
https://vue3js.cn/docs/zh/api/global-api.html#createapp
9. 最后一步：需要通過 Vue 改變的 Counter 值在 DOM 中渲染出來；
<div id="app">
計數器：{{counter}}
div>
PS：{{插值}}，這里用雙大括號表示，插值對應的是 data()里的 counter 屬性；
二．搜索方式
1. 一般來說，課程中只會拎出重點來闡述，建議學習完畢后再過一遍文檔補全；
2. 對于盲區部分，比如 MVVM 是啥？前期其實不用理解，學完后會后能理解七七八八；
3. 強迫癥，可以去搜索 MVVM 理解下即可；但學完后，回來再理解效果更好；
4. Vue2.x 中使用 data : {}的方式，現在是 data() { return }，怎么補全理解？
5. 可通過搜索：vue data return 三個關鍵字看文檔理解；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
