首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue el 和data写法

Vue实例中el和data的两种写法小结

2023-11-24 09:42:32 作者：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实例后，第二种写法可以更加自由地添加属性，将其塞入其他的函数中实现动态添加属性也行。

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使用大括号就是对象式的写法

第二种写法，函数式

<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:"函数式，这里是name的值",
      }
    }
    })
  </script>
</body>

效果图片

在这里插入图片描述

data后面不接大括号，而是接入一个函数，函数内的返回值中的数据就相当于之前对象式中写的数据，能够通过返回的name获取到它的数值。

小结

由Vue管理的函数不能写成箭头函数，也就是写成函数式的data的函数，一旦写成了箭头函数，函数中this指定的就不是Vue实例，而是全局的window。

之后学习Vue，学习到组件时候，data就必须使用函数式的写法。

到此这篇关于Vue实例中el和data的两种写法的文章就介绍到这了,更多相关vue el 和data写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！