Début avec Vue.js

Vue rapide des concepts de base Vue.js

vue.js est une bibliothèque JavaScript basée sur l'architecture MVVM, utilisée pour créer des interfaces utilisateur. Il est plus simple, plus facile à apprendre et flexible que AngularJS. Ses fonctions principales incluent:

• liaison des données: prend en charge la liaison des données unidirectionnelle et bidirectionnelle. v-model
• Instructions et filtres: Les instructions sont utilisées pour faire fonctionner le DOM, et les filtres sont utilisés pour traiter les données.
• Componentialisation: Créer des éléments HTML personnalisés réutilisables pour améliorer la lisibilité et la maintenance du code et utilisez l'attribut pour passer les propriétés des composants. props

Remarque: Ce tutoriel est basé sur la version Vue.js 1.x. Veuillez vous référer à d'autres ressources pour le tutoriel VUE 2.X.

Ajouter vue.js à la page

Il est recommandé d'utiliser CDN pour introduire Vue.js:

<🎜>

Créer un modèle de vue Le modèle de vue

vue.js est créé à l'aide de la classe

. Le modèle d'affichage connecte le modèle de données et la vue. Vue

Exemple:

Vue HTML:

<div id="my_view"></div>

Modèle de données:

var myModel = {
  name: "Ashley",
  age: 24
};

Modèle de vue:

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

Afficher les données en vue en utilisant

Syntaxe: {{ }}

<div id="my_view">
  {{ name }} is {{ age }} years old.
</div>

Bidirectional Data Binding

Utilisez l'instruction

pour obtenir la liaison des données bidirectionnelle: v-model

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div>

Filtre

Les filtres sont utilisés pour le traitement des données et sont appelés à l'aide de symboles

: |

{{ name | uppercase }}

Rendu Array

Rendez le tableau à l'aide de la directive

: v-for

<div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div>

Tri avec

Filtre: orderBy

<li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li>

Filtre avec

Filtre: filterBy

<li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li>

Gestion des événements

Définissez la fonction de gestionnaire d'événements dans la propriété

du modèle de vue et liez les événements en utilisant la directive methods: v-on

var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

<button v-on:click="myClickHandler">Say Hello</button>

Créer des composants

Créer des composants à l'aide de la méthode

: Vue.component

Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});

Utilisez l'attribut

pour passer les propriétés des composants: props

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/{{ channel | lowercase }}">{{ channel }} @Sitepoint</a>',
});

Résumé

Ce tutoriel présente les concepts de base de Vue.js, y compris la liaison des données, les directives, les filtres, le traitement des événements et la création de composants. Pour des fonctionnalités plus avancées, veuillez vous référer à la documentation officielle.

(le contenu ultérieur, tel que les FAQ, peut être ajouté au besoin pour maintenir la cohérence avec le texte d'origine.)

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!