Usage of function and method in vue

Function and method in Vue.js are both used to define methods, but their scope and behavior are different. Function is defined outside the component or instance and cannot access component data, while method is defined within the component or instance and can access component data and trigger reactive updates. 1. function purpose: general function, does not involve component data. 2. Method purpose: component-specific functions or functions that need to access component data.

##Usage of function and method in Vue.js

In Vue.js,

function and method are used to define methods in components or instances, but they have different scopes and behaviors.

function

function is a standard function declaration or expression in JavaScript and has no special meaning in Vue.js. They are defined outside the Vue instance or component and can be used in the component or template, but they cannot access the data and methods of the component or instance.

method

method is a Vue.js-specific keyword used to define methods in components or instances. They are related to the following properties:

• Scope: method Binding to a component or instance allows access to the component or instance's data and methods.
• Responsiveness: Changes made to the data in method will trigger Vue's reactive system to update the component's view.
• Usage: method can be used from a component or template and is accessible through the component's this keyword.

Purpose

function Used to define functions that are general or do not involve component data, for example:

<code class="javascript">// 在 Vue 实例外部
function formatDate(date) {
  // ...业务逻辑
}

// 在 Vue 实例中
formatDate(new Date());</code>

method Used to define component-specific functions or functions that need to access component data, for example:

<code class="javascript">// 在 Vue 组件中
methods: {
  save() {
    this.data = { name: 'John Doe' };
  }
}</code>

Usage rules

• function can be defined and used in code at any time.
• method should be defined in the methods option, which is a property of the Vue component.
• method The name should be a string.
• method Can accept parameters.

Example

<code class="javascript">// Vue 组件
export default {
  methods: {
    // 方法
    increment() {
      this.count++;
    },
    // 通用函数（不涉及组件数据）
    formatDate(date) {
      // ...业务逻辑
    }
  }
}</code>

The above is the detailed content of Usage of function and method in vue. For more information, please follow other related articles on the PHP Chinese website!