ホームページ >ウェブフロントエンド >Vue.js >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 コード:
bd63f5dbaa3d57f72e80d7f9df1e5663 1306440f8fb3f8b3b2d35aad65de3a7e ff6d136ddc5fdfeffaf53ff6ee95f185 26bd48817f53e2ce1cb391f236878ae3{{item}}bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68
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
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="(val,index) in arr">{{val}}------->{{index}}</li> </ul> </div>
違い 2:
vue2 と vue1 の間には、フィルターがないという大きな違いがあります。 ! !フィルターを使用する場合は、自分でフィルターを定義する必要があります。
違い 3:
さらに、コンポーネント間の通信の使用方法が異なります。以下で見てみましょう:
HTML コード:
<div id="div"> 我是父组件---->{{emitData.msg}}<br> <child-com :m="emitData"></child-com> </div> </body> </html> <template id="tpl"> <div> <span>我是子组件----></span> {{m.msg}}<br> <input type="button" value="change" @click="change()"/> </div> </template>
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 つは、テンプレートを定義するときに、テンプレートを大きなボックスで囲む必要があることです。
e1077e214376481d8736cf8288f27c31 dc6dce4a544fdca2df29d5ac0ea9906b684271ed9684bde649abda8831d4d355333333339528cedfa926ea0c01e69ef5b2ea9b08e99a69fbe029cd4e2b854e244eab143strong128dba7a3a77be0113eb0bea6ea0a5d016b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2
違い 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:
<div id="div"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div>
js コード:
<script> window.onload = function(){ const event=new Vue; const A={ template:` <div> <span>我是A组件---------></span>{{msg1}} <input type="button" value="把a组件的数据传给c" @click="send()"> </div> `, data(){ return{ msg1:"我是A组件的数据" } }, methods:{ send(){ event.$emit("a-data",this.msg1) } } }; const B={ template:` <div> <span>我是B组件---------></span>{{msg2}} <input type="button" value="把b组件的数据传给c" @click="send()"> </div> `, data(){ return{ msg2:"我是B组件的数据" } }, methods:{ send(){ event.$emit("b-data",this.msg2) } } }; const C={ template:` <div> <h3>我是C组件</h3> <span>接收到A的数据--->{{a}}</span><br/> <span>接收到B的数据--->{{b}}</span> </div> `, data(){ return{ a:"a", b:"b" } }, mounted(){ event.$on("a-data",function (a) { this.a=a; }.bind(this)); event.$on("b-data",function (b) { this.b=b }.bind(this)) } }; new Vue({ el:"#div", data:{ msg:"我是父组件数据" }, components:{ "com-a":A, "com-b":B, "com-c":C } }) } </script>
関連する推奨事項:「vue.js チュートリアル」 「
以上がvuejs2と1の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。