2-2.vue的实例属性：data

最新推荐文章于 2024-06-21 09:43:57 发布

堵车了

最新推荐文章于 2024-06-21 09:43:57 发布

阅读量3.1k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111402328

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

2-2.vue的实例属性：data

data属性的作用

data属性的作用是存储vue实例或组件里面的数值。在vue的实例中它是以一个对象的方式（多个键值对），在组件中它是一个函数，通过函数返回一个对象。

data在vue的实例里面使用

1.代码展示

<body>
  <div id='app'>
    <P>{{message}}</P>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'aaa',
        testArray: ["aa","bb","cc"],
        testbool: true,
        testObj: {
          name: "zhangsan",
          age: 18
        }
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

data在组件里面的使用

1.代码展示

<body>
  <div id='app'>
    <cpn></cpn>
  </div>

  <template id='cpn'>
    <div>
      {{message}}
    </div>
  </template>

  <script>
    const cpn = {
      template: '#cpn',
      data() {
        return {
          message: '这是组件里面的数据',
          testObj: {
            name: '张三',
            age: 18
          }
        }
      }
    }
    const app = new Vue({
      el: '#app',
      components: {
        cpn,
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

组件中以方法的形式存在原因（原理解析）

我们在封装组件的目的之一是为了复用其功能，换句话说在一个项目里面封装好的一个组件使用到的地方不止一处。假若data在组件中也是以属性的形式存在的话，在多次使用组件时是共享的一个对象。这样做造成的后果就是在一个使用组件的地方修改了值，那么另外几处也会进行修改。这样并不符合设计的要求，封装组件的目的不能再在多次使用处数据进行耦合，导致一些莫名的问题。封装的要求是每处使用组件都应该有一套自己的数据，相互之间互不影响。当以data方法的形式出现后，每次通过return一个新对象给使用处来分割开，达到其一个组件的操作不影响其他组件的数据。

1.代码展示

<body>
  <div id='app'>
    <p>-------------------</p>
    <cpn></cpn>
    <p>-------------------</p>
    <cpn></cpn>
    <p>-------------------</p>
    <cpn></cpn>
    <p>-------------------</p>
    <cpn></cpn>
  </div>

  <template id='cpn'>
    <div>
      <p>{{count}}</p>
      <button @click='increment'>改变数据</button>
    </div>
  </template>

  <script>
    const cpn = {
      template: '#cpn',
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++;
        }
      }
    }
    const app = new Vue({
      el: '#app',
      components: {
        cpn,
      }
    });
  </script>

</body>