【Vue】03 el与data的两种写法

最新推荐文章于 2022-11-26 10:49:36 发布

one or only

最新推荐文章于 2022-11-26 10:49:36 发布

阅读量86

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_37308779/article/details/125210136

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中el与data的两种不同用法。对于el，可以初始化时配置或者后期通过$mount指定。data部分，可以采用对象式或函数式声明，但在组件中推荐使用函数式以避免数据共享问题。注意，使用箭头函数会导致this指向改变，应避免在Vue管理的函数中使用。

摘要由CSDN通过智能技术生成

1.5. el 与 data 的两种写法

el 有2种写法：
        a. 创建 Vue实例对象的时候配置 el 属性
        b. 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值
data 有2种写法:
        a对象式：data： { }
        b函数式：data() { return { } }
      如何选择：目前哪种写法都可以，以后到组件时，data 必须使用函数，否则会报错
一个重要的原则
      由 Vue 管理的函数，一定不要写箭头函数，否则 this 就不再是 Vue实例了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  
  <body>
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    // el的两种写法
    // const v = new Vue({
    // 	//el:'#root', // 第一种写法
    // 	data: {
    // 		name:'cess'
    // 	}
    // })
    // console.log(v)
    // v.$mount('#root') // 第二种写法

    // data的两种写法
    new Vue({
      el: '#root',
      // data的第一种写法：对象式
      // data:{
      // 	name:'cess'
      // }

      //data的第二种写法：函数式
      data() {
        console.log('@@@', this) // 此处的this是Vue实例对象
        return {
          name: 'cess'
        }
      }
    })
  </script>
</html>