Heim > Web-Frontend > View.js > Was ist der Unterschied zwischen vue.1 und vue.2?

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

coldplay.xixi
Freigeben: 2020-11-12 15:47:59
Original
3405 Leute haben es durchsucht

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>
Nach dem Login kopieren
Was ist der Unterschied zwischen vue.1 und vue.2?js-Code:

 window.onload=function () {
            new Vue({
                el:"#box",
                data:{
                   arr:[1,2,3,4,5,6]
                },
                methods: {
                    add:function () {
                        this.arr.unshift("1")
                    }
                }
            })
        }
Nach dem Login kopieren
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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

js-Code:

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

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>
Nach dem Login kopieren


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

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage