el与data的两种写法

el的两种写法

第一种写法：创建vue实例的时候配置el属性

<script>
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'byboy',
      };
    },
  });
</script>

第二种写法：创建vue实例后通过vm.$mount()指定el的值

<script>
  const vm = new Vue({
    data() {
      return {
        msg: 'byboy',
      };
    },
  });
  vm.$mount('#app');
</script>

两种写法随意选择

data的两种写法

第一种写法：对象式

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'byboy',
    },
  });
</script>

第二种写法：函数式

<script>
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'byboy',
      };
    },
  });
</script>

推荐使用第二种，使用函数返回一个对象的写法。

注意：

• 单文件组件必须使用函数式。

• 由vue管理的实例不能写箭头函数，因为箭头函数的this指向全局对象