Vue 3에 대한 초보자 가이드

이 자습서는 vue 3 (이 예제에서 사용)과 이전 버전 모두에 적용 할 수있는 vue.js에 대한 기본적인 이해를 제공합니다. 우리는 다음을 포함하여 VUE 응용 프로그램 구축의 주요 측면을 다룰 것입니다.

vue cli를 사용하여 vue 응용 프로그램 생성 렌더링 목록 , 및

지시서와 함께 동적 CSS를 활용합니다 사용자 입력 및 이벤트 처리 방법 및 계산 속성 사용 와 함께 html 속성 바인딩을 사용합니다

주요 개념 :
Vue Cli 설정 :
• Vue Cli는 프로젝트 작성, 구성 단순화 및 사용자 정의 된 기능 선택 허용을 간소화합니다. 목록 렌더링 () : 는 동적 목록을 효율적으로 렌더링하고 고유 키로 DOM 성능을 최적화합니다 ( 속성 사용). 조건부 렌더링 : v-for는 ,
및 를 사용하여 조건에 따라 내용을 동적으로 표시합니다. 양방향 데이터 바인딩 () :
• 사용자 입력 처리 및 실시간 UI 피드백 제공에 중요합니다. 계산 속성 : v-if 원래 데이터를 직접 수정하지 않고 데이터 변환 및 계산을 수행하여 반응성을 향상시킵니다. Dynamic CSS () : v-else-if는 구성 요소 상태를 기반으로 CSS 클래스를 조건부로 적용하여 동적 스타일을 활성화합니다. v-else
vue cli를 사용하여 응용 프로그램 구축 :
• Vue Cli는 프로젝트 설정을 단순화합니다. 설치합시다 : :class (또는 를 사용하십시오.) 새 프로젝트 만들기 :
이 튜토리얼의 바벨 만 선택하는 "수동으로 기능을 선택"하는 것을 선택하십시오. VUE 3을 선택하고 선택하여 전용 파일에 구성을 배치하십시오. 사전 설정을 저장하지 마십시오.
그림 1 : Vue Cli 환영 화면
• 그림 2 : Vue Cli v-bind 그림 3 : Vue cli 에서 vue 버전 선택 이것은 프로젝트 구조를 만듭니다 (그림 4 참조). 에서 에서
에서 참조를 제거하십시오.

그림 4 : 우리의 vue 3 프로젝트 구조

응용 프로그램 설정 :
의 내용을 다음과 같이 바꿉니다
이것은 간단한 제목을 설정합니다. 다음 섹션이 점차적으로 이루어질 것입니다. (추가 코드 스 니펫은 다음 섹션에서 제공됩니다. 목록 렌더링 :

메소드에 배열을 추가하십시오.

: 를 사용하여 목록을 렌더링합니다 App.vue

속성은 성능에 중요합니다

npm i -g @vue/cli

그림 5 : v-for 지시문

와 Vue의 목록 렌더링 목록

(나머지 섹션은이 점진적인 스타일로 계속 진행되어 각 기능에 대한 코드 스 니펫 및 설명을 제공합니다 - 조건부 렌더링, 사용자 입력, 메서드, 이벤트, 계산 속성, 속성 바인딩 및 동적 CSS - 원본과 유사합니다. 입력이지만 서식이 개선되고 더 명확한 설명으로 인해 나머지 코드를 모두 포함하는 것은 불가능합니다. 🎜>

위 내용은 Vue 3에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!