Apakah perbezaan antara vuejs2 dan 1

Perbezaan: 1. Apabila menggunakan arahan v-for dalam vue2, anda boleh menambah kandungan berulang, tetapi vue1 tidak boleh; 2. vue2 mempunyai penapis, tetapi vue1 tidak 3. Kaedah komunikasi antara komponen adalah berbeza ; 4. Kitaran hidup berbeza dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Perbezaan 1:

Apabila menggunakan arahan v-for dalam vue2, ia boleh menambah kandungan berulang, sama seperti anda boleh tambah Dengan kandungan mesej yang sama, mari kita lihat

Apabila menulis kod, perkara pertama yang perlu diimport ialah fail vue2js.

Kod HTML:

bd63f5dbaa3d57f72e80d7f9df1e5663
        1306440f8fb3f8b3b2d35aad65de3a7e
        ff6d136ddc5fdfeffaf53ff6ee95f185
            26bd48817f53e2ce1cb391f236878ae3{{item}}bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    16b28748ea4df4d9c2150843fecfba68

Kod JS:

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

Walau bagaimanapun, perbezaan lain ialah tiada $index, yang terdapat dalam vue1 , tetapi kami boleh menambah $index secara manual

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

Perbezaan 2:

Kami mempunyai perbezaan besar antara vue2 dan vue1 iaitu tiada Penapis! ! ! Apabila kita menggunakan penapis, kita perlu menentukannya sendiri.

Perbezaan 3:

Tambahan pula, kami menggunakan komunikasi antara komponen secara berbeza Mari kita lihat:

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

Kod 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='变了';
                       }
                   }
               }
           }
       })
   }

Ini bukan kaedah dalam vue2 tetapi kita boleh menggunakan kaedah ini untuk menyelesaikan masalah.

Perbezaan 4:

Salah satu perbezaan paling asas ialah apabila kita mentakrifkan templat, kita harus membungkus templat itu dalam kotak besar.

e1077e214376481d8736cf8288f27c31
    dc6dce4a544fdca2df29d5ac0ea9906b684271ed9684bde649abda8831d4d355333333339528cedfa926ea0c01e69ef5b2ea9b08e99a69fbe029cd4e2b854e244eab143strong128dba7a3a77be0113eb0bea6ea0a5d016b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Perbezaan 5:

Kitaran hidup juga berbeza dalam vue2 adalah begini

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

Akhirnya, mari kita lihat komunikasi komponen pengurusan dalam satu acara

html:

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

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

Cadangan berkaitan: "

vue . tutorial js》

Atas ialah kandungan terperinci Apakah perbezaan antara vuejs2 dan 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!