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:

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

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.

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

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!