vue.js2.0とvue.js1.0の違いは何ですか

vue.js2.0 と vue.js1.0 の違いは次のとおりです: 1. vue2.0 の各コンポーネントは 1 つのルート要素のみを許可しますが、vue1.0 では 1 つのコンポーネントに複数のルート要素を含めることができます。 . Vue2.0 は、暗黙的に宣言された 2 つの変数 $index と $key を削除します; 3. Vue 2.0 は prop を非推奨とします。

#この記事の動作環境: Windows10 システム、vue 2.5.2、thinkpad t480 コンピューター。

差異分析は次のとおりです:

1. 2.0 ではコンポーネントごとに 1 つのルート要素のみが許可され、1.0 ではコンポーネントに複数のルート要素を持つことが許可されます

2 . Life Periodic フック関数

#3, v-for

• #パラメータ順序変更

#v2 は暗黙的に宣言された 2 つの変数 $index と $key を削除します
key は track-by## を置き換えます
#v2 の :key は v1 の track-by を使用して指定されており、track-by は v-bind でバインドされず、次のようにキー名を直接指定します。

• v2:
  • ##

  • #スコープの変更

  • props

  v1 は、prop 内で強制メソッドを定義でき、prop 値をコンポーネントに渡す前にいくつかの計算を実行するために使用されます。値は coerce メソッドによって返される値です。

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

  v2

  twoWay prop
  v1 では prop の twoWay 属性を true に設定し、両方向に渡すことができます。
  .sync と .once
  v1 で props をバインドする場合、.sync および .once 修飾子を使用して
  .sync を使用して 2 つのプロパティを表示できます。 -way バインディング 定義された prop
  の値が渡されると、親コンポーネントからのプロパティへの変更は子コンポーネント
  ## に同期されなくなります。

  • # prop の変更

  v1 では prop を変更できます。v2 では、ルート インスタンスの

  • props は非推奨になりました。

  v1 のルート インスタンスには、次のものを含めることができます。 props 属性、v2 での置き換えは propsData

  計算されたプロパティ

  v2 の計算されたプロパティはデフォルトでキャッシュされます。v1 では、計算されたプロパティのキャッシュ属性を追加できます。設定されている場合は、 false に設定すると、キャッシュ検証がオフになります。

  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培训