Comment utiliser JavaScript dans vue

Avec la large application et la popularité de Vue, de plus en plus de développeurs commencent à impliquer l'utilisation de JavaScript dans Vue. Cet article présentera les méthodes et techniques d'utilisation de JavaScript dans Vue, aidant les lecteurs à maîtriser rapidement les compétences d'utilisation de JavaScript pour le développement de Vue.

1. Connaissance de base de l'utilisation de JavaScript dans Vue

Vue est un framework JavaScript, donc JavaScript est indissociable lors de l'utilisation de Vue. Le langage JavaScript de ES6 et supérieur est principalement utilisé dans Vue. ES6 ajoute de nombreuses nouvelles syntaxes et fonctionnalités à JavaScript, telles que des fonctions fléchées et des chaînes de modèles.

De plus, Vue a également un concept de base : l'instance Vue est créée via le constructeur Vue et peut être comprise comme un composant Vue. Le code JavaScript peut être utilisé dans les instances Vue pour implémenter diverses fonctions.

2. Façons d'utiliser JavaScript dans Vue

Les façons d'utiliser JavaScript dans Vue sont les suivantes :

1 Utilisez les expressions JavaScript directement dans les modèles Vue

Les modèles Vue prennent en charge l'utilisation des expressions JavaScript directement dans les modèles, et les données le seront. être rendu en temps réel. Par exemple :

<div>{{ message }}</div>

À ce moment, Vue restituera la valeur de la variable de message dans le div du modèle.

2. Définir des méthodes et des propriétés calculées dans les instances Vue

De nombreuses méthodes et propriétés calculées peuvent être définies dans les instances Vue, telles que :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet: function () {
      alert('Hello ' + this.message + '!')
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini une méthode greet et une propriété calculée reverseMessage, renvoie le chaîne inversée de la chaîne du message. Ces méthodes et propriétés calculées peuvent être appelées dans le modèle via le nom d'instance vm.

3. Utilisez le code JavaScript dans les fonctions de hook de cycle de vie de Vue

Vue fournit plusieurs fonctions de hook de cycle de vie, qui seront automatiquement appelées pendant le cycle de vie de l'instance. Le code JavaScript peut être écrit dans la fonction de hook pour implémenter une fonction spécifique.

Par exemple, définissez une variable dans la fonction hook créée :

var vm = new Vue({
  el: '#app',
  created: function () {
    this.count = 0;
  },
  methods: {
    addCount: function () {
      this.count++;
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini un nombre de variables dans la fonction hook créée et l'avons incrémenté de 1 à chaque fois dans la méthode addCount. Cette variable est accessible dans le modèle via la variable count dans l'instance.

3. Fonctions courantes de JavaScript dans Vue

Dans Vue, nous pouvons utiliser JavaScript pour implémenter de nombreuses fonctions :

1. Obtenir des éléments DOM

En utilisant JavaScript, vous pouvez obtenir des éléments DOM. les données de l'élément DOM peuvent être enregistrées dans l'instance Vue via le mécanisme réactif de Vue. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    showMessage: function () {
      alert('you input is:' + this.message);
    }
  },
  mounted: function () {
    var input = document.getElementById('messageInput');
    input.addEventListener('input', function (event) {
      vm.message = event.target.value;
    })
  }
})

Dans l'exemple ci-dessus, nous avons obtenu l'élément DOM avec l'ID messageInput dans la fonction hook montée et ajouté un écouteur d'événement lorsque l'utilisateur saisit des données, l'événement est déclenché et les données saisies sont enregistrées dans le message de. l'instance Vue au milieu.

2. Lier des événements

Vue utilise la directive v-on pour lier les gestionnaires d'événements, par exemple :

<button v-on:click="increment">+</button>

Dans l'exemple ci-dessus, nous utilisons la directive v-on pour lier l'événement click lorsque l'utilisateur clique sur le bouton. La méthode d'incrémentation sera déclenchée.

3. Bouclez la liste de rendu

Dans Vue, vous pouvez utiliser l'instruction v-for pour boucler la liste de rendu, par exemple :

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Dans l'exemple ci-dessus, nous utilisons l'instruction v-for pour boucler la liste de rendu. et ajoutez chaque élément dans items Un élément est rendu comme un élément li.

4. Rendu conditionnel

Dans Vue, vous pouvez utiliser les instructions v-if et v-else pour implémenter le rendu conditionnel, par exemple :

<div v-if="show">
  <p>{{ message }}</p>
</div>
<div v-else>
  <p>It is hidden now.</p>
</div>

Dans l'exemple ci-dessus, nous utilisons l'instruction v-if pour déterminer la valeur. de la variable show, si show est vrai alors le premier div est rendu, sinon le deuxième div est rendu.

4. Résumé

L'utilisation de JavaScript dans Vue rendra notre code plus flexible et efficace. En apprenant les méthodes et techniques présentées dans cet article, nous pouvons mieux comprendre l'importance et l'utilisation de JavaScript dans Vue, améliorant ainsi notre efficacité et notre maîtrise du développement de Vue.

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!