VUE學習day one

符号话發表於2024-09-23
Vue

學習來源:【前端最新Vue2+Vue3基礎入門到實戰專案全套教程，自學前端vue就選黑馬程式設計師，一套全通關！】https://www.bilibili.com/video/BV1HV4y1a7n4?vd_source=6dac49feb8d7fd76b147c8cf8c0c2b5a

Vue是什麼？

  1. Vue是一個用於構建使用者介面（基於資料動態渲染出使用者看到的頁面）的漸進式框架。
  2. 漸進式：學一部分用一部分
  3. 提升開發效率。

建立Vue例項

  1. 初始化渲染步驟：
    （1）準備容器
    （2）引包（官網）-開發版本/生產版本
    （3）建立Vue例項 new Vue()--
    （4）制定配置項--渲染資料
    (4-1)el制定掛載點
    (4-2)data提供資料

2.實操

<body>
    <div class="box"></div>
    <div class="box2"></div>

<div id="app">
    <!--編寫一些用於渲染的程式碼邏輯-->
    <h1>{{ msg }}</h1>
    <p1>{{count}}</p1>
</div>

<!--引入：開發版本包-包含完整的註釋和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    //引用Vue.js核心包，在全域性環境下，就會有Vue建構函式
    const app=new Vue(
        {
            el:'#app',
            //el配置選擇器，制定Vue管理的是哪個盒子
            data:{
                //data提供資料
                msg:'Hello World!',
                count:222
            }
        }
    )
    </script>

</body>

相關文章