Property of vue

Series Article Directory

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
For example: the use of pandas in Chapter 1 Introduction to Python Machine Learning

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

Table of contents

Series Article Directory

foreword

1. What is a property?

2. Application/Example

1. Add instance property

2. Other details

Summarize

---

foreword

The property of Vue is often mentioned as a word. I only know that it is similar to the properties in data. I don’t know much about others, so I went to learn what property is.

---

1. What is a property?

Here is the answer from chat gpt:

In Vue, property(property) usually refers to the data property of the component instance, that is, the variable declared and defined in the component. These properties can be bound and used in the component's template.

In Vue components, attributes can be defined through propsand data.

• propsIt is the attribute of the component, which is used to receive the data passed by the parent component. Pass data to child components by defining the object in the component propsand using property binding on the component's tag. For example:

  // 子组件 MyComponent.vue
  <template>
    <div>
      <p>{
        
        { message }}</p>
    </div>
  </template>
  
  <script>
  export default {
    props: ['message'],
  }
  </script>
  

• dataIt is the internal data of the component, which is used to store the state of the component itself. By defining a function in the component data, return an object to define the data properties of the component. For example:

  // 组件 MyComponent.vue
  <template>
    <div>
      <p>{
        
        { count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        count: 0,
      }
    },
    methods: {
      increment() {
        this.count++
      },
    },
  }
  </script>
  

In the Vue component, propsit is used to receive externally passed data, and datais used for the state management of the component itself. These two together form the properties of the component.

2. Application/Example

1. Add instance property

In the vue2 documentation: 

Add instance property — Introduction to Vue Vue.js Tutorial

Here is an introduction to the usage of basic properties in vue.

2. Other details

Read the blog posts summarized by other bloggers, as follows:

Vue Data Property http://t.csdn.cn/qiNLa also wrote anti-shake and throttling here, the next one will be written. 

VUE2 Quick Start (6)---Example property (key point) http://t.csdn.cn/8MLlg This article is relatively complete, and I don't understand it very well, but it can be used for learning.

What is the meaning of attribute and property in vue? http://t.csdn.cn/2m14d This article introduces attribute and property in vue. Simply put, the value of attribute and property is that the former will change the value of the latter, but the latter will The former cannot be changed, the relationship between the former and the latter is more like an instance and a constructor (I understand it myself)

以上是记录。 

---

Summarize

This is a supplement to learning a detail in vue, continue to learn other things!