Vue.js 프레임워크란 무엇입니까?

이전 기사에서는 Vue.js의 간단한 설치와 빠른 시작을 공유했습니다. 이 기사에서는 주로 Vue.js 프레임워크가 무엇이며 이를 선택해야 하는 이유를 공유했습니다. 이 글은 프론트엔드 기술 사용의 현재 동향과 Vue.js의 장점 및 적용 가능한 시나리오를 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

Vue.js는 데이터 기반 웹 인터페이스를 구축하기 위한 진보적인 프레임워크입니다. Vue.js의 목표는 가능한 가장 간단한 API를 사용하여 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다. 시작하기 쉬울 뿐만 아니라 타사 라이브러리나 기존 프로젝트와도 쉽게 통합할 수 있습니다.

그래서 "Vernacular, 프로그래밍" 시리즈가 돌아왔습니다. 이번 시리즈에서는 Vue.js의 기본을 함께 배워보겠습니다. 당신은 기본 지식을 올바르게 읽었습니다. 그러므로 업계에 짧은 시간 동안 종사했더라도 토착어 스타일로 배울 수 있다고 믿습니다.

하지만 여전히 html, css, javascript 개발에 대한 프로젝트 경험이 있기를 바랍니다. 프로젝트 경험이 없거나 이미 Vue.js에 대한 지식을 마스터했다면 이 시리즈는 적합하지 않습니다. 현재 학습 단계.

1 학습 목표

이 섹션을 통해 배울 내용은 다음과 같습니다.

1. 프런트 엔드 기술 사용의 현재 추세

2. Vue.js의 장점

4. .Vue.js의 두 코어

5. Vue.js의 적용 시나리오

2 탄생 배경

최근 모바일 기기의 인기와 성능 향상으로 인해 모바일 웹에 대한 수요가 크게 증가했습니다. , 결과적으로 모바일 웹 애플리케이션인 webapp이라는 것이 생성됩니다.

기능은 점점 더 복잡해지고 상호 작용은 점점 더 멋져지며 기능과 효과는 기본 앱에 점점 더 가까워지고 있습니다. 예를 들면 다음과 같습니다.

(효과는 기본 APP만큼 좋습니다)

이런 종류의 웹앱은 h5 마케팅 웹 페이지와 같은 멋진 효과를 가질 뿐만 아니라 복잡한 클릭도 가지고 있습니다. 입력 및 드롭다운 선택 보기 전환과 같은 복잡한 상호 작용. 이러한 비즈니스 요구에 따라 우리는 여전히 PC측 개발 솔루션을 사용하고 있으며 이는 필연적으로 부적절합니다. 예: 보기 전환.

PC에서는 보기 전환 시 태그를 사용해 페이지로 이동하지만, 모바일에서는 멈춰서 다음과 같은 화면이 나옵니다.

(꽃이 필 때까지 기다려주세요 모두 감사합니다)

이때 사용자는 기다릴 수 밖에 없습니다... 3초, 5초, 8초... 뷰 전환이 필요한 웹앱에서는 상상하기 어렵습니다 자주 태그를 사용하는 것은 사용자에게 매우 불리한 일입니다. 어쨌든 그렇게 오래 기다리지는 않을 것입니다....

그리고, 예를 들어, 사용자가 다른 콘텐츠를 입력하면 그에 따라 페이지가 업데이트되어 다른 상태와 기타 대화형 효과가 표시됩니다. 이와 같은 상호 작용이 너무 많아 수동으로 수행해야 하면 코드가 쉽게 복잡해지고 유지 관리가 어려워집니다.

웹앱 개발 경험과 부족한 점을 해결하기 위해 MVVM 프레임워크인 Vue.js를 배우고 사용하기로 결정했습니다. - - 모델은 세 부분으로 구성되어 있습니다. 아래 보기를 살펴보세요.

그럼 MVVM을 어떻게 이해할까요?

위 그림에서 왼쪽의 보기는 DOM 콘텐츠, 우리가 보는 페이지 보기, 오른쪽의 모델은 개체 정보와 같은 데이터 개체에 해당합니다.

{ 

name:"张三", 
age:21,

}

그리고 중간 모니터는 양쪽의 데이터를 모니터링하고 그에 따라 수정하도록 상대방에게 알리는 역할을 담당합니다. 예를 들어, Model 레이어의 name 값을 "Li思"로 수정하면 View 레이어에 표시된 "Zhang San"이 자동으로 "Li思"로 변경되고 이 프로세스는 ViewModel에 의해 작동됩니다. 이를 구현하기 위해 수동으로 코드를 작성할 필요가 없습니다(더 이상 DOM을 수동으로 조작할 필요가 없습니다).

복잡한 DOM 작업을 작성했다면 그 편리함을 느낄 수 있습니다.

Vue.js 외에도 MVVM에 속하는 JS 프레임워크에는 React.js, Angular.js가 포함되어 있습니다.

여기에서는 세 가지 프레임워크 중 어느 것이 더 나은지 분석하지 않습니다. 기술 선택과 관련하여 각 개발 팀은 자신에게 적합한 한 다른 상황과 고려해야 할 요소가 다릅니다. 여기서는 Vue.js의 장점에 대해서만 이야기하겠습니다.

1. Vue.js는 더 가볍고 빠릅니다.

2 시작하고 배우기가 더 쉽습니다.

4 Vue의 핵심

오랜 준비 끝에 마침내 Vue의 핵심에 대해 이야기해봤습니다.

자, Vue.js에 대해 알아봅시다. 다음은 공식 웹사이트의 소개에서 발췌한 것입니다:

반응형 데이터 바인딩 및 결합된 뷰 구성 요소는 가능한 가장 간단한 API를 통해 구현됩니다

이 문장의 두 가지 키워드는 data 바인딩 및 view 구성 요소입니다.

Vue의 데이터 기반: 데이터 변경으로 인해 뷰가 자동으로 업데이트됩니다. 일반적으로 뷰를 변경하려면 DOM을 수동으로 변경해야 합니다. Vuejs는 데이터만 변경하면 자동으로 뷰가 변경됩니다. 단어 : 멋지다. 더 이상 DOM 업데이트에 대해 걱정할 필요가 없습니다. 이것이 바로 MVVM 아이디어의 실현입니다.

보기 구성 요소화: 전체 웹 페이지를 블록으로 분할하고 각 블록을 구성 요소로 간주할 수 있습니다. 웹페이지는 이어지거나 중첩된 여러 구성요소로 구성됩니다. 아래 그림을 보세요.

개발 과정에서 컴포넌트를 구체적으로 구현하는 방법과 어떤 블록을 컴포넌트로 나눌 수 있는지는 다음 장에서 하나씩 소개하겠습니다. Vue.js에서는 웹페이지가 여러 구성요소로 구성된 것으로 볼 수 있습니다.

5 적용 가능한 시나리오

아직도 jquery를 사용하여 페이지를 업데이트하기 위해 DOM을 자주 조작하고 있다면 Vue.js를 사용하여 DOM 작업을 자유롭게 할 수 있습니다.

프로젝트에 동일하고 구성 요소로 캡슐화할 수 있는 여러 부분이 있는 경우 Vue.js를 사용해 볼 수 있습니다.

또한 Vue.js의 핵심 구현은 IE8 이하 브라우저와 호환되지 않는 ES5의 Object.defineProperty 기능을 사용합니다. 따라서 프로젝트가 이러한 하위 버전의 브라우저와 호환되어야 하는 경우 Vue .js를 사용하세요. 적용되지 않습니다.

결국 프로젝트 개발의 목적은 특정 프레임워크를 사용하는 것이 아닙니다.

6 이 섹션 요약

현재 모바일 웹앱 프로젝트의 개발 요구 사항을 더 잘 충족하기 위해 MVVM 프레임워크가 탄생했으며 Vue.js는 데이터 기반 및 구성 요소화라는 두 가지 코어를 갖춘 js 프레임워크입니다.

관련 추천:

Vue.js 프레임워크로 기차표 조회 시스템 구현

vue.js 인스턴스 객체 및 컴포넌트 트리 인스턴스 상세 설명

Vue.js 컴포넌트 통신 예시 공유

위 내용은 Vue.js 프레임워크란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!