vuejs2和1的差別是什麼

區別：1、vue2中使用v-for指令時可以添加重複的內容，vue1不行；2、vue2有過濾器，vue1沒有；3、組件間通訊方式不同；4、生命週期不同等等。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

區別1：

　　在vue2中使用v-for指令時它可以添加重複的內容，就像可以添加相同的留言內容，下面我們來看

　　在寫程式碼的時候首先要引入的是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")
                   }
               }
           })
       }

　　但是，還有一點不同的地方就是沒有$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：

　　有一個最基本的差異就是我們在定義模板的時應該把模板的東西用一個大盒子包起來。

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("数据销毁完成")
               }
           })
       }

　　最後我們來看看單一事件中管理元件通訊

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中文網其他相關文章！