차이점: 1. vue2에서 v-for 명령을 사용하면 반복되는 콘텐츠를 추가할 수 있지만 vue1은 그럴 수 없습니다. 2. vue2에는 필터가 있지만 vue1에는 없습니다. 3. 구성 요소 간의 통신 방법이 다릅니다. 생활주기가 다르다 등등
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
차이점 1:
vue2에서 v-for 명령어를 사용하면 동일한 메시지 내용을 추가하는 것처럼 반복되는 내용을 추가할 수 있습니다. 아래에서 살펴보겠습니다.
코드 작성 시. , 먼저 가져올 것은 vue2js 파일입니다.
HTML 코드:
<div> <input> <ul> <li>{{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") } } }) }
그러나 또 다른 차이점이 있습니다. vue1에는 $index가 없지만 수동으로 $index를 추가할 수 있습니다.
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="(val,index) in arr">{{val}}------->{{index}}</li> </ul> </div>
차이점 2:
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> <div> <h3 id="">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 id="我是C组件">我是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>
관련 권장 사항: "vue.js tutorial"
위 내용은 vuejs2와 1의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

本文旨在帮助初学者快速入手Vue.js3,实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架,可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本,相较于之前的版本变动较大,但基本原理并未改变。在本文中,我们将使用Vue.js指令实现选项卡切换效果,目的是让读者熟悉Vue.js的

随着移动互联网和Web技术的迅速发展,越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求,而单页面应用(SPA)则成为了解决方案之一。那么,如何快速实现单页面应用呢?本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架,它的优点是灵活、易扩

VUE3基础教程:使用Vue.js插件封装图片上传组件Vue.js是一款流行的前端框架,它使开发者可以用更少的代码创建更高效、灵活的应用程序。尤其是在Vue.js3发布之后,它的优化和改进使得更多的开发者倾向于使用它。这篇文章将介绍如何使用Vue.js3来封装一个图片上传组件插件。在开始之前,需要先确保已经安装了Vue.js和VueCLI。如果尚未安装

Vue.js是现代化的前端JavaScript框架之一,它提供了一套完整的工具来构建交互式用户界面。在Vue.js的生态系统中,有各种各样的插件和组件,可以大大简化我们的开发流程。在本篇文章中,我们将介绍如何使用Vue.js插件封装一个日历组件,以方便我们在Vue.js项目中快速使用。Vue.js插件Vue.js插件可以扩展Vue.js的功能。它们可以添加全

Vue.js是一种流行的JavaScript框架,用于构建动态Web应用程序。实现用户登录验证是开发Web应用程序的必要部分之一。本文将介绍使用Vue.js、API、JWT和axios实现登录验证的完整指南。创建Vue.js应用程序首先,我们需要创建一个新的Vue.js应用程序。我们可以使用VueCLI或手动创建一个Vue.js应用程序。安装axiosax

随着大数据时代的到来,数据可视化已经成为了现如今的趋势之一。在Web前端开发的过程中,如何使用Vue.js进行数据可视化处理,成为了许多前端开发者所关注的问题。本文将会介绍如何使用Vue.js组件,封装基于chart.js库的图表。1.了解chart.jsChart.js是一款基于HTML5CanvasElement的简单易用、跨平台的开源图表库,我们可

Vue.js是一款流行的JavaScript框架,它提供了很多方便的特性,所以它在开发Web应用程序时非常有用。Vue.js中的自定义事件系统使其更加灵活,并且可以通过组件事件触发和处理来实现更好的代码重用性。在本文中,我们将讨论如何使用Vue.js的自定义事件。Vue.js中自定义事件的基础在Vue.js中,我们可以通过v-on指令来监听DOM事件。例如,

随着Web应用程序的普及和用户体验的要求不断提高,实时同步已经成为了现代Web应用程序不可或缺的功能。在本文中,我们将介绍如何使用Python和Vue.js开发实时同步的Web应用程序。为了实现实时同步的功能,我们需要使用一些现代化的Web技术,其中包括WebSocket、异步编程和前端框架。以下是本文中将用到的技术栈:Python3.6+FlaskFla


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
