vue.1和vue.2有什么不同

這篇文章主要介紹了vue.1和vue.2有什么不同，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

vue.1和vue.2區別：1、在vue2中使用【v-for】指令時它可以添加重復的內容；2、vue2中跟vue1中有一個很大的區別就是沒有過濾器；3、兩者使用組件之間的通訊時也不同。

vue.1和vue.2區別：

區別1：

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

在寫代碼的時候首先要引入的是vue2js文件。

html代碼：

<div id="box">
        <input type="button" value="添加" @click="add()">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>

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：　

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

<template id="tpl">
    <div><h4>3333333</h4><strong>strong</strong></div>
</template>

區別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>
                <h4>我是C組件</h4>
                <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.1和vue.2有什么不同內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!