qu'est-ce que la vue

vue est l'abréviation de Vue.js. Il s'agit d'un framework JavaScript open source pour créer des interfaces utilisateur et d'un framework d'application Web pour créer des applications d'une seule page ; le cœur de l'objectif de vue est la couche de vue dans le MVC ; Dans le même temps, il peut également facilement obtenir des mises à jour des données et réaliser l'interaction entre la vue et le modèle via des méthodes spécifiques au sein du composant.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.0, ordinateur DELL G3.

【Articles connexes recommandés : vue.js】

Vue.js (/vjuː/, ou simplement Vue) est un outil de création d'interfaces utilisateur. Framework JavaScript open source, c'est également un framework d'application Web permettant de créer des applications d'une seule page.

Vue.js est un framework frontal JavaScript populaire conçu pour mieux organiser et simplifier le développement Web. L'objectif principal de Vue est la couche de vue dans le modèle MVC. En même temps, il peut également facilement obtenir des mises à jour des données et réaliser l'interaction entre la vue et le modèle via des méthodes spécifiques au sein du composant.

Fonctionnalités

Composants

Les composants sont l'une des fonctionnalités les plus puissantes de Vue. Afin de mieux gérer une application volumineuse, il est souvent nécessaire de découper l’application en petits composants indépendants et réutilisables. Dans Vue, les composants sont des extensions d'éléments HTML de base, et leurs données et leur comportement peuvent être facilement personnalisés. Le code ci-dessous est un exemple de composant Vue, rendu sous la forme d'un bouton qui compte les clics de souris.

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: &#39;<button v-on:click="count++">You clicked me {{ count }} times.</button>&#39;
})

Template

Vue utilise une syntaxe de modèle basée sur HTML pour permettre aux développeurs de lier des éléments DOM aux données dans l'instance Vue sous-jacente. Tous les modèles Vue sont du HTML légal, ils peuvent donc être analysés par les navigateurs et les analyseurs HTML qui suivent la spécification. Dans l'implémentation sous-jacente, Vue compile les modèles en fonctions de rendu DOM virtuel. Combiné avec le système réactif, Vue peut calculer intelligemment le coût minimum du rendu des composants et l'appliquer aux opérations DOM lorsque l'état de l'application change. [12]

De plus, Vue permet aux développeurs d'utiliser directement le langage JSX comme fonction de rendu du composant pour remplacer la syntaxe du modèle. [13] Voici la version de rendu JSX du bouton qui peut compter le nombre de clics (le processeur Babel correspondant doit être configuré) :

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

Conception réactive

 Responsive signifie que les vues dans un modèle MVC changent à mesure que le modèle change. Dans Vue, les développeurs n'ont qu'à lier la vue au modèle correspondant, et Vue peut automatiquement observer les changements dans le modèle et redessiner la vue. Cette fonctionnalité rend la gestion de l'état de Vue assez simple et intuitive.

Effets de transition

Vue propose de nombreuses façons différentes d'appliquer des effets de transition lors de l'insertion, de la mise à jour ou de la suppression de DOM. Comprend les outils suivants :

• Appliquer automatiquement des classes dans les transitions et les animations CSS

• Peut être utilisé avec des bibliothèques d'animation CSS tierces, telles que Animate.css

• Utilisez JavaScript dans la fonction de hook de transition pour manipuler directement le DOM

• Vous pouvez utiliser des bibliothèques d'animation JavaScript tierces, telles que comme Velocity.js

Composant de fichier unique

Afin de mieux s'adapter aux projets complexes, Vue prend en charge les fichiers avec une extension .vue pour définir un composant complet, utilisant Une alternative à l'enregistrement des composants à l'aide de Vue.component. Les développeurs peuvent utiliser des outils de construction tels que Webpack ou Browserify pour empaqueter des composants à fichier unique.

Plugin principal

vue-router
vuex
vue-loader
vueify 
vue-cli

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!