快捷導(dǎo)航

Vue實(shí)例中el和data的兩種寫(xiě)法小結(jié)

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

這篇文章主要介紹了Vue實(shí)例中el和data的兩種寫(xiě)法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前文提要

本文僅做自己的學(xué)習(xí)記錄，如有錯(cuò)誤，請(qǐng)多諒解

Vue實(shí)例的el

第一種寫(xiě)法

<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>

第二種寫(xiě)法

<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實(shí)例，后面加上’$mount’，'mount’帶有綁定的意思，再加上id選擇器字符串

小結(jié)

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

Vue實(shí)例中data

第一種寫(xiě)法，對(duì)象式

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

效果圖片

在這里插入圖片描述

data使用大括號(hào)就是對(duì)象式的寫(xiě)法

第二種寫(xiě)法，函數(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: "對(duì)象式，這里是name的值",
      // }
      data:function(){
      return {
        name:"函數(shù)式，這里是name的值",
      }
    }
    })
  </script>
</body>

效果圖片

在這里插入圖片描述