Comment utiliser des données statiques dans vue

Vue.js est un framework frontal MVVM léger qui peut facilement gérer des applications frontales complexes. Dans le processus d'utilisation de Vue.js, en plus d'interagir avec l'interface de données back-end, nous devons également traiter des données statiques, telles que certaines valeurs par défaut, constantes, configurations, etc. pour utiliser des données statiques dans Vue.js.

1. Définir des données statiques dans Vue.js

Pour définir des données statiques, vous pouvez utiliser l'option data fournie dans Vue.js, qui peut être une fonction ou un objet .

(1) Méthode fonction :

new Vue({
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

(2) Méthode objet :

new Vue({
  data: {
    message: 'Hello Vue.js!'
  }
})

Définir des données statiques dans un composant nécessite l'utilisation d'une fonction , c'est-à-dire que le composant doit renvoyer un nouvel objet. Étant donné que les composants peuvent être réutilisés, ils ne peuvent pas être définis directement à l'aide d'objets, sinon des erreurs se produiront.

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  template: '<div>{{ message }}</div>'
})

Dans cet exemple, nous définissons un composant et nous devons renvoyer un objet contenant l'attribut message.

2. Utiliser des données statiques dans Vue.js

Pour utiliser des données statiques dans Vue.js, nous devons interpoler ou lier des expressions dans le modèle.

(1) Interpolation

L'interpolation est un moyen d'insérer des données dans l'arborescence DOM. Utilisez {{ }} pour insérer des données Vue.js. Vous trouverez ci-dessous un exemple utilisant l'interpolation.

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Dans cet exemple, nous utilisons le message de données de Vue.js pour l'insérer dans l'élément

(2) Liaison des attributs

En plus d'utiliser l'interpolation pour restituer les données, vous pouvez également utiliser l'instruction v-bind pour lier l'un des attributs de l'élément. Voici un exemple d'utilisation de v-bind :

<div id="app">
  <img v-bind:src="imageSrc">
</div>

new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://vuejs.org/images/logo.png'
  }
})

Dans cet exemple, nous lions l'attribut src de l'élément aux données Vue.js imageSrc.

(3) Utilisation de filtres

Lorsque nous devons effectuer certains traitements sur des données statiques, nous pouvons utiliser le filtre fourni par Vue.js pour les traiter. Vous trouverez ci-dessous un exemple d'utilisation de filtres.

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

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  el: '#app',
  data: {
    message: 'hello vue.js!'
  }
})

Dans cet exemple, nous définissons un filtre majuscule qui met en majuscule la première lettre d'une chaîne. L'utilisation dans le modèle est de suivre le message avec un caractère barre verticale (|) et le nom du filtre.

3. Vue.js met à jour dynamiquement les données statiques

Lorsque nous devons mettre à jour dynamiquement les données statiques, il nous suffit de modifier les données liées via la méthode d'instance de Vue.js .

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Dans cet exemple, nous lions un élément d'entrée et utilisons la directive v-model pour le lier au message de données de l'instance Vue.js. Lorsque les données changent, Vue.js mettra automatiquement à jour le DOM.

4. Résumé

Grâce à l'étude de cet article, nous avons appris à définir et à utiliser des données statiques dans Vue.js. Dans le même temps, nous avons également appris à utiliser les méthodes d'instance de Vue.js pour mettre à jour dynamiquement les données statiques. Dans le développement réel, nous devons utiliser avec flexibilité les techniques ci-dessus pour mieux répondre à nos besoins de développement.

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!