vue.1과 vue.2의 차이점은 무엇입니까-View.js-php.cn

vue.1과 vue.2의 차이점은 무엇입니까

coldplay.xixi

풀어 주다： 2020-11-12 15:47:59

원래의

3405명이 탐색했습니다.

vue.1과 vue.2의 차이점: 1. vue2에서 [v-for] 명령을 사용하면 반복되는 내용을 추가할 수 있습니다. 2. vue2와 vue1의 큰 차이점은 필터가 없다는 것입니다. , 구성 요소 간 통신을 사용할 때도 두 가지가 다릅니다.

vue.1과 vue.2의 차이점은 무엇입니까

관련 기사 권장 사항 : vue.js

】

vue.1과 vue. it 동일한 메시지 내용을 추가하는 것처럼 반복되는 내용도 추가할 수 있습니다. 아래에서 살펴보겠습니다

코드 작성 시 가장 먼저 소개해야 할 것은 vue2js 파일입니다.

html 코드:

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

로그인 후 복사

js 코드:

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

로그인 후 복사

그러나 또 다른 차이점은 $index가 없다는 것입니다. vue1에는 있지만 $index를 수동으로 추가할 수 있습니다

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

로그인 후 복사

차이점 2:

A vue2와 vue1의 가장 큰 차이점은 필터가 없다는 것입니다! ! ! 필터를 사용할 때는 필터를 직접 정의해야 합니다.

차이점 3:

게다가 컴포넌트 간 통신을 다르게 사용합니다. 살펴보겠습니다.

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>

로그인 후 복사

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

로그인 후 복사

이것은 vue2의 메서드가 아니지만 사용할 수 있습니다. 문제를 해결하는 방법.

차이점 4:
　

가장 기본적인 차이점 중 하나는 템플릿을 정의할 때 템플릿 항목을 큰 상자에 포장해야 한다는 것입니다.

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

로그인 후 복사

차이점 5:

vue2의 라이프사이클도 다릅니다.

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

로그인 후 복사

마지막으로 단일 이벤트의 관리 구성요소 통신을 살펴보겠습니다

html:

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

로그인 후 복사

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>

로그인 후 복사

관련 무료 학습 권장 사항: JavaScript🎜(동영상) 🎜🎜

위 내용은 vue.1과 vue.2의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!