[Vue] el 与 data 的两种写法

小炜1128

已于 2022-09-23 12:23:43 修改

阅读量489

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js 前端 javascript vue 前端框架

于 2022-05-07 19:01:44 首次发布

本文链接：https://blog.csdn.net/m0_53022813/article/details/124636687

版权

Vue 学习笔记专栏收录该内容

90 篇文章 28 订阅

订阅专栏

在这里插入图片描述

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. el 的写法
1.1 写法1
1.2 写法2

2. data 的写法
2.1 写法1
2.2 写法2

1. el 的写法

1.1 写法1

在实例化Vue对象的时候，传入配置对象，使用el属性绑定vue实例需要控制的容器。

<body>
  <div id="app">

  </div>
  <script>
    new Vue( {
      el: '#app'
    } )
  </script>
</body>

1.2 写法2

使用Vue上的$mount方法将vue实例对象挂载到容器上。

<body>
  <div id="app">

  </div>
  <script>
    const app = new Vue( {
      
    } )
    app.$mount( '#app' )
  </script>
</body>

el 的写法，二者可以任选其一(两种写法没什么区别)

第二中写法更加灵活，比如，可以用于实现异步操作。

<body>
  <div id="app">

  </div>
  <script>
    const app = new Vue( {
      
    } )
    // app.$mount( '#app' )
    // 一秒之后才将vue实例与容器关联
    setTimeout( ()=>{
      app.$mount( '#app' )
    }, 1000 )
  </script>
</body>

2. data 的写法

2.1 写法1

对象式(在组件化写法中，不适用，组件化中只适用第二中写法)

<body>
  <div id="app">

  </div>
  <script>
    const app = new Vue( {
      data: {
        
      }
    } )
    app.$mount( '#app' )
  </script>
</body>

2.2 写法2

函数式
必须有一个返回值，返回值为对象

<body>
  <div id="app">

  </div>
  <script>
    const app = new Vue( {
      data: function() {
        return {
          
        }
      }
    } )
    app.$mount( '#app' )
  </script>
</body>

data函数中的this指向vue实例
data 函数由vue实例调用
data函数不能写成箭头函数，箭头函数没有自己的this，this会指向window，this不再执行Vue实例

简写：

<body>
  <div id="app">

  </div>
  <script>
    const app = new Vue( {
      data() {
        return {

        }
      }
    } )
    app.$mount( '#app' )
  </script>
</body>