學習要點:
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)整理發布!