vuejs2와 1의 차이점은 무엇입니까

차이점: 1. vue2에서 v-for 명령을 사용하면 반복되는 콘텐츠를 추가할 수 있지만 vue1은 그럴 수 없습니다. 2. vue2에는 필터가 있지만 vue1에는 없습니다. 3. 구성 요소 간의 통신 방법이 다릅니다. 생활주기가 다르다 등등

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

차이점 1:

vue2에서 v-for 명령어를 사용하면 동일한 메시지 내용을 추가하는 것처럼 반복되는 내용을 추가할 수 있습니다. 아래에서 살펴보겠습니다.

코드 작성 시. , 먼저 가져올 것은 vue2js 파일입니다.

　HTML 코드:

  
 
{{item}}
 
 

JS 코드:

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

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

  
 
{{val}}------->{{index}}
 
 

차이점 2:

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

차이점 3:

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

HTML 코드:

 我是父组件---->{{emitData.msg}}
  
   

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:

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

차이점 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:

　js 코드:

관련 권장 사항: "vue.js tutorial"

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