cycle de vie de vue, instance de vue, syntaxe du modèle

Cette fois, je vais vous présenter vuecycle de vie, instance de vue, syntaxe du modèle. Quelles sont les précautions lors de l'utilisation du cycle de vie de vue, de l'instance de vue et de la syntaxe du modèle. Jetons un coup d'œil au cas.

Vue est passé d'un framework de niche silencieux à l'un des trois frameworks majeurs en Chine depuis sa naissance, et également de la version initiale à l'actuelle 2.5.13 (version stable du 2018.1.26 2014 à 2018 ).

Sujet

Vue.js est une bibliothèque MVVM JavaScript très populaire. Elle est construite avec des idées basées sur les données et les composants. Par rapport à Angular.js, Vue.js fournit une API plus simple et plus facile à comprendre, nous permettant de démarrer et d'utiliser rapidement Vue.js.

Depuis que j'ai présenté l'installation de vue et la configuration de base de webpack dans le blog précédent, je présenterai vue et l'utilisation de vue dans cet article.

Si vous avez déjà été habitué à utiliser jQuery pour faire fonctionner le DOM, veuillez mettre de côté l'idée de manipuler le DOM manuellement lors de l'apprentissage de Vue.js, car Vue.js est basé sur les données et vous n'avez pas besoin d'utiliser manuellement le DOM. Il lie le DOM et les données via une syntaxe HTML spéciale. Une fois la liaison créée, le DOM restera synchronisé avec les données et chaque fois que les données changeront, le DOM sera mis à jour en conséquence.

Bien sûr, lorsque vous utilisez Vue.js, vous pouvez également l'utiliser en conjonction avec d'autres bibliothèques, telles que jQuery.

Si vous pensez que le contenu de cet article est bon, veuillez l'aimer. Je téléchargerai la démo sur github à l'avenir. Si vous pensez qu'il est acceptable, veuillez l'aimer.

Bonnes choses

Si vous souhaitez apprendre vue, veuillez avoir 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 – revenez après avoir maîtrisé les bases ! Une expérience antérieure avec d’autres frameworks est utile, mais pas obligatoire. (Mots originaux du site officiel).

1. La première étape, vue table de cycle de vie

Il faut absolument comprendre la table de cycle de vie vue pour bien l'apprendre

Annoter l'icône de cycle de vie du site officiel pour approfondir la compréhension Impression et compréhension (Schéma du réseau source avec adresse)

2. Instance Vue

Chaque application Vue commence par créer une nouvelle instance Vue à l'aide de la fonction Vue :

var vm = new Vue({
  // 选项
})

3. Crochet du cycle de vie de l'instance

Chaque instance de Vue doit passer par une série de processus d'initialisation lors de sa création, tels que la définition de la liaison de données, la transmission des paramètres de méthode, le montage de l'instance sur DOM et la mise à jour. DOM lorsque les données changent, etc. Dans le même temps, certaines fonctions appelées hooks de cycle de vie sont exécutées pendant le processus, vous permettant d'ajouter votre propre code à différentes étapes.

Par exemple, le hook monté peut être utilisé pour exécuter du code après la création d'une instance :

new Vue({
  data: {
    a: 1
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

Il existe également d'autres hooks qui sont appelés à différentes étapes du cycle de vie de l'instance, tels que mis à jour et détruits. Le contexte this d'un hook de cycle de vie pointe vers l'instance Vue qui l'a appelé.

3. Syntaxe du modèle

Vue.js utilise une syntaxe de modèle basée sur HTML, permettant aux développeurs de lier de manière déclarative le DOM aux données de l'instance Vue sous-jacente. Tous les modèles Vue.js sont du HTML légal et peuvent ê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 nombre de composants qui doivent être restitués et minimiser le nombre d'opérations DOM.

Si vous êtes familier avec le DOM virtuel et préférez la puissance brute de JavaScript, vous pouvez également écrire des fonctions de rendu directement sans modèles, en utilisant la syntaxe JSX facultative. (Mots originaux du site officiel)

3.1. Interpolation de texte

La forme la plus courante de liaison de données est l'interpolation de texte utilisant la syntaxe "Moustache" (doubles accolades) :

<span>Message: {{ msg }}</span>

La balise Moustache sera remplacée par la valeur de l'attribut msg sur l'objet de données correspondant. Chaque fois que la propriété msg de l'objet de données lié change, le contenu au point d'interpolation est mis à jour.

vue est la liaison bidirectionnelle par défaut. Si vous ne souhaitez pas de liaison bidirectionnelle, veuillez utiliser la commande v-once pour les données uniques, mais veillez à ce qu'elle affecte toutes les liaisons de données sur le node :

<span v-once>这个将不会改变: {{ msg }}</span>

3.2. HTML original

Les doubles accolades interpréteront les données comme du texte ordinaire au lieu du code HTML. Afin de générer du vrai HTML, vous devez utiliser la directive v-html :

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Le HTML arbitraire rendu dynamiquement sur votre site peut être très dangereux, car il peut facilement conduire à des attaques XSS. Utilisez uniquement l'interpolation HTML pour le contenu fiable et jamais pour le contenu fourni par l'utilisateur.

3.3. Utiliser l'expression JavaScript

Jusqu'à présent, dans le modèle de vue, vue n'a lié que des valeurs de clé d'attribut simples. Mais en fait, pour toutes les liaisons de données, Vue.js fournit une prise en charge complète des expressions JavaScript.

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="&#39;list-&#39; + id"></div>

3.4. Commande

La commande est un attribut spécial avec le préfixe v-. La valeur d'un attribut de directive doit être une expression JavaScript unique (v-for est l'exception). La responsabilité de la directive est d'appliquer de manière réactive ses effets associés au DOM lorsque la valeur de l'expression change. Revoyez les exemples que nous avons vus dans l'introduction

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

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

3.4.1、 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

3.4.2、缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写:

<a v-bind:href="url">...</a>...

v-on缩写:

<a v-on:click="doSomething">...</a>...

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

一次前端面试的经历

前端微信分享jssdk config:invalid signature 签名错误的解决方法

前端入门之css3

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!