vue.1과 vue.2의 차이점: 1. vue2에서 [v-for] 명령을 사용하면 반복되는 내용을 추가할 수 있습니다. 2. vue2와 vue1의 큰 차이점은 필터가 없다는 것입니다. , 구성 요소 간 통신을 사용할 때도 두 가지가 다릅니다.
관련 기사 권장 사항 : 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:{ 'child-com':{ props:['m'], template:"#tpl", methods:{ change(){ this.m.msg='变了'; } } } } }) }이것은 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:
JavaScript🎜(동영상) 🎜🎜<div id="div"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div>관련 무료 학습 권장 사항:
위 내용은 vue.1과 vue.2의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!