Vue.js에 대한 자세한 그래픽 설명

이번에는 Vue.js에 대한 자세한 설명을 사진과 텍스트로 가져왔습니다. Vue.js 사용 시 주의사항은 무엇인가요?

Vue.js는 현재 가장 인기 있고 유망한 프론트엔드 프레임워크 중 하나로 프론트엔드 프로젝트를 신속하게 구축하고 개발하는 데 도움이 되는 새로운 사고 모델을 제공합니다. 이 글은 모든 사람이 Vue.js를 이해하고, Vue.js의 개발 프로세스를 이해하고, Vue.js를 통해 중대형 프런트 엔드 프로젝트를 구축하는 방법을 더 깊이 이해하는 동시에 해당 배포 및 최적화 작업을 수행하도록 돕는 것을 목표로 합니다.

해당 글은 텍스트 소개와 함께 PPT 사진 형식으로 전개될 예정이며, 지식포인트의 구체적인 코드는 포함하지 않으니 클릭만 하시면 됩니다. 관심 있는 학생들은 해당 문서를 확인하여 자세히 알아볼 수 있습니다.

Vue.js 소개

위 그림의 소개에서 Vue.js와 Vue.js의 가장 큰 차이점은 어렵지 않습니다. jQuery가 바로 jQuery입니다. DOM을 조작하여 페이지의 표시를 변경하고, Vue는 데이터를 조작하여 페이지를 업데이트하여 표시합니다. 다음은 Vue 데이터 기반의 개념적 모델입니다.

Vue.js는 주로 위 그림의 녹색 큐브 ViewModel 부분을 담당합니다. View 레이어(즉, DOM 레이어)와 Model 레이어( 즉, JS 로직 레이어) 리스너와 동일한 두 가지 DOM Listener와 Data Binging은 ViewModel을 통해 바인딩됩니다.

View 레이어의 뷰가 변경되면 Vue는 DOM Listener를 통해 Model 레이어의 데이터를 듣고 변경합니다. 반대로 Model 레이어의 데이터가 변경되면 Data Binging을 통해 View 레이어의 표시도 듣고 변경됩니다. 이는 Vue.js 데이터 드라이브의 원리이기도 한 양방향 데이터 바인딩 기능을 구현합니다.

Vue 인스턴스

html 파일에서는 script 태그를 통해 Vue.js를 직접 소개한 후 페이지에 Vue.js 코드를 작성할 수 있습니다. 위 그림에서는 new Vue()를 통해 Vue 인스턴스를 구성했습니다. 인스턴스에는 행잉 요소(el), 데이터(data), 템플릿(template), 메서드(methods) 및 lifecyclehooks( 생성 등) 및 기타 옵션. 다양한 인스턴스 옵션에는 다음과 같은 다양한 기능이 있습니다.

(1) el은 Vue가 작동해야 하는 요소 아래 영역을 나타내고 '#demo'는 ID가 데모인 요소 아래 영역을 작동한다는 의미입니다.
(2) 데이터는 Vue 인스턴스의 데이터 객체를 나타내며, 데이터의 속성은 데이터 변경에 대응할 수 있습니다.
(3) Created는 인스턴스 생성이 완료되면 인스턴스 수명 주기의 단계를 나타냅니다.

Vue 공통 지침

Vue 프로젝트 개발에서 Vue 지침은 우리가 가장 많이 사용하는 지침이어야 합니다. Vue에서 제공하는 공통 지침을 통해 Vue 데이터 드라이브의 강력한 기능을 완벽하게 활용할 수 있습니다. 다음은 그림에서 일반적으로 사용되는 지침에 대한 간략한 소개입니다.

(1) v-text: 바인딩된 요소의 내용을 업데이트하는 데 사용되며 jQuery의 text() 메서드와 유사합니다.
(2) v-html: 사용됨 바인딩된 요소를 업데이트하려면 jQuery의 html() 메서드와 유사하게 요소의 html 콘텐츠를 결정합니다
(3) v-if: If P3 표현식 값의 true 및 false 조건을 기반으로 요소를 렌더링하는 데 사용됩니다. 위 그림이 false이면 P 태그가 렌더링되지 않습니다
(4) v-show: 표현식 값의 true 및 false 조건에 따라 숨겨진 요소를 표시하고 요소의 표시 CSS 속성을 전환하는 데 사용됩니다
(5) v-for: 그림의 P6과 같이 데이터를 순회하여 요소나 템플릿을 렌더링하는 데 사용됩니다. [1,2,3]인 경우 3개의 P 태그가 렌더링되고 내용은 1, 2, 3입니다. (6) v-on: 요소에 이벤트를 바인딩하는 데 사용됩니다. 그림에서는 showP3 click event

Vue2.0 문서(주소: https)를 볼 수 있습니다. ://vuefe.cn/api/#Instructions

Vue.js 기술 스택

위에서 Vue.js를 도입하면 HTML 페이지에 직접 Vue 코드를 작성할 수 있다고 언급했지만, 이 방법은 일반적으로 사용되지 않습니다. 프로젝트가 상대적으로 크면 프로젝트에 많은 페이지가 있을 것이기 때문에 각 페이지에서 Vue.js를 소개하거나 Vue 인스턴스를 선언하면 이는 나중에 유지 관리 및 코드 공유에 매우 해롭고 인스턴스 이름 충돌도 발생합니다. . 상황이므로 강력한 프런트엔드 프로젝트를 구축하려면 Vue에서 제공하는 기술 스택을 사용해야 합니다.

Vue.js 외에도 다음도 사용해야 합니다.

(1) vue-cli: Vue 프로젝트용 디렉터리와 파일을 자동으로 생성하는 데 사용되는 Vue의 스캐폴딩 도구입니다.
(2) vue-router: Vue에서 제공하는 프런트엔드 라우팅 도구로, 이를 사용하여 페이지 라우팅 제어, 부분 새로 고침 및 주문형 로드를 구현하고, 단일 페이지 애플리케이션을 구축하고, 프런트엔드 및 백엔드를 구현합니다. 이별 끝.
(3) vuex: Vue에서 제공하는 상태 관리 도구는 프로젝트에서 다양한 데이터의 상호 작용과 재사용을 동시에 관리하고 필요한 데이터 개체를 저장하는 데 사용됩니다.
(4) ES6: ECMAScript6의 약자인 새로운 버전의 Javascript입니다. ES6를 사용하면 JS 로직을 빠르게 구현하기 위해 제공되는 강력한 기능을 활용하면서 JS 코드를 단순화할 수 있습니다.
(5) NPM: node.js 패키지 관리 도구는 프런트 엔드 프로젝트에 필요한 패키지, 플러그인, 도구, 명령 등을 균일하게 관리하는 데 사용되므로 개발 및 유지 관리가 용이합니다.
(6) webpack: 프론트엔드 프로젝트 파일을 js로 패키징 및 압축하는 동시에 vue-loader와 같은 로더를 통해 구문 변환 및 로딩을 수행할 수 있는 강력한 파일 패키징 도구입니다.
(7) Babel: ES6 코드를 브라우저 호환 ES5 코드로 변환하는 플러그인

위 기술을 사용하여 Vue 프로젝트 구축을 시작할 수 있습니다.

대규모 애플리케이션 구축

중대형 Vue 프로젝트를 구축할 때 주로 vue-cli를 사용하여 프로젝트의 프런트엔드 디렉터리와 파일을 자동으로 생성하는 방법을 소개하고, Vue의 모든 것은 구성 요소입니다 개념 및 상위 구성 요소와 하위 구성 요소 간의 통신 문제, Vue 프로젝트에서 타사 플러그인을 사용하는 방법을 설명하고 마지막으로 webpack을 사용하여 프로젝트를 패키징하고 배포합니다.

vue-cli build

vue-cli를 사용하기 전에 node.js를 설치하고 vue-cli를 설치하기 위해 제공되는 npm 명령을 사용해야 합니다. node.js를 설치하려면 공식 웹사이트로 이동하여 소프트웨어를 다운로드하고 설치하세요. 주소는 https://nodejs.org/en/

설치가 완료되면 cmd 명령줄 도구를 엽니다. 컴퓨터에 접속하고 위 그림의 명령을 입력합니다:

(1) npm install -g vue-cli: vue-cli를 전역적으로 설치
(2) vue init webpack my-project: vue-cli를 사용하여 '라는 Vue를 생성합니다. my-project' 디렉토리 주소의 webpack 기반 프로젝트 파일 및 디렉토리
(3) cd my-project : 방금 생성한 폴더 열기
(4) npm intall : 프로젝트가 의존하는 패키지 파일 설치
(5) npm run dev: 로컬 노드 서버를 사용하여 브라우저에서 열고 프로젝트 페이지를 탐색합니다

이렇게 하면 webpack 기반의 vue 프로젝트 디렉토리가 구축됩니다.

단일 파일 구성 요소

방금 빌드한 vue 프로젝트에서 App.vue 및 Hello.vue 파일을 찾은 다음, 이와 같이 .vue 접미사로 끝나는 파일이 공통 단일 파일 구성 요소입니다. 우리 Vue 프로젝트에서. 단일 파일 구성 요소에는 함수 또는 모듈의 html, js 및 css가 포함됩니다. .vue 파일에서는 template 태그에 html, script 태그에 js, style 태그에 css를 작성할 수 있습니다. 이러한 기능이나 모듈은 .vue 구성 요소이며 구성 요소 공유 및 향후 유지 관리에도 매우 편리합니다.

아버지-자식 컴포넌트 통신

그래서 단일 파일 컴포넌트를 핵심으로 하는 프로젝트 개발에서 우리는 반드시 .vue 부모- 통신을 달성하기 위한 하위 구성 요소는 어떻습니까? Vue2.0에는 상위 구성 요소가 하위 구성 요소에 데이터를 전달할 수 있도록 Props가 제공되며 $emit는 하위 구성 요소가 상위 구성 요소에 데이터를 전달할 수 있도록 하는 데 사용됩니다. 물론, 좀 더 복잡하고 일반적인 데이터 상호작용이라면 vuex를 사용하여 데이터를 균일하게 관리하는 것이 좋습니다. 자세한 내용은 https://vuefe.cn/guide/comComponents.html#Props를 사용하여 데이터 전달

플러그인 사용법

을 참조하세요.

다음으로 webpack 기반 vue 프로젝트에서 플러그인을 사용하는 방법을 소개하겠습니다. 두 가지 주요 상황이 있습니다:

(1) 전역 사용

(1) index.html에 소개됨: 이 방법은 아닙니다. 로딩 순서에 문제가 있고 일부 플러그인에서는 이 방법을 지원하지 않기 때문에 권장됩니다.
(2) webpack을 통한 소개구성 파일: 주로 플러그인 구성 항목의 webpack.ProvidePlugin() 메소드를 통해 구현되나, CommonJs 사양을 지원하고 $in과 같은 전역 변수를 제공하는 플러그인에만 적합합니다. jQuery.
(3) import + Vue.use()를 통한 소개: 이 방법은 전역 .vue 파일에 로드해야 하는 플러그인을 가져온 후 Vue.use('플러그인 변수 이름'을 통해 구현해야 합니다. ), 그러나 이 방법은 vue-resourcee와 같이 Vue.js 플러그인 작성 사양을 따르는 플러그인 사용만 지원합니다.

(2) 단일 파일 사용

(1) Import를 통한 직접 도입 : 플러그인을 호출해야 하는 .vue 파일에서 사용할 수 있는 방법이지만, 생성 순서에 주의해야 합니다. 인스턴스이거나 require를 통해 도입할 수도 있습니다.

(2) import + 컴포넌트 등록: Vue 컴포넌트를 사용하는 방식으로, 컴포넌트에 하위 컴포넌트를 등록하여 사용할 수 있습니다.

배포 및 최적화

전체 Vue 프로젝트의 프런트 엔드 코딩 단계를 완료한 후 프런트 엔드 프로젝트 파일을 배포하고 최적화해야 합니다.

( 1) webpack의 DefinePlugin을 사용하여 프로덕션 환경 지정: 플러그인의 DefinePlugin 구성을 통해 'process.env' 속성을 'development'(개발 환경) 또는 'production'(프로덕션 환경)으로 선언할 수 있습니다. npm 구성 파일 package.json을 사용하면 scripts 명령을 사용하여 환경 모드를 전환하는 것이 매우 편리합니다.

(2) UglifyJs를 사용하여 코드 블록의 경고문 자동 삭제: 일반적으로 프로덕션 환경의 webpack 구성 파일에 사용되며, 새로운 webpack.optimize.UglifyJsPlugin()을 통해 구성되며, 경고문을 삭제하면 파일 크기를 줄일 수 있습니다.

(3) Webpack 해시를 사용하여 캐싱 처리: 온라인에 게시된 파일을 수정해야 할 때 다시 컴파일된 파일 이름이 이전 버전과 동일하면 브라우저가 캐시된 파일을 인식하고 로드하지 못하게 됩니다. 이러한 방식으로 캐싱을 방지하려면 해시 값이 포함된 파일 이름을 자동으로 생성해야 합니다. 자세한 내용은 https://segmentfault.com/a/1190000006178770#articleHeader7

(4) v-if를 사용하여 불필요한 구성 요소 로딩을 줄이세요. v-if 명령은 실제로 매우 유용합니다. 우리 프로젝트 구성 요소는 렌더링되지 않으며 팝업 구성 요소 등과 같이 필요할 때 렌더링됩니다. 이렇게 하면 첫 번째 페이지 로드 시간과 파일 크기를 줄일 수 있습니다.

위 항목의 최적화 외에도 다양한 최적화 옵션이 있습니다. 관심 있는 어린이는 webpack의 API 문서를 잘 살펴보세요. 결국 webpack은 매우 강력합니다.

데이터 기반 예제##

Summary

이 글에서는 텍스트 소개와 함께 PPT 그림 형식으로 Vue.js의 지식 포인트와 개발 과정을 간략하게 소개하고,

전면을 자동화합니다- end 및 컴포넌트, 엔지니어링 개념이 이를 관통하며 Vue.js의 독특한 매력을 얕은 것부터 깊은 것까지 설명합니다. "단순하지만 우아하고, 작지만 정교하지 않습니다"

이 사례를 읽으신 후에는 방법을 마스터하신 것 같습니다. , 더 흥미 진진한 PHP 중국어 웹 사이트의 다른 관련 기사도 주목해주세요!

관련 읽기:

Video.js를 사용하여 H5 라이브 방송 인터페이스 구현

node.js의 경로 모듈에 대한 자세한 설명

위 내용은 Vue.js에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!