Vue talks about the usage of $

We can already get a lot of usage of Vue$ from the api on the Vue official website, and some of the usage of $ will be explained here.

The api of Vue official website is attached below:

API — Vue.js (vuejs.org) https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property

$ in the instance property:

vm.$data:

Explanation: The data object observed by the Vue instance. The Vue instance proxies access to its data object properties. That is to say, you can use vm.$data to access the data in the Vue instance.

vm.$el:

The root DOM element used by the Vue instance.

var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

vm.$parent、vm.$root、vm.$children:

vm.$parent refers to the parent instance of the Vue component;

vm.$root refers to the root Vue instance of the current component tree. If the current instance has no parent instance, this instance will be itself;

vm.$children refers to the child instance of the Vue component;

Vue components can access the properties and methods of the parent component through $root and $parent. The difference between the two is that if there are multi-level child components, the root parent component is obtained through root access.

vm.refs:

For details, please refer to the next article:

The usage of ref($refs) in Vue

An object that holds all DOM element and component instances registered with the ref attribute.

<div id="app">
  <p type="text" ref="input"/>
</div>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input.value ="test"; 
    }
  }
})
</script>

In particular, we can add a reference to $ by ourselves, but not by passing in new Vue, but by manually assigning: Vue.prototype.$xxx= xxx
For example, the most common Vue.prototype.$http = axios