What is the use of $ in vue writing?

Vue.js, as a popular JavaScript framework, provides many convenient features and syntactic sugar to speed up our development. In Vue.js, you can often see keywords, variables and methods starting with $. This article focuses on the use of $ in Vue.js and their functions.

1. $el

$el refers to the element html node mounted by the Vue instance. Each Vue instance has the $el attribute, which is used to obtain the root DOM element mounted by the instance. After the Vue instance is created, we can use $el to see which element the instance is mounted on.

<div id="app"></div>
<script>
new Vue({
  el: '#app',
});
console.log(this.$el)// <div id="app"></div>
</script>

2. $data

$data refers to the data object defined in the Vue instance. Each Vue instance has a $data property, which can be used to obtain the data object of the current instance. Through $data we can view all the data in the data object.

<div id="app">
  <p>{{msg}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
});
console.log(this.$data);// {msg: "Hello Vue!"}
</script>

3. $props

$props refers to the properties passed by the parent component in the nested component, which can be obtained through this.$props in the child component.

<div id="app">
  <child-component message="hello"></child-component>
</div>

<script>
Vue.component('child-component', {
  props: ['message'],
  mounted() {
    console.log(this.$props.message);// 'hello'
  }
});

new Vue({
  el: '#app',
});
</script>

4. $mount

$mount is the mounting method of Vue.js instance. If the el attribute is not provided in the instance's options, you need to manually call the $mount method to manually mount the Vue instance.

<div id="app"></div>
<script>
new Vue({
  data: {
    message: 'Hello Vue!'
  },
}).$mount('#app');
console.log(this.$el);// <div id="app"></div>
</script>

5. $watch

$watch is a listening function provided by Vue.js, used to observe changes in data. Whenever the data changes, the callback function in $watch is triggered. We can use $watch to monitor data changes and perform certain operations.

<div id="app">
  <p>{{message}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('newValue:', newVal);
      console.log('oldValue:', oldVal);
    }
  }
});
</script>

6. $refs

$refs points to all references owned by the Vue instance. We can get the reference of the element through the ref attribute. DOM elements can be quickly obtained through $refs in Vue.js.

<div id="app">
  <button ref="myButton" @click="clickButton">Click me</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    clickButton() {
      this.$refs.myButton.textContent = 'Button has been clicked';
    }
  }
});
</script>

7. $emit

$emit is a method of the Vue.js instance, used to trigger a custom event. When we want to trigger an event in a child component, we can use $emit to pass it.

<!-- 父组件 -->
<div id="app">
  <child-component @myEvent="handleEvent"></child-component>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleEvent() {
      console.log("I'm from parent");
    }
  }
});

<!-- 子组件 -->
Vue.component('child-component', {
  template: '<button @click="clickButton">Click me</button>',
  methods: {
    clickButton() {
      this.$emit('myEvent');
    }
  }
});
</script>

8. $router

$router is an instance object of the Vue.js routing plug-in. We can use $router to implement some jumps, page switching and other functions. $router provides many methods to implement routing jump functions.

<router-link to="/home">Home</router-link>

<script>
Vue.use(VueRouter);

var router = new VueRouter({
  routes: [{
    path: '/home',
    component: Home,
  }]
});

new Vue({
  el: '#app',
  router: router
});
</script>

9. $store

Vuex is the state management library officially provided by Vue.js, and $store is a property of the Vuex instance. We can access Vuex's state objects and methods through $store. $store provides a convenient way to uniformly manage the state of an application.

<script>
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  el: '#app',
  store: store,
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
});
</script>

Summary

In Vue.js, $ is a very important character and is used a lot in the built-in methods of the Vue framework. Here are some commonly used methods starting with $ and variables. $el and $data are too basic, while other methods are more used to understand Vue components and the Vue life cycle. In any case, we need to be familiar with and understand their purpose and actual usage in order to better learn and use the Vue.js framework.

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