Quelle est la différence entre vue.js2.0 et vue.js1.0

La différence entre vue.js2.0 et vue.js1.0 est la suivante : 1. Chaque composant de vue2.0 n'autorise qu'un seul élément racine, tandis que vue1.0 permet à un composant d'avoir plusieurs éléments racine ; move En plus des deux variables implicitement déclarées $index et $key; 3. Prop obsolète de Vue 2.0.

L'environnement d'exploitation de cet article : système windows10, vue 2.5.2, ordinateur thinkpad t480.

L'analyse des différences est la suivante :

1. 2.0 n'autorise qu'un seul élément racine par composant, 1.0 permet à un composant d'avoir plusieurs éléments racine

2.

Changements dans l'ordre des paramètres

v2 supprime les deux variables implicitement déclarées $index et $key

• key remplace :key in track-by

• v2 Utiliser le suivi à spécifier dans la v1, et track-by n'est pas lié à v-bind, mais spécifie directement le nom de la clé, tel que :

• v2 :

  • changement de portée
  props

  v1 peut définir la méthode de coerce à l'intérieur de prop, qui est utilisée pour effectuer certains calculs avant de transmettre la valeur de prop au composant. La valeur de prop obtenue à l'intérieur du composant est la valeur renvoyée par la méthode de coerce.

  propG: {
    coerce: function (val) {
      return val + '' // cast the value to string
    }
  }

  v2 utilise calculé à la place de
  twoWay prop
  v1. Définissez l'attribut twoWay de l'accessoire sur true, qui peut être transmis dans les deux sens.
  .sync et .once Lors de la liaison d'un accessoire dans
  v1, vous pouvez utiliser les modificateurs .sync et .once
  .sync pour afficher l'accessoire de liaison bidirectionnelle
  • .once Une fois la valeur de l'accessoire passée , le parent Les modifications apportées par le composant à cet attribut ne seront plus synchronisées avec le sous-composant

  • Modify prop
    prop peut être modifié dans la v1, la v2 est obsolète
  props de l'instance racine
  v1, le L'instance racine peut avoir des attributs props, v2 Le remplacement est propsData
  Propriétés calculées
  Les propriétés calculées dans la v2 seront mises en cache par défaut dans la v1, vous pouvez ajouter un attribut de cache pour les propriétés calculées. Si elles sont définies sur false, vérifiez le cache. sera éteint.

  vue 指令

  v-bind

  v-bind 指令对于真假值的判断，v1 遵循 js 的一般规则，v2 中则只有 null、undefined、false 被看作是假，0 和 '' 则被视为真值。

  此规则只限于 v-bind 指令，v-if 和 v-show 仍遵循 js 的规则

  v-on

  v1 中 v-on 指令可以监听原生事件， v2 中只监听自定义事件，如果需要监听原生事件，需要加上 .native 修饰符。

  v-model

  带有 debounce 参数的 v-model

  v1 中使用 v-model 指令的表单元素可以带有 debounce 属性，用于设置一个更新 model 的最小延迟时间。

  <input v-model="msg" debounce="500">

  这是控制了状态更新的频率，而不是控制高耗时任务本身

  lazy、number 参数

  v2 中的 .lazy、.number 修饰符，在 v1 中以标签属性的形式出现

  <input v-model="name" lazy>
  <input v-model="age" type="number" number>

  v-model 的初值

  v2 中 v-model 的初值就是所绑定的 data 的值，但是在 v1 中，会用当前标签元素的 value 作为初值。

  v-bind:style

  v1 中的 v-bind:style 可以添加 !important，v2 中必须写成字符串形式。如下

  // v1
  <p v-bind:style="{ color: myColor + &#39; !important&#39; }">hello</p>
  // v2
  <p v-bind:style="&#39;color: &#39; + myColor + &#39; !important&#39;">hello</p>

  v-el 和 v-ref

  v1 中可以分别使用 v-el 为 DOM 元素、v-ref 为 component 指定一个 name，方便调用该元素或组件实例，v2 中弃用了这两个指令，统一使用 ref='name' 的方式。

  v-show 与 v-else 一起使用

  v1 中允许 v-show 与 v-else 一起使用，如下

  // v1
  <p v-if="foo">Foo</p>
  <p v-else v-show="bar">Not foo, but bar</p>
  // v2
  <p v-if="foo">Foo</p>
  <p v-if="!foo && bar">Not foo, but bar</p>

  推荐学习：php培训