vuejs2と1の違いは何ですか

相違点: 1. vue2 で v-for 命令を使用すると、繰り返しコンテンツを追加できますが、vue1 では追加できません; 2. vue2 にはフィルターがありますが、vue1 にはありません; 3. コンポーネント間の通信方法が異なります; 4. ライフサイクルが違うなど。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

違い 1:

vue2 で v-for ディレクティブを使用すると、同じように繰り返しコンテンツを追加できます。 add 同じメッセージ内容です。

を見てみましょう。 コードを記述するとき、最初にインポートするのは vue2js ファイルです。

HTML コード:

  
 
{{item}}
 
 

JS コード:

window.onload=function () { new Vue({ el:"#box", data:{ arr:[1,2,3,4,5,6] }, methods: { add:function () { this.arr.unshift("1") } } }) }

ただし、もう 1 つの違いがあります。つまり、$index がありません。vue1 にはありますが、次のことができます。 $index

  
 
{{val}}------->{{index}}
 
 

違い 2:

vue2 と vue1 の間には、フィルターがないという大きな違いがあります。 ！ ！フィルターを使用する場合は、自分でフィルターを定義する必要があります。

違い 3:

さらに、コンポーネント間の通信の使用方法が異なります。以下で見てみましょう:

HTML コード:

 我是父组件---->{{emitData.msg}}
  
   

JS コード:

window.onload = function(){ new Vue({ el:"#div", data:{ emitData:{ //写为json 原理：js中对象的引用 msg:"我是父组件数据" } }, components:{ 'child-com':{ props:['m'], template:"#tpl", methods:{ change(){ this.m.msg='变了'; } } } } }) }

これは vue2 のメソッドではありませんが、このメソッドを使用して問題を解決できます。

違い 4:

最も基本的な違いの 1 つは、テンプレートを定義するときに、テンプレートを大きなボックスで囲む必要があることです。

違い 5:

ライフサイクルも異なります。vue2 のライフサイクルは次のようになります

window.onload=function () { new Vue({ el:"#box", data:{ msg:"lalalal" }, beforeCreate () { alert("实例创建之前") }, created() { alert("实例创建完成") }, beforeMount() { alert("数据编译之前") }, mounted() { alert("数据编译完成") }, beforeUpdate:function () { console.log("数据更新之前") }, updated:function () { console.log("数据解析完成") }, beforeDestroy:function () { alert("数据销毁之前") }, destroyed:function () { alert("数据销毁完成") } }) }

最後に、Take に到達します。単一イベントでの管理コンポーネントの通信を見てみましょう

html:

js コード:

関連する推奨事項:「vue.js チュートリアル」 「

以上がvuejs2と1の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。