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:

<code class="language-html"></code>

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:

<code class="language-html"><div id="my_view"></div></code>

Modèle de données:

<code class="language-javascript">var myModel = {
  name: "Ashley",
  age: 24
};</code>

Modèle de vue:

<code class="language-javascript">var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});</code>

Afficher les données en vue en utilisant

Syntaxe: {{ }}

<code class="language-html"><div id="my_view">
  {{ name }} is {{ age }} years old.
</div></code>

Bidirectional Data Binding

Utilisez l'instruction

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

<code class="language-html"><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></code>

Filtre

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

: |

<code class="language-html">{{ name | uppercase }}</code>

Rendu Array

Rendez le tableau à l'aide de la directive

: v-for

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

Tri avec

Filtre: orderBy

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

Filtre avec

Filtre: filterBy

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

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

<code class="language-javascript">var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});</code>

<code class="language-html"><button v-on:click="myClickHandler">Say Hello</button></code>

Créer des composants

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

: Vue.component

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

Utilisez l'attribut

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

<code class="language-javascript">Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/%7B%7B%20channel%20%7C%20lowercase%20%7D%7D">{{ channel }} @Sitepoint</a>',
});</code>

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!