What does $ mean in vue?

In Vue.js, the $ symbol represents the Vue instance itself, providing quick access to component data, methods and life cycle methods, which is equivalent to the this keyword. Specific uses include: Access data: $data Calling method: $methods Execute life cycle method: $ Life cycle method access nested component instance: $refs Get Vue instance attribute: $el (DOM element) or $router

The meaning of $ in Vue

In Vue.js, the dollar sign ($) is a special object that provides Quick access to Vue instances. It is equivalent to the this keyword, but more convenient since it can be used inside any Vue component or method without explicit binding.

Purpose

$ Mainly used for the following purposes:

• Access data: $ is the data of the Vue instance Properties, which can be used to access the component's data properties.
• Access method: $ is the methods attribute of the Vue instance, which can be used to call the component's method.
• Access life cycle methods: $ is the life cycle method of the Vue instance, which can be used to execute code at different stages of the component life cycle.
• Access other instances: In nested components, $ can be used to access instances of parent or child components.
• Access the properties of the Vue instance: $ can be used to access the properties of the Vue instance, such as $el (DOM element) or $router ( Vue Router instance).

Examples

Here are some examples of using $:

// 访问数据
console.log(this.data.message); // 与 $data.message 等效

// 访问方法
this.methods.greet(); // 与 $methods.greet() 等效

// 访问生命周期方法
created() {
  // 这里可以访问 this 或 $
  console.log(this.$el); // DOM 元素
}

// 访问嵌套组件实例
<child-component ref="child"></child-component>
this.$refs.child.doSomething(); // 调用子组件的方法

Tip

• Try to avoid overuse of $, as it will make the code more difficult to understand.
• When using $ inside a method or lifecycle hook, make sure to use it interchangeably with this.
• For nested components, when using $ to access child component instances, make sure to add the ref attribute in the template.

The above is the detailed content of What does $ mean in vue?. For more information, please follow other related articles on the PHP Chinese website!