Vue實例中el和data的兩種寫法小結

更新時間：2023年11月24日 09:45:01 作者：Aer_7z

這篇文章主要介紹了Vue實例中el和data的兩種寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前文提要

本文僅做自己的學習記錄，如有錯誤，請多諒解

Vue實例的el

第一種寫法

<body>
  <div id="box">
    <h1>你好，{{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      data: {
        name: "這里是name的值",
      }
    })
    // vm.$mount('#box')
  </script>
</body>

第二種寫法

<body>
  <div id="box">
    <h1>你好，{{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      // el: '#box',
      data: {
        name: "這里是name的值",
      }
    })
    vm.$mount('#box')
  </script>
</body>

vm代表的是Vue實例，后面加上’$mount’，'mount’帶有綁定的意思，再加上id選擇器字符串

小結

對于el來說，兩種寫法都行，但是第二種更常用。使用不變量記錄Vue實例后，第二種寫法可以更加自由地添加屬性，將其塞入其他的函數(shù)中實現(xiàn)動態(tài)添加屬性也行。

Vue實例中data

第一種寫法，對象式

<body>
  <div id="box">
    <h1>你好，{{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      data: {
        name: "對象式，這里是name的值",
      }
    })
  </script>
</body>

效果圖片

在這里插入圖片描述

data使用大括號就是對象式的寫法

第二種寫法，函數(shù)式

<body>
  <div id="box">
    <h1>你好，{{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      // data: {
      //   name: "對象式，這里是name的值",
      // }
      data:function(){
      return {
        name:"函數(shù)式，這里是name的值",
      }
    }
    })
  </script>
</body>

效果圖片

在這里插入圖片描述