집 > 기사 > 웹 프론트엔드 > Vue의 가장 상세한 지식과 노트

Vue의 가장 상세한 지식과 노트

WBOY앞으로: 2021-12-20 11:14:593739검색

이 글은 Vue에 대한 가장 완전하고 상세한 지식을 제공합니다. 프론트엔드를 이해하고 마스터하는데 도움이 되기를 바랍니다!

1. 프런트 엔드 핵심 분석

1.1. 개요

Soc 원칙: 관심사 분리 원칙

Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두어 타사 라이브러리나 기존 라이브러리와 쉽게 통합할 수 있습니다. 프로젝트.

HTML + CSS + JS: 보기: 给用户看，刷新后台给的数据

네트워크 통신: axios

페이지 점프: vue-router

상태 관리: vuex

Vue-UI: ICE, Element UI

1.2, 세 가지 프런트엔드 요소

HTML(구조): Hyper Text Markup Language(Hyper Text Markup Language), 웹 페이지의 구조와 내용을 결정합니다.
CSS(표현식): Cascading Style Sheets(Cascading Style Sheets), 웹 페이지의 표시 스타일을 설정합니다. 웹페이지.
JavaScript(동작): 약한 유형의 스크립팅 언어입니다. 소스 코드는 컴파일할 필요가 없지만 브라우저에서 해석되고 실행됩니다. 웹 페이지의 동작을 제어하는 데 사용됩니다

1.3, 구조 레이어 (HTML)

너무 단순, 약간

1.4 프리젠테이션 레이어(CSS)

CSS 캐스케이딩 스타일 시트는 프로그래밍 언어가 아닌 마크업 언어이므로 변수, 참조 등을 사용자 정의할 수 없습니다. , 구문 지원이 없으며 주요 결함은 다음과 같습니다.

구문이 충분히 강력하지 않습니다. 예를 들어 중첩될 수 없으므로 모듈 개발에서 반복되는 선택기를 많이 작성해야 합니다.
변수가 없고 합리적인 스타일 재사용 메커니즘이 없기 때문에 논리적으로 관련된 속성 값을 리터럴 형식으로 반복적으로 출력해야 하므로 유지 관리가 어렵습니다.
이로 인해 작업량이 비합리적으로 증가했습니다. 이 문제를 해결하기 위해 프런트 엔드 개발자는 [CSS 전처리기]라는 도구를 사용하여 CSS에 누락된 스타일 레이어 재사용 메커니즘을 제공하고 중복 코드를 줄이고 스타일 코드의 유지 관리성을 향상시킵니다. 이는 프런트엔드 스타일 개발의 효율성을 크게 향상시킵니다.

CSS 전처리기란 무엇입니까

CSS 전처리기는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가하고 CSS를 대상으로 파일을 생성한 다음 개발자만 처리하는 것입니다. CSS를 코딩하려면 이 언어를 사용해야 합니다. 이해하기 쉬운 단어로 번역하면 "특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 컴파일러를 통해 일반 CSS 파일로 변환하여 프로젝트에서 사용할 수 있다"라는 뜻입니다.

일반적으로 사용되는 CSS 전처리기는 무엇인가요?

SASS: Ruby 기반으로 서버 측 처리를 통해 강력합니다. 분석 효율성이 높습니다. LESS보다 시작하기가 더 어려운 Ruby 언어를 배워야 합니다.
LESS: NodeJS 기반으로 클라이언트를 통해 처리되며 사용하기 쉽습니다. SASS에 비해 기능이 간단하고, 파싱 효율도 SASS에 비해 낮지만, 실제 개발에서는 충분하므로 우리 백엔드 직원이 필요하다면 LESS를 사용하는 것을 권장합니다.

1.5. 동작 레이어(JavaScript)

JavaScript는 실행을 위해 클라이언트에 전송되기 전에 소스 코드를 컴파일할 필요가 없습니다. 브라우저 및 브라우저 인터프리터가 실행됩니다.

Native Native JS development

Native JS 개발, 즉 모든 브라우저에서 지원하는 ES라고 불리는 [ECMAScript] 표준 개발 방식을 따라가보자. 현재 ES 표준은 다음 버전을 출시했습니다:

ES3
ES4(내부, 공식적으로 출시되지 않음)
ES5(전체 브라우저 지원)
ES6(일반적으로 사용됨, 현재 주류 버전: 웹팩 패키징이 ES5가 됨) 지원)
ES7
ES8
ES9(초안 단계)

차이점은 새로운 기능이 점차 추가된다는 점입니다.
TypeScript Microsoft의 표준
TypeScript는 Microsoft에서 개발한 무료 오픈 소스 프로그래밍 언어입니다. 이는 JavaScript의 상위 집합이며 기본적으로 선택적 정적 타이핑 및 클래스 기반 객체 지향 프로그래밍을 언어에 추가합니다. Anders Helsberg(C#, Delphi, TypeScript의 아버지, .NET 창시자)가 주도합니다. 이 언어의 특징은 ES의 기능 외에도 표준 범위에 포함되지 않는 많은 새로운 기능도 통합한다는 것입니다. 따라서 많은 브라우저는 TypeScript 구문을 직접 지원할 수 없으며 컴파일(JS로 컴파일)해야 합니다. 브라우저에서 올바르게 실행되기 전에.

JavaScript 프레임워크

JQuery: 잘 알려진 JavaScript 라이브러리입니다. 장점은 DOM 작업을 단순화한다는 것입니다. 단점은 DOM 작업이 너무 빈번하여 프런트엔드 관점에서 볼 때에만 사용된다는 것입니다. IE6, 7, 8과 호환
Angular: Google에서 인수 프론트엔드 프레임워크는 Java 프로그래머 그룹에 의해 개발되었으며 백엔드 MVC 모델을 프론트엔드로 이동하고 개념을 추가하는 것이 특징입니다. 모듈식 개발. Microsoft와 협력하여 TypeScript 구문 개발을 채택합니다. 백엔드 프로그래머에게는 적합하지 않지만 가장 큰 단점은 다음과 같습니다. 버전 반복이 무리(예: 1세대 –> 2세대, 이름만 빼면 기본적으로 2가지입니다. 블로그 게시 시점에 Angular6가 출시되었습니다)
React: Facebook에서 제작, 고성능 JS 프론트엔드 프레임워크는 실제 DOM 작업을 줄이고 메모리에서 DOM 작업을 시뮬레이션하기 위해 새로운 개념인 [가상 DOM]을 제안하여 프론트엔드 렌더링 효율성을 효과적으로 향상시키는 것이 특징입니다. 추가 학습 필요 [JSX] 언어
Vue: 진보적인 JavaScript 프레임워크. 프로그레시브는 모듈 개발, 라우팅, 상태 관리 및 기타 새로운 기능과 같은 새로운 기능을 점진적으로 구현하는 것을 의미합니다. Angular(모듈화)와 React(가상 DOM)의 장점을 결합한 것이 특징입니다.
Axios: Vue의 경계가 매우 명확하기 때문에 DOM을 처리하는 것입니다. 이때 필요한 통신 기능 서버와 상호 작용하기 위해 추가적인 통신 프레임워크가 사용됩니다. 물론 jQuery에서 제공하는 AJAX 통신 기능을 사용하도록 직접 선택할 수도 있습니다.

2. 프론트엔드 개발 내역

2.1, UI 프레임워크

Ant-Design: Alibaba에서 제작, React UI 프레임워크 기반
ElementUI, iview, ice: Ele.me에서 제작, Vue 기반 UI 프레임워크
BootStrap: 다음을 위한 오픈 소스 툴킷 Teitter가 출시한 프론트엔드 개발
AmazeUI: HTML5 크로스스크린 프론트엔드 프레임워크인 "Meizi UI"라고도 함

2.2, JavaScript 구축 도구

Babel: JS 컴파일 도구, 주로 새로운 ES 기능에 사용됨 TypeScript 컴파일
WebPack: 모듈 패키저, 주요 기능은 패키징, 압축, 병합 및 순차적 로딩과 같은 브라우저가 지원하지 않습니다

참고: 위의 지식 포인트는 WebApp 개발에 필요한 모든 기술을 정리했습니다

2.3, 세 끝은 같습니다

하이브리드 개발(Hybrid App)

주된 목적은 a를 달성하는 것입니다. 코드 집합의 세 터미널이 통합됩니다(PC, Android: .apk, iOS: .ipa). 장치의 기본 하드웨어(예: 센서, GPS, 카메라 등)에 호출할 수 있습니다. 두 가지 주요 패키징 방법이 있습니다.

클라우드 패키징: HBuild -> DCloud에서 제작; 로컬 패키징: Cordova(이전 PhoneGap)

WeChat 애플릿

자세한 내용은 WeChat 공식 웹사이트를 참조하세요. 다음은 WeChat 애플릿의 UI 개발을 용이하게 하는 프레임워크입니다: WeUI

2.4, 백엔드 기술

프론트엔드 인력도 개발을 용이하게 하기 위해 특정 백엔드 기술을 숙달해야 합니다. 그러나 우리 Java 백엔드 인력은 백엔드 지식 시스템이 매우 크고 복잡하다는 것을 알고 있으므로 프론트엔드를 용이하게 하기 위해서는 백엔드 애플리케이션을 개발하는 인력이 Node JS와 같은 기술이 등장했습니다. Node JS 작성자는 Node JS를 포기했다고 주장하며(아키텍처가 잘 안되고 노드 모듈이 무거워서 작성자가 기분이 나빠질 수 있다며) 새로운 아키텍처 개발에 착수했습니다. 확실히 프레임워크와 프로젝트 관리 도구가 필요합니다. Node JS 프레임워크와 프로젝트 관리 도구는 다음과 같습니다.

Express: Node JS 프레임워크

NPM: Maven과 유사한 포괄적인 프로젝트 관리 도구
2.5의 관계와 유사하게 주류 프런트엔드 프레임워크

Vue.js

iView

iview는 강력한 Vue 기반 UI 라이브러리가 있습니다. Element UI 컴포넌트보다 더 발전된 실용적인 기본 컴포넌트가 많이 있으며, 주로 PC 인터페이스용 미드엔드 및 백엔드 제품을 제공합니다. 단일 파일을 활용한 Vue 컴포넌트 개발 모델은 npm+webpack+babel 기반으로 개발되었으며, ES 2015 고품질, 풍부한 기능, 친숙한 API를 지원하며 공간을 자유롭고 유연하게 활용합니다.

공식 웹사이트 주소

iview-admin
비고: 프론트 엔드 주류 프레임워크이며 선택 시 고려할 수 있는 주요 특징은 더 많은 모바일 터미널을 지원한다는 것입니다

Element. UI

Element는 Ele.me의 프런트엔드 오픈 소스에서 관리하는 Vue UI 구성 요소 라이브러리로, 완전한 구성 요소 세트를 갖추고 있으며 기본적으로 백엔드에 필요한 모든 구성 요소를 다루고 있습니다. 문서에서는 이에 대해 자세히 설명하고 풍부한 예제를 제공합니다. 주로 PC측 페이지 개발에 사용되며, 비교적 품질이 좋은 Vue UI 컴포넌트 라이브러리입니다. ·공식 웹사이트 주소

·Git 허브

·vue-element-admin

참고: 주류 프런트엔드 프레임워크에 속하며 선택 시 고려할 수 있는 주요 특징은 더 많은 데스크톱 지원

입니다. ICE

Feibing은 React/Angular/Vue를 기반으로 하는 Alibaba 팀의 미드 및 백엔드 애플리케이션 솔루션으로 이미 Alibaba 내 거의 모든 BU의 270개 이상의 프로젝트에서 사용되고 있습니다. Feibing에는 설계부터 개발까지의 완전한 링크가 포함되어 있어 사용자가 자신만의 미드엔드 및 백엔드 애플리케이션을 신속하게 구축할 수 있습니다.

공식 홈페이지 주소입니다.

Git 허브

참고: 주요 구성 요소는 여전히 React를 기반으로 합니다. 2019년 2월 17일 기준으로 Vue에 대한 지원은 아직 완료되지 않아 블로그가 업데이트될 예정입니다

. VantUI

Vant UI는 칭찬받는 프런트엔드입니다. Youzan의 통합 사양을 기반으로 팀이 구현한 Vue 컴포넌트 라이브러리는 UI 기본 컴포넌트와 비즈니스 컴포넌트의 완전한 세트를 제공합니다. Vant를 통해 통일된 스타일의 페이지를 빠르게 구축하고 개발 효율성을 높일 수 있습니다.

공식 홈페이지 주소
Github

AtUI

at-ui는 Vue 2.x 기반의 프론트엔드 UI 컴포넌트 라이브러리로 주로 PC 웹사이트 제품의 신속한 개발에 사용됩니다. npm+webpack+babel 프론트엔드 개발 워크플로우 세트를 제공하며, CSS 스타일은 독립적이며, 다른 프레임워크를 사용해도 통일된 UI 스타일을 유지할 수 있습니다.
·공식 웹사이트 주소
·Git 허브

Cube Ul

cube-ui는 Didi 팀에서 개발한 Vue js를 기반으로 한 정교한 모바일 구성 요소 라이브러리입니다. 온디맨드 도입 및 사후 컴파일을 지원하고, 가볍고 유연하며, 강력한 확장성을 가지며, 기존 구성 요소를 기반으로 2차 개발을 쉽게 구현할 수 있습니다.

공식 웹사이트 주소
Github

하이브리드 개발

Flutter

Flutter는 Google의 모바일 UI 프레임워크로, 매우 짧은 시간에 Android 및 iOS에서 고품질 네이티브 수준 애플리케이션을 구축할 수 있습니다. Flutter는 기존 코드와 함께 작동하며 전 세계 개발자와 조직에서 사용되며 Flutter는 무료 오픈 소스입니다.

공식 웹사이트 주소
Github
설명: Google에서 제작한 주요 기능은 네이티브 APP 애플리케이션을 빠르게 구축하는 것입니다. 하이브리드 애플리케이션을 수행하는 경우 이 프레임워크는 필수 프레임워크입니다

lonic

lonic은 CSS 프레임워크이자 Javascript UI 라이브러리입니다. lonic은 현재 가장 유망한 HTML 5 모바일 애플리케이션 개발 프레임워크입니다. 개발자가 강력한 애플리케이션을 개발하는 데 도움이 되는 다양한 UI 구성 요소를 제공하는 SASS를 통해 애플리케이션을 구축하세요. JavaScript MV VM 프레임워크와 Angular JS/Vue를 사용하여 애플리케이션을 향상시킵니다. 양방향 데이터 바인딩을 제공하므로 웹 및 모바일 개발자가 일반적으로 선택합니다.

공식 홈페이지 주소

·공식 문서
·Git 허브

WeChat applet

mpvue

mpvue는 Meituan에서 Vue.js를 이용해 개발한 작은 프로그램입니다. -end 프레임워크는 현재 WeChat 미니 프로그램, Baidu 스마트 미니 프로그램, Toutiao 미니 프로그램 및 Alipay 미니 프로그램을 지원합니다. 프레임워크는 Vue.js를 기반으로 하며, 수정된 런타임 프레임워크인 runtime과 코드 컴파일러 compiler를 구현하여 소규모로 실행할 수 있도록 하였습니다. 프로그램 환경을 통해 소규모 프로그램 개발을 위한 Vue.js 개발 경험을 소개합니다. Vue.js开发小程序的前端框架，目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于Vue.js，修改了的运行时框架runtime和代码编译器compiler实现，使其可运行在小程序环境中，从而为小程序开发引入了Vue.js开发体验。
·官网地址
·Git hub
备注：完备的Vue开发体验，井且支持多平台的小程序开发，推荐使用

WeUI

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

官网地址
Github

三、了解前后分离的演变史

为什么需要前后分离

3.1、后端为主的MVC时代

为了降低开发的复杂度，以后端为出发点，比如：Struts、Spring MVC等框架的使用，就是后端的MVC时代；
以SpringMVC ·공식 웹사이트 주소
·Git 허브

설명: 완전한 Vue 개발 경험 및 다중 플랫폼 미니 프로그램 개발 지원 🎜🎜🎜🎜WeUI🎜🎜🎜WeUI는 WeChat과 일치하는 기반 세트입니다. 기본 시각적 경험 스타일 라이브러리는 WeChat 웹 페이지 및 WeChat 미니 프로그램을 위해 WeChat 공식 디자인 팀에서 맞춤 제작하여 사용자의 사용 인식을 더욱 통일시킵니다. 버튼, 셀, 대화 상자, 토스트, 기사, 아이콘 등 다양한 요소가 포함되어 있습니다. 🎜🎜🎜공식 홈페이지 주소🎜🎜Github🎜🎜

3. 전후 분리의 진화 역사를 이해하세요

🎜전면 분리가 필요한 이유🎜

3.1. - MVC 시대

🎜 개발의 복잡성을 줄이기 위해 백엔드를 기반으로 합니다. 예를 들어 Struts, Spring MVC 및 기타 프레임워크의 사용은 백엔드의 MVC 시대입니다. 예를 들어 SpringMVC 프로세스: 🎜🎜🎜

프런트 엔드 컨트롤러(Dispatcher Servlet)에 대한 요청 시작Dispatcher Servlet)
前端控制器请求HandlerMapping查找Handler，可以根据xml配置、注解进行查找
处理器映射器HandlerMapping向前端控制器返回Handler
前端控制器调用处理器适配器去执行Handler
处理器适配器去执行Handler
Handler执行完成给适配器返回ModelAndView
处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一个底层对象，包括Model和View
前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(JSP)
视图解析器向前端控制器返回View
前端控制器进行视图渲染，视图渲染将模型数据(在ModelAndView对象中)填充到request

Handler

HandlerMapping

xml

프로세서 매퍼 HandlerMapping은 Handler를 프런트엔드 컨트롤러에 반환프론트엔드 컨트롤러는 프로세서 어댑터를 호출하여 Handler

를 실행합니다. 프로세서 어댑터는 HandlerHandler를 실행하고 어댑터 ModelAndView로 반환됩니다. code> 실행 완료 후
프로세서 어댑터가 프런트 엔드를 제어합니다. 프로세서는 ModelAndView를 반환하고, ModelAndView는 SpringMvc 프레임워크의 기본 객체입니다. , 모델 및 뷰 코드>
- 프런트 엔드 컨트롤러는 뷰 파서에 뷰 구문 분석을 수행하도록 요청하고 이를 실제 뷰(JSP) 뷰 파서는 프런트엔드 컨트롤러에 <code>View
- 프런트엔드 컨트롤러는 뷰 렌더링을 수행하고, 뷰 렌더링은 모델 데이터를 채웁니다( ModelAndView 객체)를 request 필드에 추가합니다
프런트엔드 컨트롤러는 결과로 사용자에게 응답합니다.
장점
MVC는 다음과 같은 작업을 수행할 수 있는 매우 훌륭한 협업 모델입니다. 코드 결합을 효과적으로 줄이고 개발자가 코드를 구조적으로 작성해야 하는 위치를 이해할 수 있도록 합니다. 뷰를 더욱 순수하게 만들기 위해 Thyme leaf 및 Free marker와 같은 템플릿 엔진을 사용하여 Java 코드가 템플릿에 작성되는 것을 방지하고 프런트엔드와 백엔드 간의 작업 구분을 더 명확하게 만들 수도 있습니다.
단점

프런트엔드 개발은 개발 환경에 크게 의존하며 개발 효율성이 낮습니다. 이 아키텍처에는 프런트엔드 및 백엔드 협업 모드가 두 가지 있습니다.

첫 번째는 DEMO를 작성하는 것입니다. 작성 후 백엔드에서 템플릿을 설정하도록 합니다. 장점은 DEMO를 로컬에서 개발할 수 있고 매우 효율적이라는 것입니다. 단점은 백엔드에서 템플릿을 설정해야 하는데, 설정이 완료된 후 왕복 통신 및 조정 비용이 발생한다는 점입니다.

또 다른 협업 모드는 브라우저 측의 모든 개발과 서버 측의 뷰 레이어를 담당한다는 것입니다. UI 관련 코드를 프론트엔드에서 작성할 수 있다는 장점이 있고, 백엔드에서는 크게 신경쓰지 않아도 된다는 점이 단점입니다. 그리고 환경은 프론트엔드 개발의 효율성에 영향을 미치는 중요한 요소가 되었습니다.
얽힌 프런트엔드 및 백엔드 책임: 템플릿 엔진은 강력하며 얻은 컨텍스트 변수를 통해 다양한 비즈니스 로직을 계속 구현할 수 있습니다. 이런 식으로 프론트엔드가 약한 한, 백엔드는 템플릿 레이어에 많은 비즈니스 코드를 작성해야 하는 경우가 많으며, 페이지 라우팅과 같은 컨트롤러 기능에도 큰 회색 영역이 있습니다. 프런트엔드에서 가장 우려해야 할 사항이지만 백엔드에서 구현됩니다. Controller 자체와 Model이 얽히는 경우가 많고, 이를 악물게 만드는 비즈니스 코드가 Controller 레이어에 나타나는 경우가 많습니다. 이러한 문제가 모두 프로그래머의 자질 때문이라고는 할 수 없습니다. 그렇지 않으면 JSP로 충분합니다.
프런트엔드의 한계: 성능 최적화를 프런트엔드에서만 하면 공간이 매우 제한적이어서 백엔드 협력이 필요한 경우가 많지만, 백엔드 프레임워크의 한계로 인해 성능을 최적화하기 위해 [Comet] 및 [Big Pipe]와 같은 기술 솔루션을 사용하기가 어렵습니다.
참고: 초기 JSP 및 PHP를 포함하여 이 기간(2005년 이전)은 웹 1.0 시대라고 할 수 있습니다. 여기서 말하고 싶은 것이 있습니다. Java 초보자라면 JSP와 같은 일부 오래된 기술을 진지하게 받아들이지 마십시오. 시대가 변하고, 기술도 변하고, 모든 것이 변하고 있기 때문입니다(Zuckerberg(유명한 속담: 유일한 상수 인용) 변화 그 자체입니다); 우리가 실습을 위해 대학에 갈 때 일부 학생들은 우리가 유용한 정보에 대해 이야기하지 않는다고 생각할 것입니다. 실제로는 귀하의 유용한 정보라고 말할 수 없습니다. 인지는 시장에 좋다고 하더군요

🎜3.2 AJAX를 기반으로 한 SPA 시대🎜🎜2005년에 A OAX(Asynchronous JavaScript And XML, Asynchronous JavaScript and XML, 오래된 기술과 새로운 사용법)이 공식적으로 제안되어 사용되기 시작했습니다. CDN이 정적 자원 저장소로 사용되면서 SPA(Single Page Application) 단일 페이지 애플리케이션 시대가 나타났습니다. 🎜🎜🎜🎜장점🎜🎜 이 모드에서는 **프론트엔드와 백엔드 간의 업무 분담이 매우 명확하며, 프론트엔드와 백엔드 간의 핵심 협업 포인트는 AJAX 인터페이스입니다. **아주 멋진 것 같지만, 돌이켜보면 JSP 시대와 크게 다르지 않습니다. 서버측 JSP에서 브라우저측 JavaScript로 복잡성이 옮겨갔고, 브라우저측도 매우 복잡해졌습니다. Spring MVC와 유사하게 🎜이 시대에는 브라우저 측 계층 아키텍처가 나타나기 시작했습니다🎜: 🎜🎜🎜 단점🎜

프런트엔드 및 백엔드 인터페이스에 대한 규칙: 백엔드 인터페이스가 엉망이고 백엔드 비즈니스 모델이 충분히 안정적이지 않다면 프런트엔드 개발은 많은 팀에게 매우 고통스러울 것입니다. 인터페이스 규칙, 인터페이스 플랫폼 등을 통해 비슷한 시도를 해왔습니다. 백엔드와 함께 규정된 인터페이스 규칙을 사용하면 데이터를 시뮬레이션하는 데에도 사용할 수 있으므로 인터페이스에 동의한 후 프런트엔드와 백엔드가 효율적인 병렬 개발을 달성할 수 있습니다.
프런트 엔드 개발의 복잡성 제어: SPA 애플리케이션은 대부분 기능적이고 대화형이며 JavaScript 코드가 100,000줄을 초과하는 것이 일반적입니다. 대량의 JS 코드 구성, 뷰 레이어 바인딩 등은 쉬운 작업이 아닙니다.

3.3, 프론트엔드 중심의 MV* 시대

여기서 MV* 모델은 다음과 같습니다.

MVC(주로 동기식 통신): Model, View, Controller
MVP(주로 비동기식 통신): Model , View, Presenter
MVVM(주로 비동기 통신): Model, View, View Model 프론트엔드 개발의 복잡성을 줄이기 위해 다음과 같은 수많은 프론트엔드 프레임워크가 등장했습니다. 이러한 프레임워크의 일반적인 원칙은 먼저 템플릿, 컨트롤러, 모델 등 유형별로 계층화한 다음 아래와 같이 계층으로 나누는 것입니다. 백엔드 책임은 매우 명확합니다Angular JS、React、Vue.js、Ember JS: 프런트엔드는 브라우저 측에서 작동하고 백엔드는 서버 측에서 작동합니다. 명확한 업무 분담을 통해 병렬 개발이 가능하고, 테스트 데이터의 시뮬레이션이 어렵지 않으며, 프런트엔드를 로컬에서 개발할 수 있습니다. 백엔드는 비즈니스 로직 처리에 집중하고 RESTful 및 기타 인터페이스를 출력할 수 있습니다.

프런트엔드 개발의 복잡성은 제어 가능합니다: 프런트엔드 코드는 무겁지만 합리적인 레이어링을 통해 프런트엔드 코드가 해당 역할을 수행할 수 있습니다. 이는 템플릿 기능 선택만큼 간단하게 주의할 점이 많습니다. 더 강력할수록 더 좋습니다. 제한 사항은 무엇인지, 남은 자유는 무엇인지, 코드 구성 방법, 이 모든 디자인을 설명하려면 책 한 권이 필요할 것입니다.

배포는 상대적으로 독립적입니다: 제품 경험을 빠르게 향상시킬 수 있습니다. 단점

완전 비동기식이므로 SEO에 좋지 않습니다. 서버 측에서 동기 렌더링을 위해 다운그레이드 솔루션을 구현해야 하는 경우가 많습니다.
SPA는 모든 요구 사항을 충족할 수 없으며 여전히 다중 페이지 애플리케이션이 많이 있습니다. URL 디자인에는 백엔드의 협력이 필요하며 프런트엔드에서 완전히 제어할 수 없습니다.
3.4, Node JS가 가져온 풀스택 시대프론트엔드 중심의 MV* 모델은 수많은 문제를 해결했지만 위에서 언급한 것처럼 여전히 부족한 점이 많습니다. Node JS의 등장으로 JavaScript는 서버 측에서 실행되는 기능을 갖기 시작했습니다. 이는 새로운 R&D 모델이 있을 수 있음을 의미합니다.
이 R&D 모델에서는 프런트엔드와 백엔드의 책임이 명확합니다. 프런트엔드의 경우 두 UI 레이어가 각각의 임무를 수행합니다.
- 프런트 엔드 Ul 레이어는 브라우저 레이어의 표시 로직을 처리합니다. CSS를 통해 스타일을 렌더링하고, JavaScript를 통해 대화형 기능을 추가하고, HTML 생성도 애플리케이션 시나리오에 따라 이 레이어에 배치할 수 있습니다.
- 백엔드 Ul 계층은 라우팅, 템플릿, 데이터 수집, 쿠키 등을 처리합니다. 라우팅을 통해 프런트 엔드는 최종적으로 URL 디자인을 독립적으로 제어할 수 있으므로 단일 페이지 애플리케이션이든 다중 페이지 애플리케이션이든 프런트 엔드에서 자유롭게 제어할 수 있습니다. 백엔드는 마침내 프레젠테이션에 대한 강한 집중을 없애고 대신 비즈니스 로직 계층 개발에 집중할 수 있습니다.
  Node를 통해 WebServer 레이어도 JavaScript 코드이므로 SEO가 필요한 장면을 서버 측에서 동기식으로 렌더링할 수 있습니다. 서버 측. 이전 모델의 단점은 이 모델을 통해 거의 완벽하게 해결될 수 있습니다.
  JSP 모드와 비교하면 풀스택 모드는 회귀인 것처럼 보이며 실제로는 원래 개발 모델로의 복귀이지만 나선형 복귀입니다.
  Node JS를 기반으로 한 풀 스택 모델은 여전히 많은 과제에 직면해 있습니다.
- 프런트 엔드는 서버 측 프로그래밍을 더 잘 이해해야 합니다. 예를 들어, TCP/IP와 같은 네트워크 지식을 숙지해야 합니다.
- Node JS 레이어와 Java 레이어 간의 효율적인 통신. Node JS 모드에서는 모든 것이 서버 측에 있습니다. RESTful HTTP 통신은 SOAP 및 기타 방법을 통한 통신이 더 효율적일 수 있습니다. 모든 것을 확인해야 합니다.
- 부서와 운영 및 유지보수 수준에 대한 능숙한 이해를 위해서는 더 많은 지식 포인트와 실무 경험이 필요합니다.
- 많은 역사적 문제를 전환하는 방법. 이것이 아마도 가장 큰 장애물일 것이다.
  참고: 이것을 보고 많은 학생들이 제가 수업 시간에 항상 이렇게 말하는 이유를 이해할 것이라고 믿습니다. "프론트엔드가 백엔드를 배우는 것은 어렵지만 우리 백엔드 프로그래머는 무엇이든 배우기 쉽습니다." "; 이는 우리 백엔드 프로그래머가 상대적으로 완전한 지식 시스템을 갖추고 있기 때문입니다.
  풀스택!
3.5.요약

요약하자면, 모델이건 기술이건, 좋고 나쁨은 없고, 단지 프론트의 개발 아이디어가 적합할 뿐입니다. 후면 분리는 주로 Soc(관심사 분리 원칙)을 기반으로 하며 위 모델은 모두 전면과 후면의 책임을 보다 명확하게 하고 업무 분담을 보다 합리적이고 효율적으로 만듭니다. Soc(关注度分离原则)，上面种种模式，都是让前后端的职责更清晰，分工更合理高效。

四、第一个Vue程序

4.1、什么是MVVM

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

4. 최초의 Vue 프로그램
4.1. MVVM이란
MVVM(Model-View-ViewModel)은 Microsoft WPF에서 개발한 소프트웨어 디자인 패턴입니다. 과거) 이 기술은 건축가인 Ken Cooper와 Ted Peters(데스크탑 애플리케이션 개발용)와 Silverlight(간단히 말하면 브라우저에서 WPF를 실행하는 Java 애플릿과 유사)에 의해 개발된
이벤트 기반 프로그래밍 방법입니다. 사용자 인터페이스를 단순화합니다
. John Gossman(WPF 및 Silverlight 설계자이기도 함)이 2005년 자신의 블로그에 게시했습니다.
- MVVM은 클래식 MVC(Model-View-Controller) 패턴에서 파생되었습니다. MVVM의 핵심은 데이터를 더 쉽게 관리하고 사용할 수 있도록 모델의 데이터 개체를 변환하는 ViewModel 계층입니다. 그 기능은 다음과 같습니다.
- 아래쪽은 데이터에 대한 인터페이스 요청을 통해 모델 레이어와 상호 작용합니다.
- MVVM은 상당히 성숙되었으며 주로 사용되지만 네트워크 애플리케이션 개발에만 사용되는 것은 아닙니다. 현재 널리 사용되는 MVVM 프레임워크에는 Vue.js, Anfular JS
- 4.2가 있습니다. MVVM을 사용하는 이유는 MVC 모드와 동일합니다. 주요 목적은 뷰를 분리하는 것입니다. (View)와 모델(Model)에는 몇 가지 주요 장점이 있습니다
낮은 결합
: View(View)는 Model과 독립적으로 변경 및 수정할 수 있고, ViewModel은 다른 View에 바인딩될 수 있으며, View가 변경되면 Model은 변경, 모델이 변경될 때 뷰는 변경되지 않은 상태로 유지될 수도 있습니다.
Reusable
: ViewModel에 일부 뷰 로직을 넣고 많은 뷰에서 이 뷰 로직을 재사용할 수 있습니다.

독립적 개발: 개발자는 비즈니스 로직 및 데이터(ViewMode) 개발에 집중할 수 있고, 디자이너는 페이지 디자인에 집중할 수 있습니다.

Testable
: 인터페이스는 항상 테스트하기 어려웠지만 이제 ViewModel에 대한 테스트를 작성할 수 있습니다.
🎜🎜🎜 (1) View🎜🎜🎜View는 사용자 인터페이스인 뷰 레이어입니다. 프론트엔드는 주로 HTH L과 csS로 구축되었으며 vi eu to del 또는 hodel 레이어의 데이터를 보다 편리하게 표시하기 위해 FreeMarker, Thyme leaf 등 Vue.js, Angular JS, EJS 등과 같은 주요 MV VM 프레임워크에도 사용자 인터페이스 구축을 위한 자체 템플릿 언어가 내장되어 있습니다. 🎜🎜🎜 (2) 모델🎜🎜🎜모델은 데이터 모델을 말하며, 일반적으로 주로 데이터베이스 시스템을 중심으로 백엔드에서 수행되는 다양한 비즈니스 로직 처리 및 데이터 조작을 의미합니다. 여기서 어려운 점은 주로 프런트 엔드와 통합 인터페이스 규칙에 동의해야 한다는 것입니다🎜🎜🎜 (3) ViewModel🎜🎜
ViewModel은 프런트엔드 개발자 조직에서 생성하고 유지 관리하는 뷰 데이터 계층입니다. 이 계층에서는 프런트엔드 개발자가 백엔드에서 얻은 모델 데이터를 변환하고 2차 캡슐화를 수행하여 뷰 계층의 기대치를 충족하는 뷰 데이터 모델을 생성합니다.
뷰 모델에 의해 캡슐화된 데이터 모델에는 뷰의 상태와 동작이 포함되는 반면 모델 레이어의 데이터 모델에는 상태만 포함된다는 점에 유의해야 합니다.
- 예를 들어 페이지의 이 부분에 표시되는 내용 , 페이지의 해당 부분에 표시되는 내용 등 보기 상태(표시)에 속합니다
- 페이지가 로드될 때 발생하는 일, 이 영역을 클릭하면 발생하는 일, 이 영역을 스크롤할 때 발생하는 일, 이 모든 것이 속합니다. 동작 보기(상호작용)
View 상태와 동작은 모두 View Model에 캡슐화됩니다. 이러한 종류의 캡슐화를 통해 뷰 모델은 뷰 계층을 완벽하게 설명할 수 있습니다. 양방향 바인딩 구현으로 인해 View Model의 내용이 View 레이어에 실시간으로 표시됩니다. 이는 프런트 엔드 개발자가 더 이상 DOM을 조작하여 뷰를 비효율적이고 번거롭게 업데이트할 필요가 없기 때문에 매우 흥미롭습니다.
MVVM 프레임워크는 이미 가장 지저분하고 가장 피곤한 부분을 처리했습니다. 개발자는 뷰 모델만 처리하고 유지관리하면 그에 따라 자동으로 업데이트되어 이벤트 중심 프로그래밍이 실현됩니다. . 事件驱动编程。
View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

4.3、Vue

Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。

（1）MVVM模式的实现者
- Model：模型层，在这里表示JavaScript对象
- View：视图层，在这里表示DOM(HTML操作的元素)
- ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了， Vue.js就是一个MV VM的实现者，他的核心就是实现了DOM监听与数据绑定

（2）为什么要使用Vue.js
- 轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
- 移动优先。更适合移动端，比如移动端的Touch事件
- 易上手，学习曲线平稳，文档齐全
- 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
- 开源，社区活跃度高
4.4、第一个Vue程序

【说明】IDEA可以安装Vue的插件!
注意：Vue不支持IE 8及以下版本，因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

（1）下载地址
- 开发版本
  - 包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
  - 删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js
- CDN
  - <script src="%E2%80%9Chttps://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js%E2%80%9D"></script>
  - <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
（2）代码编写

Vue.js的核心是实现了MVVM模式，她扮演的角色就是View Model层，那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：
1、创建一个HTML文件
```
nbsp;html>
    <meta>
    <title>Title</title>
```
2、引入Vue.js
```
<script></script>12
```
3、创建一个Vue实例
```
<script>
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message:"hello,vue!"
        }
    });</script>
```
说明：
- el: '#vue'：绑定元素的ID
- data:{message:'Hello Vue!'} View 레이어는 Model 레이어의 데이터를 표시하지 않지만 ViewModel의 데이터는 모델 레이어 상호 작용, 이는 뷰 레이어와 모델 레이어를 완전히 분리합니다. 이 분리는 프런트엔드 및 백엔드 분리 솔루션 구현에서 중요한 부분입니다.
4.3, Vue

Vue(/vju/로 발음, view와 유사)는 2014년 2월에 출시된 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리(예: vue-router, vue-resource, vue x) 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다.

(1) MVVM 패턴의 구현자
Model: 모델 레이어, 여기서는 JavaScript 객체를 나타냅니다.
View: 뷰 레이어, 여기서는 DOM(HTML 작업 요소)을 나타냅니다.
ViewModel: 뷰와 데이터 미들웨어를 연결합니다. Vue.js는 MVVM🎜🎜🎜의 뷰 모델 레이어 구현자입니다. MVVM 아키텍처에서는 데이터와 뷰가 ViewModel을 통해서만 통신할 수 있으며, 뷰 모델은 Observer🎜🎜🎜ViewModel을 정의합니다. 데이터의 변화를 관찰하고 뷰에 해당하는 콘텐츠를 업데이트할 수 있습니다🎜🎜ViewModel은 뷰의 변화를 모니터링하고 데이터에 변경 사항을 알릴 수 있습니다🎜🎜🎜이 시점에서 우리는 Vue.js가 MV VM의 구현자임을 이해합니다. DOM 모니터링 및 데이터 바인딩을 구현하는 것입니다🎜🎜🎜(2) Vue.js를 사용하는 이유🎜🎜🎜🎜가벼움과 작은 크기가 중요한 지표입니다. Vue.js는 압축 후 20kb를 넘었습니다(Angular는 압축 후 56kb 이상, React는 압축 후 44kb 이상)🎜🎜모바일 우선. 모바일 단말기의 Touch 이벤트 등 모바일 단말기에 더 적합🎜🎜사용하기 쉽고, 학습 곡선이 원활하며, 문서화도 완벽합니다.🎜🎜Angular(모듈화)와 React(가상 DOM)의 장점을 흡수하여 고유한 고유성을 갖습니다. 계산된 속성 🎜🎜오픈 소스, 활발한 커뮤니티🎜🎜
4.4, 최초의 Vue 프로그램
🎜[설명] IDEA는 Vue 플러그인을 설치할 수 있습니다!🎜 참고: Vue는 IE를 지원하지 않습니다. Vue는 IE 8이 에뮬레이트할 수 없는 ECMAScript 5의 기능을 사용하기 때문에 Vue는 8 이하 버전을 사용합니다. 그러나 모든 ECMAScript 5 호환 브라우저를 지원합니다. 🎜🎜🎜 (1) 다운로드 주소 🎜🎜🎜🎜 개발 버전 🎜🎜 전체 경고 및 디버그 모드 포함: https://yuejs.org/js/vue.js 🎜🎜제거된 경고, 30.96KB min+gzip: https :/ /vuejs.org/js/vue.min.js🎜🎜🎜🎜CDN🎜🎜

Vue의 가장 상세한 지식과 노트

1. 프런트 엔드 핵심 분석

1.1. 개요

1.2, 세 가지 프런트엔드 요소

1.3, 구조 레이어 (HTML)

1.4 프리젠테이션 레이어(CSS)

1.5. 동작 레이어(JavaScript)

2. 프론트엔드 개발 내역

2.1, UI 프레임워크

2.2, JavaScript 구축 도구

2.3, 세 끝은 같습니다

三、了解前后分离的演变史

3.1、后端为主的MVC时代

3. 전후 분리의 진화 역사를 이해하세요

3.1. - MVC 시대

3.3, 프론트엔드 중심의 MV* 시대

3.5.요약

四、第一个Vue程序

4.1、什么是MVVM

4. 최초의 Vue 프로그램

4.3、Vue

4.4、第一个Vue程序

4.3, Vue

4.4, 최초의 Vue 프로그램