Qu’est-ce que Vue.js ?

Vue.js est une bibliothèque utilisée pour construire des interfaces web interactives.

Vue.js fournit une liaison de données MVVM et un système de composants composable avec une API simple et flexible.

Ce chapitre porte sur Vue 1.x. Pour Vue 2.x, cliquez sur les liens ci-dessous.

Vue.js 2.0 Tutoriel :http://www.example.com/vue2/vue-tutorial.html

Vue 2.0 Guide du débutant :http://www.example.com/w3cnote/vue2-start-coding.html

Vue.js 3.x Tutoriel :https://www.example.com/vue3/vue3-tutorial.html

Fonctionnalités de Vue.js

  • Simplicité :Modèle HTML + données JSON, puis créez une instance Vue, c'est aussi simple que cela.
  • Piloté par les données :Suit automatiquement les expressions de modèle dépendantes et les propriétés calculées.
  • Basé sur les composants :Créez des interfaces avec des composants découplés et réutilisables.
  • Léger :~24kb min+gzip, aucune dépendance.
  • Rapide :Mises à jour DOM par lots asynchrones précises et efficaces.
  • Compatible avec les modules :Installez via NPM ou Bower, s'intégrant parfaitement à votre flux de travail.

Si vous aimez l'un des éléments suivants, vous aimerez certainement Vue.js :

  • Mécanisme de liaison de données extensible
  • Objets natifs comme modèles
  • API concise et claire
  • Construction d'interface utilisateur à base de composants
  • Peut être utilisé avec plusieurs bibliothèques légères

Installation de Vue.js

Version autonome

Téléchargez-le directement et incluez-le avec une balise <script> ; Vue sera enregistré comme variable globale.

Adresse de téléchargement du site officiel de Vue.js :http://vuejs.org/guide/installation.html

Vous pouvez télécharger directement la version de production depuis le site officiel et l'utiliser dans votre projet.

Alternativement, vous pouvez utiliser la bibliothèque CDN de ressources statiques (version 1.0.18) :

https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js

Installation de NPM

L'installation via NPM est recommandée lors de la création de grandes applications avec Vue.js :

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev

Installation de Bower

# 最新稳定版本
$ bower install vue

Créer la première application Vue

Ensuite, créons notre première application Vue.

Couche de vue- Code HTML :

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

Couche de modèle- Code JavaScript (doit être placé après l'élément HTML spécifié) :

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

Essayez-le »

Liaison de données bidirectionnelle

Ensuite, nous créons un fichier HTML de couche de vue : vueapp.htm, et un fichier de couche de modèle : vueapp.js, puis via vue.js (en utilisant la directive v-model) nous complétons la logique sous-jacente entre les deux pour obtenir l'effet de liaison. Modifier l'une ou l'autre couche entraînera la modification de l'autre couche.

Code pour vueapp.htm :

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

Code pour vueapp.js :

new Vue({
  el: '#app',
  data: {
    message: 'Example!'
  }
})

Essayez-le »

Dans l'exemple ci-dessus, {{message}} changera lorsque le champ de saisie changera. Si vous ne voulez pas qu'il change, vous pouvez le modifier en :

{{* message }}

Il prend également en charge certaines expressions simples :

<!-- 字符串连接 -->
{{ message + '官网地址：www.example.com' }}
<!-- 字符串反转 -->
{{ message.split('').reverse().join('') }}

Essayez-le »

Sortie de liste

Sortie de listev-forpeut être réalisée avec cette directive (v-for remplace v-repeat dans les versions antérieures à 1.0) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>
</body>
</html>

Essayez-le »

Exemple de tableau multidimensionnel

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Example官网',
    items: [
      { message: 'www.example.com' },
      { message: 'www.example.com' }
    ]
  }
})
</script>

Essayez-le »

Rendu conditionnel

Dans les modèles de chaîne comme Handlebars, nous devons écrire un bloc conditionnel comme ceci :

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

En Vue.js, nous utilisons la directive v-if pour obtenir la même fonctionnalité :

<h1 v-if="ok">Yes</h1>

Vous pouvez aussi utiliser v-else pour ajouter un bloc "else" :

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

Essayez-le »

Parce que v-if est une directive, elle doit être appliquée à un élément. Mais que faire si nous voulons basculer plusieurs éléments ? Dans ce cas, nous pouvons utiliser un élément <template> comme élément d'enveloppe, y appliquer v-if, et le résultat final rendu ne l'inclura pas.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-show fonctionne de manière similaire à v-if, sauf que les éléments avec v-show sont toujours rendus et restent dans le DOM, et v-show ne prend pas en charge la balise <template>.

<h1 v-show="ok">Hello!</h1>

Filtres

Comme les pipes sous Linux, vue.js utilise également | :

{{message | uppercase}}

Cela affichera le message en majuscules. Les filtres peuvent également être chaînés :

{{message | reverse | uppercase}}

Ici, reverse n'est pas un filtre intégré. Nous pouvons utiliser Vue.filter pour en définir un personnalisé :

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

Essayez-le »

Documentation de référence

Site officiel :http://vuejs.org/

Documentation officielle :http://cn.vuejs.org/examples/