Parlons des propriétés et méthodes communes des objets d'instance Vue

Vue.js est un framework frontal qui peut implémenter des fonctionnalités de vue basées sur les données et composées de composants. Dans une application Vue.js, chaque objet d'instance Vue possède ses propres propriétés et méthodes, qui sont très importantes dans le développement de Vue. Cet article présentera les propriétés et méthodes communes des objets d'instance Vue.

Propriétés de l'objet d'instance Vue

data

Chaque objet d'instance Vue doit avoir l'attribut data, qui est l'objet racine qui stocke les données dans l'objet d'instance Vue. C'est l'un des aspects essentiels de la mise en œuvre basée sur les données de Vue. Par exemple, nous définissons une instance Vue comme suit :

var vm = new Vue({
  data: {
    message: 'Hello World!'
  }
})

Dans l'instance Vue ci-dessus, un objet de données est défini et une chaîne « Hello World ! » est initialisée. Cet attribut de message peut être utilisé dans les modèles Vue.

props

propsLes propriétés sont un moyen de recevoir des données du composant parent. Il s'agit d'une propriété dans l'objet d'instance du composant Vue et est utilisée pour transmettre des paramètres lors de la personnalisation du composant dans le composant parent. Lorsqu'un composant est défini dans un autre composant, vous pouvez utiliser des accessoires pour transmettre les données du composant parent au composant enfant. Par exemple :

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{message}}</div>'
})

var vm = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello World!'
  }
})

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

Dans l'exemple ci-dessus, nous avons créé un composant appelé child-component, qui possède un attribut props et définit une propriété appelée message. En liant l'attribut de message dans le composant parent, le composant parent peut transmettre des données au composant enfant personnalisé, utilisant ainsi les données pour personnaliser le modèle dans le composant enfant. La propriété

computed

computed est une propriété calculée dans l'objet instance Vue. Lorsque les données utilisées dans un modèle doivent changer en fonction des modifications apportées à d'autres données, des propriétés calculées peuvent être créées via la propriété calculée. Par exemple :

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

Dans l'exemple ci-dessus, nous avons défini une propriété calculée reversedMessage, qui est obtenue en inversant la valeur de l'attribut message. Lorsque le message change, les propriétés calculées changent également. L'attribut

methods

dans l'objet d'instance

methodsVue contient des méthodes réutilisables, qui sont définies comme des fonctions dans l'objet d'instance Vue. Lorsqu'un objet d'instance Vue doit gérer des événements dynamiques, l'attribut méthodes peut être utilisé. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini une méthode reverseMessage, qui inverse la valeur de l'attribut message. Cette méthode peut être appelée via la directive v-on dans le modèle Vue. L'attribut

watch

watch est utilisé pour surveiller les modifications des données dans l'objet instance Vue. Lorsque les données surveillées dans l'objet d'instance Vue changent, l'attribut watch exécutera automatiquement une fonction. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(val) {
      console.log('message changed to', val)
    }
  }
})

Dans l'exemple ci-dessus, nous avons défini un attribut watch, qui sera surveillé lorsque l'attribut de message change, et la méthode dans l'attribut watch sera exécutée pour imprimer la valeur modifiée sur la console.

Méthode d'objet d'instance Vue

$watch

Méthode d'instance$watch** est utilisée pour surveiller les modifications des données dans l'objet d'instance Vue. Lorsque les données surveillées dans l'objet d'instance Vue changent, la méthode **$watch exécutera automatiquement une fonction. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$watch('message', function(val) {
  console.log('message changed to', val)
})

Dans l'exemple ci-dessus, nous utilisons la méthode $watch pour surveiller les modifications de l'attribut du message et imprimer les informations lorsqu'elles changent. La méthode

$on

$on est utilisée pour enregistrer les écouteurs d'événements dans l'objet instance Vue. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

Dans l'exemple ci-dessus, nous utilisons la méthode $on pour enregistrer un événement nommé message-changed dans l'objet instance Vue Lorsque la propriété du message change, nous émettons un événement. La méthode

$emit

$emit est utilisée pour déclencher un événement dans l'objet instance Vue. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

vm.$emit('message-changed', 'Hello World!')

Dans l'exemple ci-dessus, nous utilisons la méthode $emit pour déclencher un événement nommé message-changed et définissons le paramètre de l'événement sur Hello World!. La méthode

$nextTick

$nextTick est utilisée pour exécuter un rappel après la mise à jour du DOM de l'objet instance Vue. Par exemple :

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$nextTick(function() {
  console.log('DOM updated')
})

Dans l'exemple ci-dessus, nous utilisons la méthode $nextTick pour exécuter un rappel après la mise à jour du DOM de l'objet instance Vue.

Résumé

L'objet instance Vue est un concept très important dans le développement de Vue. Lors de la création d'un objet instance Vue, vous devez comprendre ses propriétés et ses méthodes. Cet article présente brièvement les propriétés et méthodes courantes des objets d'instance Vue, notamment : données, accessoires, calculés, méthodes, watch, $watch, $on, $emit et $nextTick, etc. Ces propriétés et méthodes rendent le développement de Vue plus flexible et plus pratique.

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!