Résumé des connaissances de base de Vue.js_Others

Présentation

vue.js est une bibliothèque utilisée pour créer des interfaces d'applications Web

Techniquement, Vue.js se concentre sur la couche ViewModel du modèle MVVM, qui connecte la vue et le modèle de liaison de données de deux manières. La manipulation réelle du DOM et le formatage de sortie sont résumés dans des directives et des filtres

Dans le domaine de la philosophie, essayez de rendre l'API de liaison de données MVVM aussi simple que possible. La modularité et la composabilité étaient également des considérations de conception importantes. Vue n'est pas un framework complet, il est conçu pour être simple et flexible. Vous pouvez l'utiliser pour un prototypage rapide, ou le mélanger avec d'autres bibliothèques pour définir votre pile frontale.

Vue. js API fait référence à AngularJS, KnockoutJS Ractive.js Rivets.js. Malgré les similitudes, je pense que Vue.js offre une valeur qui vous permet de faire des compromis sur certains des frameworks existants

Même si vous connaissez déjà certains de ces termes, il est recommandé de parcourir l'aperçu suivant des concepts, car votre conception de ces termes peut être différente dans le Vue.js suivant

Aperçu du concept

ViewModel

Un objet qui synchronise les modèles et les vues. Dans Vue.js, les ViewModels sont les constructeurs de Vue instanciée ou de ses sous-classes

var vm = new Vue({ /* options */ })

C'est l'objet principal avec lequel vous interagirez en tant que développeur lorsque vous utiliserez Vue.js. Pour plus de détails, veuillez consulter Classe : Vue.

Voir

Le HTML/DOM réel que l'utilisateur voit

vm.$el // The View

Lorsque vous utilisez Vue.js, à l'exception de vos propres instructions personnalisées, vous ne toucherez presque jamais à l'opération DOM. Lorsque les données sont mises à jour, la mise à jour de la vue peut être très précise pour chaque nœud testNode. batch et exécution de manière asynchrone, offrant ainsi de meilleures performances.

Modèle

Ceci est un objet Javascript légèrement modifié

vm.$data // The Model

Dans Vue.js, les modèles ne sont que de simples objets Javascript et objets de données. Vous pouvez manipuler leurs propriétés et afficher les modèles, observer leurs modifications et recevoir des notifications. Vue.js utilise les getters/setters ES5 pour convertir les propriétés de l'objet de données, ce qui permet des opérations directes sans vérification sale.

L'objet de données mutera le cas échéant, donc le modifier a le même effet que modifier vm.$data par référence. Cela permet également à plusieurs instances ViewModel d'observer le même élément de données.

Pour les détails techniques, veuillez consulter Options d'instanciation : données.

Directives

Les attributs HTML privés indiquent à Vue.js d'effectuer certains traitements sur le DOM

<div v-text="message"></div>

L'élément div ici a une directive v-text, et la valeur est message. Cela signifie dire à Vue.js de garder le contenu de ce nœud div synchronisé avec l'attribut message dans viewMode

La directive

peut encapsuler n'importe quelle opération DOM. Par exemple, v-attr exploite un élément d'attribut, v-repeat clone un élément basé sur un tableau et v-on attache la surveillance des événements, dont nous parlerons plus tard

.

Reliures moustaches

Vous pouvez également utiliser une reliure de style moustache, à la fois dans le texte et dans les attributs. Ils se traduisent en directives v-text v-attr. Par exemple :

<div id="person-{{id}}">Hello {{name}}!</div>

Bien que cela soit pratique, il y a quelques points auxquels vous devez faire attention :

Si vous définissez l'attribut src d'une image, une requête HTTP sera envoyée, donc lorsque le modèle est analysé pour la première fois et que 404 apparaît, il est préférable d'utiliser v-attr à ce moment

Internet Explorer supprimera les attributs de style internes non valides lors de l'analyse HTML, donc si nous voulons prendre en charge la liaison CSS en ligne avec IE, j'utilise toujours v-style

Dans v-html, vous pouvez utiliser trois accolades {{{comme ceci}}} pour traiter le HTML non échappé, mais cela aura des attaques XSS potentielles et peut ouvrir des fenêtres, il est donc recommandé d'être absolument sûr. Ne faites que ceci lorsque les données sont complètes, ou nettoyez le HTML non fiable via un filtre de pipeline personnalisé

Filtres

Vous pouvez utiliser des fonctions pour traiter ces données brutes avant de mettre à jour la vue. Ils utilisent une directive ou une liaison « pipeline » :

<div>{{message | capitalize}}</div>

Maintenant, avant que le contenu textuel du div ne soit mis à jour, la valeur de ce message sera traitée par la fonction majuscule. Pour plus de détails, veuillez consulter Filtres en profondeur.

Composants

Dans Vue.js, un composant est un constructeur de modèle de vue simple, enregistré via Vue.component (ID, constructeur). La directive v-component du modèle d'un autre modèle de vue peut être imbriquée via un ID associé. Ce mécanisme simple permet de réutiliser et de composer des modèles de vue déclaratifs d'une manière similaire aux composants Web, sans nécessiter les derniers navigateurs ou polyfills lourds. En divisant l'application en composants plus petits, le résultat est une base de code hautement découplée et maintenable. Pour plus de détails, voir Composition de ViewModels.

Un exemple rapide

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

Traduction approximative, veuillez signaler toute erreur