introduire

Qu'est ce que Vue.js ?

Prêt ?

• Qu'est-ce que Vue.js

• Vue (prononcé /vju?/, similaire à view) est un

  framework progressif permettant de créer des interfaces utilisateur. Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, lorsqu'il est combiné avec une chaîne d'outils moderne

  et une variété de
bibliothèques de support
• , Vue est également entièrement capable de fournir des pilotes pour des applications complexes d'une seule page.

  Si vous souhaitez en savoir plus sur Vue avant de vous y plonger, nous avons produit une vidéo

  qui vous guide à travers ses concepts de base et un exemple de projet.
• Si vous êtes déjà un développeur front-end expérimenté et que vous souhaitez connaître la différence entre Vue et d'autres bibliothèques/frameworks, veuillez consulter

  Comparer d'autres frameworks.

• Getting Started

  • Le Guide officiel suppose que vous avez des connaissances intermédiaires en HTML, CSS et JavaScript. Si vous commencez tout juste à apprendre le développement front-end, utiliser un framework comme première étape n'est peut-être pas la meilleure idée : rassemblez les bases avant de revenir ! Une expérience antérieure avec d’autres frameworks est utile, mais pas obligatoire.

Installation

• Le moyen le plus simple d'essayer Vue.js est d'utiliser l'exemple Hello World sur JSFiddle. Vous pouvez l'ouvrir dans un nouvel onglet de votre navigateur et suivre les exemples pour apprendre quelques utilisations de base. Ou vous pouvez créer un fichier .html.html 文件，然后通过如下方式引入 Vue：

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  或者：

  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

  如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

  
  

  声明式渲染

  ---

  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
  

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

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

  输出：

  Hello Vue!

  我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

  除了文本插值，我们还可以像这样来绑定元素特性：

  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })

  输出：
  

  鼠标悬停几秒钟查看此处动态绑定的提示信息！

  这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

  如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

  
  

  条件与循环

  ---

  控制切换一个元素是否显示也相当简单：
  

  <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

  输出：

  现在你看到我了

  继续在控制台输入 app3.seen = false, ​​puis introduire Vue comme suit :

  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>

  🎜ou : 🎜

  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  })

  🎜Tutoriel d'installation🎜 donne d'autres façons d'installer Vue. Veuillez noter que nous ne recommandons pas aux novices d'utiliser directement vue-cli, surtout si vous n'êtes pas familier avec les outils de build basés sur Node.js. 🎜🎜Si vous aimez les choses interactives, vous pouvez également consulter cette série de tutoriels sur Scrimba🎜, qui combine enregistrement d'écran et code terrain d'essai, et vous permet de faire une pause et de jouer à tout moment. 🎜🎜
  🎜

  Rendu déclaratif

  ---

  🎜À la base, Vue.js est un système qui permet le rendu déclaratif des données dans le DOM en utilisant une syntaxe de modèle concise :
  🎜

  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

  🎜Sortie :🎜

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

  🎜Nous avons créé avec succès notre première application Vue ! Cela ressemble beaucoup au rendu d'un modèle de chaîne, mais Vue fait beaucoup de travail en coulisses. Maintenant que les données et le DOM ont été liés, tout est responsive. Comment pouvons-nous confirmer cela ? Ouvrez la console JavaScript de votre navigateur (ouverte sur cette page) et modifiez la valeur de app.message. Vous verrez l'exemple ci-dessus mis à jour en conséquence. 🎜🎜En plus de l'interpolation de texte, nous pouvons également lier des propriétés d'éléments comme celle-ci : 🎜

  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })

  // 定义名为 todo-item 的新组件
  Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
  })

  🎜Sortie :
  🎜

  <ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
  </ol>

  🎜Ici, nous rencontrons quelque chose de nouveau. La fonctionnalité v-bind que vous voyez est appelée une directive. Les directives sont préfixées par v- pour indiquer qu'il s'agit de fonctionnalités spéciales fournies par Vue. Comme vous l'avez peut-être deviné, ils appliquent un comportement réactif spécial au DOM rendu. Ici, la signification de cette directive est : "Rendre l'attribut title de ce nœud d'élément cohérent avec l'attribut message de l'instance Vue." 🎜🎜Si vous ouvrez à nouveau la console JavaScript du navigateur et entrez app2.message = 'New Message', vous verrez à nouveau cet attribut title lié. Le HTML a été mis à jour. 🎜🎜
  🎜

  Conditions et cycles

  ---

  🎜Il est également assez simple de contrôler si un élément est affiché ou non :
  🎜

  Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义特性。
    // 这个 prop 名为 todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  <div id="app-7">
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
      -->
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>

  🎜Sortie : 🎜

  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  })

  🎜Continuez à saisir app3.seen = false dans la console, vous trouverez que le message précédemment affiché disparaisse. 🎜

  Cet exemple démontre que nous pouvons lier des données non seulement au texte ou aux attributs DOM, mais également aux structures DOM. De plus, Vue fournit également un puissant système d'effets de transition qui peut appliquer automatiquement des effets de transition lorsque Vue insère/met à jour/supprime des éléments.

  Il existe de nombreuses autres commandes, chacune avec des fonctions spéciales. Par exemple, la directive v-for peut lier les données d'un tableau pour afficher une liste d'éléments : v-for 指令可以绑定数组的数据来渲染一个项目列表：

  <div id="app">
    <app-nav></app-nav>
    <app-view>
      <app-sidebar></app-sidebar>
      <app-content></app-content>
    </app-view>
  </div>

  rrreee

  输出：

  

  在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

  
  

  处理用户输入

  为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

  rrreeerrreee

  输出：
  

  

  注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

  Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  rrreeerrreee

  输出：

  

  组件化应用构建

  组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

  

  在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

  rrreee

  现在你可以用它构建另一个组件模板：

  rrreee

  但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

  rrreee

  现在，我们可以使用 v-bindrrreeerrreee

  Sortie :

  
  

  Dans la console, saisissez app4.todos.push({ text: 'Nouveau projet ' }), vous constaterez qu'un nouvel élément est ajouté à la fin de la liste.

  🎜🎜

  🎜Traitement des entrées utilisateur🎜

  🎜Pour que les utilisateurs puissent interagir avec votre application , nous pouvons utiliser la directive v-on pour ajouter un écouteur d'événement, via lequel il appelle la méthode définie dans l'instance Vue : 🎜rrreeerrreee🎜Output: 🎜🎜🎜🎜🎜Notez que dans le reverseMessage méthode, nous avons mis à jour l'état de l'application sans toucher au DOM - toutes les opérations DOM sont gérées par Vue et le code que vous écrivez ne doit se concentrer que sur le niveau logique. 🎜🎜Vue fournit également la directive v-model, qui peut facilement réaliser une liaison bidirectionnelle entre la saisie du formulaire et l'état de l'application. 🎜rrreeerrreee🎜Sortie : 🎜🎜🎜

  🎜Construction d'applications basées sur des composants🎜

  🎜Le système de composants est un autre concept important de Vue, car C'est une abstraction qui nous permet de créer de grandes applications en utilisant de petits composants indépendants et souvent réutilisables. Si vous y réfléchissez bien, presque n'importe quel type d'interface d'application peut être résumé dans une arborescence de composants : 🎜🎜🎜🎜Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies. Enregistrer un composant dans Vue est simple : 🎜rrreee🎜 Vous pouvez maintenant l'utiliser pour créer un autre modèle de composant : 🎜rrreee🎜 Mais cela affiche le même texte pour chaque élément de tâche, ce qui n'a pas l'air cool. Nous devrions pouvoir transmettre les données de la portée parent au composant enfant. Modifions la définition du composant pour accepter un prop🎜 : 🎜rrreee🎜Maintenant, nous pouvons utiliser < Le code>v-bind La directive transmet les tâches à faire à chaque composant de la sortie de la boucle : 🎜rrreeerrreee🎜Sortie : 🎜🎜🎜🎜🎜

  Bien qu'il ne s'agisse que d'un exemple délibéré, nous avons réussi à diviser l'application en deux unités plus petites. Les unités enfants sont bien découplées de leurs unités parents via l'interface prop. Nous pouvons désormais améliorer encore le composant <todo-item> pour fournir des modèles et une logique plus complexes sans affecter l'unité parent. <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。

  在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在 后续教程 中我们将详述组件，不过这里有一个 (假想的) 例子，以展示使用了组件的应用模板是什么样的：

  rrreee

  
  

  与自定义元素的关系

  你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is

  Dans une application volumineuse, il est nécessaire de diviser l'ensemble de l'application en composants pour rendre le développement plus gérable. Nous couvrirons les composants en détail dans les tutoriels suivants
  , mais voici un exemple (hypothétique) pour montrer une application qui utilise des composants. le modèle ressemble à :
  1. rrreee

  2. Relation avec les éléments personnalisés

  Vous avez peut-être remarqué des composants Vue très similaires à

  Custom Elements - cela fait partie de la spécification des composants Web, à cause de la section de syntaxe des composants de Vue fait référence à cette spécification. Par exemple, le composant Vue implémente l'API Slot

  et est propriétés. Il existe cependant quelques différences clés :

  
  

  La spécification des composants Web est complétée et adoptée, mais n'est pas implémentée nativement par tous les navigateurs. Actuellement, Safari 10.1+, Chrome 54+ et Firefox 63+ prennent en charge les composants Web de manière native. En revanche, les composants Vue ne nécessitent aucun polyfill et se comportent de manière cohérente dans tous les navigateurs pris en charge (IE9 et versions ultérieures). Si nécessaire, les composants Vue peuvent également être encapsulés dans des éléments personnalisés natifs. Les composants Vue fournissent des fonctionnalités importantes que les éléments personnalisés purs ne possèdent pas, notamment le flux de données entre composants, la communication d'événements personnalisés et l'intégration d'outils de construction.

  Bien que Vue n'utilise pas d'éléments personnalisés en interne, lorsque l'application utilise des éléments personnalisés ou est publiée sous forme d'éléments personnalisés,
  a toujours une bonne interopérabilité

  . La CLI Vue prend également en charge la création de composants Vue dans des éléments personnalisés natifs.
  🎜🎜🎜🎜🎜Êtes-vous prêt ? 🎜🎜🎜🎜Nous venons de couvrir brièvement les fonctionnalités les plus élémentaires de Vue de base – le reste de ce didacticiel couvrira ces fonctionnalités ainsi que d'autres fonctionnalités avancées plus en détail, alors assurez-vous de lire l'intégralité du didacticiel ! 🎜🎜🎜🎜🎜 🎜