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

2-2.vue的实例属性：datadata属性的作用data属性的作用是存储vue实例或组件里面的数值。在vue的实例中它是以一个对象的方式（多个键值对），在组件中它是一个函数，通过函数返回一个对象。data在vue的实例里面使用1.代码展示<body><div id='app'><P>{{message}}</P></div><s

堵车了

3120人浏览 · 2020-12-19 12:42:16

堵车了 · 2020-12-19 12:42:16 发布

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>

2.过程分解

在这里插入图片描述

3.结果展示

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^