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

10年品牌的成都網站建設公司,上1000家企業(yè)網站設計經驗.價格合理,可準確把握網頁設計訴求.提供定制網站建設、商城網站定制開發(fā)、成都小程序開發(fā)、響應式網站設計等服務,我們設計的作品屢獲殊榮,是您值得信賴的專業(yè)網絡公司。

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

vue.1和vue.2區(qū)別：

區(qū)別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>

區(qū)別2：

我們在vue2中跟vue1中有一個很大的區(qū)別就是沒有過濾器！！！我們用著過濾器的時候要要自己定義。

區(qū)別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:"我是父組件數(shù)據(jù)"
                }
            },
            components:{
                'child-com':{
                    props:['m'],
                    template:"#tpl",
                    methods:{
                        change(){
                            this.m.msg='變了';
                        }
                    }
                }
            }
        })
    }

這不是vue2中的方法但是我們可以使用這種方法來解決問題。　

區(qū)別4：　

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

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

區(qū)別5：　

對于生命周期也是有所不同的，我們vue2中的生命周期是這樣的

 window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                    msg:"lalalal"
                },
                beforeCreate () {
                    alert("實例創(chuàng)建之前")
                },
                created() {
                    alert("實例創(chuàng)建完成")
                },
                beforeMount() {
                    alert("數(shù)據(jù)編譯之前")
                },
                mounted() {
                    alert("數(shù)據(jù)編譯完成")
                },
                beforeUpdate:function () {
                    console.log("數(shù)據(jù)更新之前")
                },
                updated:function () {
                    console.log("數(shù)據(jù)解析完成")
                },
                beforeDestroy:function () {
                    alert("數(shù)據(jù)銷毀之前")
                },
                destroyed:function () {
                    alert("數(shù)據(jù)銷毀完成")
                }
            })
        }

最后我們來看一下單一事件中管理組件通訊

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組件的數(shù)據(jù)傳給c" @click="send()">
            </div>
            `,
            data(){
                return{
                    msg1:"我是A組件的數(shù)據(jù)"
                }
            },
            methods:{
                send(){
                    event.$emit("a-data",this.msg1)
                }
            }
        };
        const B={
            template:`
            <div>
                <span>我是B組件---------></span>{{msg2}}
                <input type="button" value="把b組件的數(shù)據(jù)傳給c" @click="send()">
            </div>
            `,
            data(){
                return{
                    msg2:"我是B組件的數(shù)據(jù)"
                }
            },
            methods:{
                send(){
                    event.$emit("b-data",this.msg2)
                }
            }
        };
        const C={
            template:`
            <div>
                <h4>我是C組件</h4>
                <span>接收到A的數(shù)據(jù)--->{{a}}</span><br/>
                <span>接收到B的數(shù)據(jù)--->{{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:"我是父組件數(shù)據(jù)"
            },
            components:{
               "com-a":A,
               "com-b":B,
               "com-c":C
            }
        })
    }
</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享vue.1和vue.2有什么不同內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

文章名稱：vue.1和vue.2有什么不同
路徑分享：http://chinadenli.net/article24/jgghce.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網站、搜索引擎優(yōu)化、服務器托管、手機網站建設、域名注冊、網站內鏈

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)