• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3渲染和掛載

        發布時間:2023-02-20 21:06:17???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        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 的全局 APIcreateApp();
        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)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区