A quoi sert $ en écriture vue ?

Vue.js, en tant que framework JavaScript populaire, fournit de nombreuses fonctionnalités pratiques et du sucre syntaxique pour accélérer notre développement. Dans Vue.js, vous pouvez souvent voir des mots-clés, des variables et des méthodes commençant par $. Cet article se concentre sur l'utilisation de $ dans Vue.js et leurs fonctions.

1. $el

$el fait référence au nœud html de l'élément monté par l'instance Vue. Chaque instance de Vue possède l'attribut $el, qui est utilisé pour obtenir l'élément racine DOM monté par l'instance. Une fois l'instance Vue créée, nous pouvons utiliser $el pour voir sur quel élément l'instance est montée.

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

2. $data

$data fait référence à l'objet de données défini dans l'instance Vue. Chaque instance de Vue possède une propriété $data, qui peut être utilisée pour obtenir l'objet de données de l'instance actuelle. Grâce à $data, nous pouvons afficher toutes les données de l'objet de données.

<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 fait référence aux propriétés transmises par le composant parent dans le composant imbriqué, qui peuvent être obtenues via this.$props dans le composant enfant.

<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 est la méthode de montage de l'instance Vue.js. Si l'attribut el n'est pas fourni dans les options de l'instance, vous devez appeler manuellement la méthode $mount pour monter manuellement l'instance Vue.

<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 est une fonction d'écoute fournie par Vue.js, utilisée pour observer les changements dans les données. Chaque fois que les données changent, la fonction de rappel dans $watch est déclenchée. Nous pouvons utiliser $watch pour surveiller les modifications des données et effectuer certaines opérations.

<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 pointe vers toutes les références appartenant à l'instance Vue. Nous pouvons obtenir la référence de l'élément via l'attribut ref. Les éléments DOM peuvent être rapidement obtenus via $refs dans 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 est une méthode d'instance Vue.js, utilisée pour déclencher un événement personnalisé. Lorsque nous voulons déclencher un événement dans un composant enfant, nous pouvons utiliser $emit pour le transmettre.

<!-- 父组件 -->
<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 est un objet instance du plugin de routage Vue.js. Nous pouvons utiliser $router pour implémenter certains sauts, changements de page et d'autres fonctions. $router fournit de nombreuses méthodes pour implémenter les fonctions de saut de routage.

<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 est la bibliothèque de gestion d'état officiellement fournie par Vue.js. $store est une propriété de l'instance Vuex. Nous pouvons accéder aux objets et méthodes d'état de Vuex via $store. $store fournit un moyen pratique de gérer uniformément l'état de l'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>

Résumé

Dans Vue.js, $ est un caractère très important et est beaucoup utilisé dans les méthodes intégrées du framework Vue. Nous présentons ici quelques méthodes et variables couramment utilisées commençant par $. $el et $data sont trop basiques, tandis que d'autres méthodes sont davantage utilisées pour comprendre les composants Vue et le cycle de vie de Vue. Dans tous les cas, nous devons connaître et comprendre leur objectif et leur utilisation réelle afin de mieux apprendre et utiliser le framework Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!