Vue ---- el 与 data 的两种写法

最新推荐文章于 2024-11-11 21:19:25 发布

喵喵喵更多

最新推荐文章于 2024-11-11 21:19:25 发布

阅读量79

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： java java进阶后端

本文链接：https://blog.csdn.net/m0_67393827/article/details/124777575

版权

面试同时被 3 个专栏收录

81 篇文章 7 订阅

订阅专栏

阿里巴巴

81 篇文章 0 订阅

订阅专栏

学习路线

77 篇文章 0 订阅

订阅专栏

文章目录

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

视频：【https://www.bilibili.com/video/BV1Zy4y1K7SH?p=9】
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. el 的写法

1.1 写法1

<body>
  <div id="app">

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

1.2 写法2

<body>
  <div id="app">

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

1.3

el 的写法，在组件化写法或html中，二者可以任选其一(两种写法没什么区别)

第二中写法可以用于实现异步操作

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

函数中的this指向vue实例

data 函数vue实例调用

不能写成箭头函数，箭头函数没有自己的this，this会指向window

简写：

<body>
  <div id="app">

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

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