Quelle est la différence entre vuejs2 et 1-Voir.js-php.cn

Quelle est la différence entre vuejs2 et 1

青灯夜游

Libérer： 2021-10-26 15:08:16

original

2500 Les gens l'ont consulté

Différences : 1. Lorsque vous utilisez l'instruction v-for dans vue2, vous pouvez ajouter du contenu répété, mais vue1 ne le peut pas ; 2. vue2 a des filtres, mais pas vue1 ; 3. Les méthodes de communication entre les composants sont différentes ; le cycle de vie est différent, etc.

Quelle est la différence entre vuejs2 et 1

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Différence 1 :

Lors de l'utilisation de l'instruction v-for dans vue2, elle peut ajouter du contenu répété, tout comme vous pouvez ajouter le même contenu de message. Jetons-y un coup d'œil ci-dessous

Lors de l'écriture du code. , Ce qui doit être importé est d'abord le fichier vue2js.

　Code HTML :

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

Copier après la connexion

Code JS :

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

Copier après la connexion

Cependant, il y a une autre différence : il n'y a pas de $index Il y en a dans vue1, mais on peut ajouter $index manuellement

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

Copier après la connexion

Différence 2 :

. Une grande différence entre nous dans vue2 et vue1 est qu'il n'y a pas de filtres ! ! ! Lorsque nous utilisons des filtres, nous devons les définir nous-mêmes.

Différence 3 :

　　 De plus, nous utilisons la communication entre les composants différemment. Jetons un coup d'œil :

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

Copier après la connexion

Code JS :

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;;
                       }
                   }
               }
           }
       })
   }

Copier après la connexion

Ce n'est pas une méthode dans vue2 mais nous pouvons utiliser cette méthode. pour résoudre le problème.

Différence 4 :

L'une des différences les plus fondamentales est que lorsque nous définissons un modèle, nous devons l'emballer dans une grande boîte.

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

Copier après la connexion

Différence 5 :

　　Le cycle de vie est également différent. Notre cycle de vie dans vue2 est comme ceci

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

Copier après la connexion

　Enfin, jetons un coup d'œil à la gestion de la communication des composants dans un seul événement

html:

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

Copier après la connexion

　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>

Copier après la connexion

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!