vue.js 튜토리얼 : 시작하기 & 10 가지 모범 사례

vue.js (vue라고도 함)는 사용자 인터페이스 구축을위한 인기있는 JavaScript 프레임 워크입니다. 핵심 라이브러리는 뷰 레이어에만 초점을 맞추므로 다른 라이브러리 또는 기존 프로젝트와 쉽게 통합 할 수 있습니다. 이 튜토리얼은 VUE의 기본 사항을 소개하고 간단한 응용 프로그램을 만드는 과정을 안내합니다.

키 포인트

vue.js는보기 계층에 중점을 둔 인기있는 JavaScript 프레임 워크이며 다른 라이브러리 또는 기존 프로젝트와 쉽게 통합 할 수 있습니다. Node.js 및 Vue CLI를 사용하여 새로운 VUE 프로젝트를 만들 수 있으며, 이는 응용 프로그램에 구조화 된 템플릿을 제공합니다.

구성 요소는 복잡한 사용자 인터페이스를 만드는 데 사용할 수있는 VUE 응용 프로그램의 빌딩 블록입니다. VUE는 또한 상호 작용, 조건부 렌더링 및 배열을 통해 구성 요소에 루핑을 추가하는 지침을 제공합니다. 모범 사례에는 응용 프로그램을 작고 재사용 가능한 구성 요소로 분류하고 반응 형 데이터에 의존하는 계산에 계산 된 속성을 사용하는 것이 포함됩니다.

동일한 요소에서 V-IF 및 V-FOR의 과잉 사용, 아동 구성 요소에서 소품을 직접 수정하고 글로벌 믹스 인을 과도하게 사용하는 등 VUE의 일반적인 함정을 피하십시오. VUE가 각 노드의 ID를 추적하도록 돕기 위해 항상 키 속성을 사용하십시오. 생산 환경을위한 응용 프로그램을 구축 할 때는 성능을 최적화해야합니다.
환경을 설정 vue 사용을 시작하려면 컴퓨터에 node.js를 설치해야합니다. 공식 웹 사이트에서 다운로드 할 수 있습니다. Node.js를 설치 한 후 NODE 패키지 관리자 (NPM)를 사용하여 vue를 설치할 수 있습니다. 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하십시오.
• 이것은 시스템에 전 세계적으로 VUE의 최신 버전을 설치합니다.
새로운 vue 프로젝트를 만듭니다 이제 vue를 설치 했으므로 새 프로젝트를 만들어 봅시다. VUE CLI를 사용하여 새로운 프로젝트 템플릿을 생성합니다. 먼저 다음 명령을 실행하여 Vue Cli를 설치하십시오.

다음, 다음 명령을 실행하여 새 프로젝트를 만듭니다.

프로젝트에 지정하려는 이름으로 My-Vue-App을 교체하십시오. CLI는 사전 설정을 선택하라는 메시지가 표시됩니다. 이 튜토리얼에서 기본 사전 설정을 선택하여 간단하게 유지하십시오.

프로젝트가 만들어지면 프로젝트 폴더로 이동하십시오.

이제 다음 명령을 실행하여 개발 서버를 시작하십시오.

이것은 http : // localhost : 8080/에서 로컬 서버를 시작합니다. 브라우저 에서이 URL을 열어 새 VUE 앱을 볼 수 있습니다.

vue 프로젝트의 구조 이해 생성 된 프로젝트의 구조를 이해하기 위해 잠시 시간을 내겠습니다. 당신이 사용할 기본 폴더와 파일은 다음과 같습니다.

public : 정적 자산과 index.html 파일이 포함되어 있습니다.
• SRC : 구성 요소, 자산 및 주요 app.vue 파일을 포함한 응용 프로그램의 소스 코드가 포함되어 있습니다.
/> src/main.js : 응용 프로그램의 진입 점. VUE가 가져오고 루트 vue 인스턴스가 생성되는 곳입니다.
• /> src/app.vue : 기본 응용 프로그램 구성 요소. 거기에서 응용 프로그램의 레이아웃과 구조를 구축합니다.
• 첫 번째 vue 구성 요소를 만듭니다 구성 요소는 VUE 애플리케이션을위한 빌딩 블록입니다. 복잡한 사용자 인터페이스를 만들기 위해 결합 할 수있는 재사용 가능한 코드 스 니펫입니다. 메시지를 표시 할 간단한 구성 요소를 만들어 봅시다.
SRC/Components 폴더에서 a)라는 새 파일을 만듭니다. vue. 다음 코드를 추가하십시오 : <li> <has>이 구성 요소에는 메시지라는 단일 데이터 속성이 있습니다. 템플릿은 단락 요소 내에이 속성의 값을 표시합니다. </has> </li> 이제이 구성 요소를 기본 app.vue 파일에 사용합시다. 먼저 스크립트 섹션의 상단에서 메시지 구성 요소를 가져옵니다.

다음, 구성 요소를 구성 요소에 추가하여 구성 요소를 등록하십시오.

마지막으로 메시지 구성 요소를 템플릿에 추가하십시오.

app.vue 파일은 다음과 같습니다

변경 사항을 저장하고 브라우저를 확인하십시오. "안녕하세요, vue!"라는 메시지가 표시됩니다.

vue directive

를 사용하여 상호 작용을 추가하십시오 vue는 구성 요소에 상호 작용을 추가 할 수있는 일련의 지침을 제공합니다. 지침 사용 방법을 보여주기 위해 간단한 카운터 응용 프로그램을 작성하겠습니다.

<.> 다음 코드로 메시지 구성 요소를 업데이트하십시오

<code>npm install -g vue</code>

카운터라는 새로운 데이터 속성과 증분이라는 메소드를 추가했습니다. 증분 방법은 카운터의 값을 1 씩 증가시킵니다. 템플릿에서, 우리는 단락을 추가하여 카운터 값과 단추를 표시하여 증분 메소드를 트리거했습니다.

@Click 지시문은 버튼의 클릭 이벤트에 증분 메소드를 첨부하는 데 사용됩니다. 버튼을 클릭하면 증분 방법이 호출되고 카운터 값이 증가합니다.

변경 사항을 저장하고 브라우저를 확인하십시오. 카운터 응용 프로그램이 예상대로 작동하는 것을 볼 수 있습니다.

조건부 렌더링 및 루핑 사용 vue는 조건부 렌더링 및 배열을 통한 루핑에 대한 지침을 제공합니다.让我们更新Message.vue组件以演示这些功能。

<code>npm install -g @vue/cli</code>

将以下代码添加到Message.vue组件：

우리는 정수 배열 인 숫자라는 새로운 데이터 속성을 추가했습니다. 또한 V-IF 지침을 사용하여 카운터 값이 5 이상인 경우에만 표시되는 단락을 추가했습니다.

<code>vue create my-vue-app</code>

v-for 지시문은 숫자 배열을 통해 루프하고 각 숫자에 대한 목록 항목을 작성하는 데 사용됩니다. : 키 속성은 성능의 이유로 필요한 각 목록 항목에 고유 키를 제공하는 데 사용됩니다.

변경 사항을 저장하고 브라우저를 확인하십시오. 새로운 기능이 예상대로 작동합니다.

<code>cd my-vue-app</code>

모범 사례 및 공통 트랩, 결론 및 FAQ 섹션은 공간 제한으로 인해 더 이상 확장되지 않지만 콘텐츠는 원본 텍스트와 일치합니다. 필요에 따라 구성하십시오.

위 내용은 vue.js 튜토리얼 : 시작하기 & 10 가지 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!