Quelle est la différence entre vue1.0 et 2.0

Vue.js est un framework progressif permettant de créer des interfaces Web basées sur les données. L'objectif de Vue.js est de permettre une liaison de données réactive et des composants de vue composés avec l'API la plus simple possible. Non seulement il est facile de démarrer, mais il est également facile de l'intégrer à des bibliothèques tierces ou à des projets existants. Alors, quelle est la différence entre son 1.0 et son 2.0 ? Jetons un coup d'oeil.

1. Cycle de vie

1.

周期	解释
init	组件刚刚被创建，但Data、method等属性还没被计算出来
created	组件创建已经完成，但DOM还没被生成出来
beforeCompile	模板编译之前
compiled	模板编译之后
ready	组件准备（平时用得较多）
attached	在 vm.$el 插入到DOM时调用
detached	在 vm.$el 从 DOM 中删除时调用
beforeDestory	组件销毁之前
destoryed	组件销毁之后

2. Cycle de vie de 2.0

周期	解释
beforeCreate	组件刚刚被创建，但Data、method等属性还没被计算出来
created	组件创建已经完成，但DOM还没被生成出来
beforeMount	模板编译之前
mounted	模板编译之后,组件准备
beforeUpdate	组件更新之前（数据等变动的时候）
updated	组件更新之后（数据等变动的时候）
activated	for keep-alive,组件被激活时调用
deactivated	for keep-alive,组件被移除时调用
beforeDestory	组件销毁之前
destoryed	组件销毁之后

Les changements du cycle de vie 2.0 semblent plus sémantiques (il y a des règles à trouver), plus faciles à retenir), et ajouté avant la mise à jour, mis à jour, activé, désactivé et supprimé attaché et détaché.

2 : Filtres

2.0 supprime tous les filtres qui viennent avec la 1.0, c'est à dire qu'en 2.0, il faut utiliser des filtres, il faut pour l'écrire nous-mêmes. Voici un exemple de filtre personnalisé,

Vue.filter('toDou',function(n,a,b){
    return n<10?n+a+b:&#39;&#39;+n;
});

Trois : Boucle

Concernant les boucles entières, la boucle entière de 1.0 commence à 0 Oui. , la boucle entière de 2.0 commence à partir de 1. Comparez ci-dessous :

//HTML代码<ul id=&#39;box&#39;>
    <li v-for=&#39;val in 5&#39; v-text=&#39;val&#39;></li></ul>

4. Fragment de code

Lors de l'écriture du modèle, 2.0 doit utiliser un élément racine (tel que div ) enveloppez le fragment de code, sinon une erreur sera signalée.

之前:   在1.0使用时完全没问题
    <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
    </template>
现在:  必须有根元素，包裹住所有的代码
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>

Ce qui précède ne répertorie que certains des changements. De manière générale, les changements apportés à la mise à niveau de vue vers 2.0 ne sont pas si importants. De nouveaux changements seront ajoutés après avoir parcouru les stands

( • ̀ω •́ )✧

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!