Was ist der Unterschied zwischen vue.1 und vue.2?

Der Unterschied zwischen vue.1 und vue.2: 1. Bei Verwendung des Befehls [v-for] in vue2 können wiederholte Inhalte hinzugefügt werden. 2. Ein großer Unterschied zwischen vue2 und vue1 besteht darin, dass es keinen Filter gibt , die beiden unterscheiden sich auch bei der Kommunikation zwischen Komponenten. ?? 2 it Sie können wiederholte Inhalte hinzufügen, genau wie Sie den gleichen Nachrichteninhalt hinzufügen können. Schauen wir uns das unten an. Das erste, was beim Schreiben von Code eingeführt werden muss, ist die vue2js-Datei.

HTML-Code:

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

js-Code:

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

Ein weiterer Unterschied besteht darin, dass es in vue1 keinen $index gibt, wir aber $index manuell hinzufügen können

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

Unterschied 2:

Ein großer Unterschied zwischen uns in vue2 und vue1 besteht darin, dass es keine Filter gibt! ! ! Wenn wir Filter verwenden, müssen wir diese selbst definieren.

Unterschied 3:

Außerdem nutzen wir die Kommunikation zwischen Komponenten anders:

HTML-Code:

<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-Code:

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

Dies ist keine Methode in vue2. Aber wir können diese verwenden Methode zur Lösung des Problems.

Unterschied 4:

　

Einer der grundlegendsten Unterschiede besteht darin, dass wir beim Definieren einer Vorlage die Vorlage in eine große Box einpacken sollten.

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

Unterschied 5:

Der Lebenszyklus in vue2 ist auch so

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

Schließlich werfen wir einen Blick auf die Managementkomponentenkommunikation in einem einzigen Ereignis

html:

<div id="div">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>

js-Code:

<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>

Verwandte kostenlose Lernempfehlungen:

JavaScript (Video)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vue.1 und vue.2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!