홈 » 기사 » Vue.js에서 웹 애플리케이션 구축 소개

Vue.js에서 웹 애플리케이션 구축 소개

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

7 분 15년 2021월 XNUMX일

요즘에는 JavaScript 프레임 워크가 너무 많아서 모든 것을 추적하기가 어려울 수 있으며, 확실히 모든 사람이 완전히 마스터하지는 않을 것입니다. 우리 대부분에게 의미하는 것은 학습에 시간을 투자 할 개발 프레임 워크를 선택해야한다는 것입니다.

이 기사에서는 Vue.js를 간략하게 살펴 보므로 작업하려는 프로젝트의 종류에 적합한 지 여부와 자신에게 적합한 지 여부를 스스로 결정할 수 있습니다.

Vue.js은 (는) 무엇 이죠?

일반적으로 대문자는 아니지만 "Vue"는 실제로 Visual Understanding Environment의 약어입니다. 주요 목적은 코드 복잡성을 줄여 웹 애플리케이션을보다 쉽게 개발할 수 있도록하는 것입니다. React.js와 많은 공통점이 있지만 현재 버전의 Vue는 React보다 더 빠르게 렌더링되며 더 효율적으로 보입니다.

Vue는 배우기 어렵습니까?

이미 숙련 된 코더라면 Vue를 시작하는 데 많은 어려움이 없어야하지만 초보자 언어로 설명하는 것은 옳지 않습니다. HTML, CSS 및 JavaScript에 대한 경험이 있어야이를 실용적으로 구축 할 수 있습니다.

Vue의 학습 곡선은 React보다 약간 가파르고 Angular보다 훨씬 가파 릅니다. 정확하게 말할 수있는 것은 Vue가 다른 대중적인 개발 프레임 워크에 비해 상대적으로 배우기 쉽다는 것입니다.

Vue는 목표 달성에 어떤 도움을 줍니까?

목표가 실제로 무엇인지에 따라 약간 다르지만 일반적으로 코드 블록을 HTML div에 바인딩합니다. 이 방법론을 사용하면 일반 HTML, CSS 및 JavaScript보다 대화 형 및 동적 컨텐츠를보다 쉽게 도입 할 수 있습니다.

반면에 Vue에서는 기존 방식보다 더 많은 것을 할 수 없습니다. Vue를 사용하면 개발 단계에서 작업을보다 쉽게 수행 할 수 있지만 프레임 워크 코드로드로 인한 약간의 성능 영향 외에는 최종 결과에 큰 영향을 미치지 않습니다.

Vue의 또 다른 장점은 모듈성을 제공하여 여러 프로젝트에서 개발 한 구성 요소를 재사용 할 수 있다는 것입니다.

Vue는 소매에 멋진 트릭이 있습니까?

그것은 확실히 하며, 이들 중 가장 좋은 것은 내장된 전환 효과로, 이를 통해 다른wise 한두 줄의 코드를 사용하여 매우 코드 집약적인 CSS 및 JavaScript 구조가 됩니다. 이렇게 하면 응용 프로그램을 만들 때 시간과 노력을 절약할 수 있습니다.

또 다른 유용한 기능은 Android 및 iOS와 같은 특정 장치 유형에 대한 기본 렌더링이므로 많은 추가 작업 없이도 실행중인 장치에 맞게 응용 프로그램을 미세 조정할 수 있습니다.

시작하기

앞에서 언급했듯이 Vue는 배우기 쉽지만 초보자의 언어는 아닙니다. 여전히 코드 블록 내부에서 길을 알아야합니다.

문제는 대부분의 프레임워크와 마찬가지로 문서가 매우 게으르고 주로 사용하도록 설득하는 데 전념한다는 것입니다. 문서에서는 모든 것이 어떻게 작동하는지 또는 왜 특정 방식으로 일을 하는지 설명하는 데 훨씬 덜 주의를 기울입니다. 이제까지 만들어진 거의 모든 공식 프레임워크 예제는format발견하려면 몇 시간 동안 찔러야 하는 이온입니다. 이는 Vue의 문서 및 예제에서도 공유되는 결함입니다.

이 프로젝트를 재생성하기 위해 실제로해야 할 일을보다 쉽게 이해하려면 다음 단계가 필요합니다.

1. vue.js를 참조하는 스크립트 추가

속도 최적화를 위해서는 모든 페이지 콘텐츠 뒤에 HTML 소스에서 닫는 body 태그 바로 앞에 이것을 포함시키는 것이 가장 좋습니다. 이 섹션에서 다른 페이지 리소스를로드 할 수도 있으며로드 우선 순위에 따라 각 리소스를 삽입해야하는 순서가 결정됩니다.

다음은 CDN에서 vue.js를 포함하는 예입니다.

다음은 자체 서버의 디렉토리에서 vue.js를 포함하는 예입니다.

vue.js에 대한이 참조가 없으면 Vue와 관련된 것은 없습니다.

2. HTML 본문에 Vue 구성 요소 추가

이것이이 코드에서 일어나는 일입니다.

현재로서는별로 의미가 없지만 Vue 부분은 빈 "demo-grid"요소와 쿼리 입력에 "v-directive"추가 (이 경우 "v-model ”, 입력을 형성하기 위해 Vue 코드를 바인딩하는 데 사용됨).

3. 프로젝트에 컴포넌트 템플릿이 필요한 경우이를 HTML 본문에 추가하십시오.

이 코드 섹션은 스크립트 태그 내부의 일반 HTML처럼 보이기 때문에 대부분의 HTML 편집 소프트웨어를 혼동시킬 수 있습니다 (일부 지역에서는 표시기 색상이 잘못됨).

4. Vue 인스턴스 추가

동적 렌더링 작업을 수행하기 때문에 페이지에 표시되는 마지막 항목 중 하나 여야합니다. 이렇게하면 페이지의 앞부분에 추가하는 것보다 몇 가지 최적화 이점이 있습니다.

광고 ⓘ

46 행은 브라우저가 "demo-grid"라는 페이지에서 구성 요소를 찾도록 지정하고 47 행은 "# grid-template"을 구성 요소의 템플릿으로 사용해야 함을 지정합니다 (이는 단계에서 추가 된 템플릿 코드입니다. 3 번 줄에서 9 번 줄까지).
48 행에서 52 행까지의 블록은 구성 요소의 특성을 정의합니다.
53-62 행은 테이블의 데이터를 정렬하는 기능을 정의합니다.
63-85 행은 데이터를 필터링하는 기능을 정의합니다 (검색 쿼리 결과에서).
86 ~ 90 행은 데이터 세트의 단어를 대문자로하는 기능을 정의합니다.
91 ~ 97 행은 데이터 정렬 방법을 정의합니다.

5. 종료 스크립트 태그 앞에 시작 코드를 추가하십시오.

1-4 단계를 완료하고 파일을 브라우저에서 열면 검색 상자 만 표시됩니다. 테이블을 작성하는 데 필요한 모든 것이 정의되었지만 작성되지 않았기 때문입니다. 따라서 5 단계에서 이전의 모든 단계에서 정의한 테이블을 실제로 작성하는 코드를 추가합니다.

100 행은 새로운 Vue 객체를 만듭니다.
101 행은 조치를 바인딩 할 요소를 지정합니다.
라인 102 내지 111은 요소에 바인딩 될 객체 데이터를 제공한다.

시험

필수 오브젝트를 정의하고 작성 했으므로 이제 결과를 테스트 할 준비가되었습니다. 브라우저에서 볼 수있는 것이므로 당황 할 준비를하십시오.

무슨 일이야? 왜 그렇게 지루합니까? 스타일이 적용되지 않았기 때문입니다. JSFiddle 예제에서 기본 스타일을 사용하면 테이블은 다음과 같습니다.

검색 상자에 아무 것도 입력하면 (대소 문자 구분 안 됨) 그에 따라 결과가 필터링됩니다.

열 머리글을 클릭하면 표시 순서를 변경할 수 있습니다. 예를 들어, "Power"열 헤더를 클릭하면 표시되는 결과가 전력 수준 순서대로 변경됩니다.

개선 및 적응

프레임워크 예제의 또 다른 문제는 일반적으로format코드베이스에 익숙하지 않은 사람이 예제에서 본 것을 현장에 적용하는 방법을 알아내는 데 도움이 됩니다. Vue는 Bootstrap과 비교하여 훌륭한 작업을 수행합니다.formative), 그러나 여전히 답이 없는 질문이 많이 남아 있습니다.

다음은이 응용 프로그램의 모양과 기능을 변경하기 위해 변경할 수있는 몇 가지 사항입니다.