이 글은 Vue에 대한 가장 완전하고 상세한 지식을 제공합니다. 프론트엔드를 이해하고 마스터하는데 도움이 되기를 바랍니다!
Soc 원칙: 관심사 분리 원칙
Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두어 타사 라이브러리나 기존 라이브러리와 쉽게 통합할 수 있습니다. 프로젝트.
HTML + CSS + JS: 보기: 给用户看，刷新后台给的数据
네트워크 통신: axios
페이지 점프: vue-router
상태 관리: vuex
Vue-UI: ICE, Element UI
너무 단순, 약간
CSS 캐스케이딩 스타일 시트는 프로그래밍 언어가 아닌 마크업 언어이므로 변수, 참조 등을 사용자 정의할 수 없습니다. , 구문 지원이 없으며 주요 결함은 다음과 같습니다.
CSS 전처리기란 무엇입니까
CSS 전처리기는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가하고 CSS를 대상으로 파일을 생성한 다음 개발자만 처리하는 것입니다. CSS를 코딩하려면 이 언어를 사용해야 합니다. 이해하기 쉬운 단어로 번역하면 "특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 컴파일러를 통해 일반 CSS 파일로 변환하여 프로젝트에서 사용할 수 있다"라는 뜻입니다.
일반적으로 사용되는 CSS 전처리기는 무엇인가요?
JavaScript는 실행을 위해 클라이언트에 전송되기 전에 소스 코드를 컴파일할 필요가 없습니다. 브라우저 및 브라우저 인터프리터가 실행됩니다.
Native Native JS development
Native JS 개발, 즉 모든 브라우저에서 지원하는 ES라고 불리는 [ECMAScript] 표준 개발 방식을 따라가보자. 현재 ES 표준은 다음 버전을 출시했습니다:
차이점은 새로운 기능이 점차 추가된다는 점입니다.
TypeScript Microsoft의 표준
TypeScript는 Microsoft에서 개발한 무료 오픈 소스 프로그래밍 언어입니다. 이는 JavaScript의 상위 집합이며 기본적으로 선택적 정적 타이핑 및 클래스 기반 객체 지향 프로그래밍을 언어에 추가합니다. Anders Helsberg(C#, Delphi, TypeScript의 아버지, .NET 창시자)가 주도합니다. 이 언어의 특징은 ES의 기능 외에도 표준 범위에 포함되지 않는 많은 새로운 기능도 통합한다는 것입니다. 따라서 많은 브라우저는 TypeScript 구문을 직접 지원할 수 없으며 컴파일(JS로 컴파일)해야 합니다. 브라우저에서 올바르게 실행되기 전에.
JavaScript 프레임워크
참고: 위의 지식 포인트는 WebApp 개발에 필요한 모든 기술을 정리했습니다
하이브리드 개발(Hybrid App)
주된 목적은 a를 달성하는 것입니다. 코드 집합의 세 터미널이 통합됩니다(PC, Android: .apk, iOS: .ipa). 장치의 기본 하드웨어(예: 센서, GPS, 카메라 등)에 호출할 수 있습니다. 두 가지 주요 패키징 방법이 있습니다.
자세한 내용은 WeChat 공식 웹사이트를 참조하세요. 다음은 WeChat 애플릿의 UI 개발을 용이하게 하는 프레임워크입니다: WeUI
2.4, 백엔드 기술
Express: Node JS 프레임워크
iView
iview는 강력한 Vue 기반 UI 라이브러리가 있습니다. Element UI 컴포넌트보다 더 발전된 실용적인 기본 컴포넌트가 많이 있으며, 주로 PC 인터페이스용 미드엔드 및 백엔드 제품을 제공합니다. 단일 파일을 활용한 Vue 컴포넌트 개발 모델은 npm+webpack+babel 기반으로 개발되었으며, ES 2015 고품질, 풍부한 기능, 친숙한 API를 지원하며 공간을 자유롭고 유연하게 활용합니다.
공식 웹사이트 주소
Element. UI
Element는 Ele.me의 프런트엔드 오픈 소스에서 관리하는 Vue UI 구성 요소 라이브러리로, 완전한 구성 요소 세트를 갖추고 있으며 기본적으로 백엔드에 필요한 모든 구성 요소를 다루고 있습니다. 문서에서는 이에 대해 자세히 설명하고 풍부한 예제를 제공합니다. 주로 PC측 페이지 개발에 사용되며, 비교적 품질이 좋은 Vue UI 컴포넌트 라이브러리입니다. ·공식 웹사이트 주소
·Git 허브 ·vue-element-admin
참고: 주류 프런트엔드 프레임워크에 속하며 선택 시 고려할 수 있는 주요 특징은 더 많은 데스크톱 지원
입니다. ICE
Feibing은 React/Angular/Vue를 기반으로 하는 Alibaba 팀의 미드 및 백엔드 애플리케이션 솔루션으로 이미 Alibaba 내 거의 모든 BU의 270개 이상의 프로젝트에서 사용되고 있습니다. Feibing에는 설계부터 개발까지의 완전한 링크가 포함되어 있어 사용자가 자신만의 미드엔드 및 백엔드 애플리케이션을 신속하게 구축할 수 있습니다.
공식 홈페이지 주소입니다.참고: 주요 구성 요소는 여전히 React를 기반으로 합니다. 2019년 2월 17일 기준으로 Vue에 대한 지원은 아직 완료되지 않아 블로그가 업데이트될 예정입니다
. VantUI
Vant UI는 칭찬받는 프런트엔드입니다. Youzan의 통합 사양을 기반으로 팀이 구현한 Vue 컴포넌트 라이브러리는 UI 기본 컴포넌트와 비즈니스 컴포넌트의 완전한 세트를 제공합니다. Vant를 통해 통일된 스타일의 페이지를 빠르게 구축하고 개발 효율성을 높일 수 있습니다.
AtUI
at-ui는 Vue 2.x 기반의 프론트엔드 UI 컴포넌트 라이브러리로 주로 PC 웹사이트 제품의 신속한 개발에 사용됩니다. npm+webpack+babel 프론트엔드 개발 워크플로우 세트를 제공하며, CSS 스타일은 독립적이며, 다른 프레임워크를 사용해도 통일된 UI 스타일을 유지할 수 있습니다.
·공식 웹사이트 주소
·Git 허브
Cube Ul
cube-ui는 Didi 팀에서 개발한 Vue js를 기반으로 한 정교한 모바일 구성 요소 라이브러리입니다. 온디맨드 도입 및 사후 컴파일을 지원하고, 가볍고 유연하며, 강력한 확장성을 가지며, 기존 구성 요소를 기반으로 2차 개발을 쉽게 구현할 수 있습니다.
하이브리드 개발
Flutter
Flutter는 Google의 모바일 UI 프레임워크로, 매우 짧은 시간에 Android 및 iOS에서 고품질 네이티브 수준 애플리케이션을 구축할 수 있습니다. Flutter는 기존 코드와 함께 작동하며 전 세계 개발자와 조직에서 사용되며 Flutter는 무료 오픈 소스입니다.
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等各式元素。
为什么需要前后分离
为了降低开发的复杂度， 以后端为出发点， 比如：Struts、Spring MVC等框架的使用， 就是后端的MVC时代；
以SpringMVC ·공식 웹사이트 주소
·Git 허브
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를 프런트엔드 컨트롤러에 반환프론트엔드 컨트롤러는 프로세서 어댑터를 호출하여 HandlerHandlerHandler를 실행하고 어댑터 ModelAndView로 반환됩니다. code> 실행 완료 후
ModelAndView를 반환하고, ModelAndView는 SpringMvc 프레임워크의 기본 객체입니다. , 모델 및 뷰 코드>JSP) 뷰 파서는 프런트엔드 컨트롤러에 <code>View
ModelAndView 객체)를 request 필드에 추가합니다
또 다른 협업 모드는 브라우저 측의 모든 개발과 서버 측의 뷰 레이어를 담당한다는 것입니다. UI 관련 코드를 프론트엔드에서 작성할 수 있다는 장점이 있고, 백엔드에서는 크게 신경쓰지 않아도 된다는 점이 단점입니다. 그리고 환경은 프론트엔드 개발의 효율성에 영향을 미치는 중요한 요소가 되었습니다.
얽힌 프런트엔드 및 백엔드 책임: 템플릿 엔진은 강력하며 얻은 컨텍스트 변수를 통해 다양한 비즈니스 로직을 계속 구현할 수 있습니다. 이런 식으로 프론트엔드가 약한 한, 백엔드는 템플릿 레이어에 많은 비즈니스 코드를 작성해야 하는 경우가 많으며, 페이지 라우팅과 같은 컨트롤러 기능에도 큰 회색 영역이 있습니다. 프런트엔드에서 가장 우려해야 할 사항이지만 백엔드에서 구현됩니다. Controller 자체와 Model이 얽히는 경우가 많고, 이를 악물게 만드는 비즈니스 코드가 Controller 레이어에 나타나는 경우가 많습니다. 이러한 문제가 모두 프로그래머의 자질 때문이라고는 할 수 없습니다. 그렇지 않으면 JSP로 충분합니다.
프런트엔드의 한계: 성능 최적화를 프런트엔드에서만 하면 공간이 매우 제한적이어서 백엔드 협력이 필요한 경우가 많지만, 백엔드 프레임워크의 한계로 인해 성능을 최적화하기 위해 [Comet] 및 [Big Pipe]와 같은 기술 솔루션을 사용하기가 어렵습니다.
참고: 초기 JSP 및 PHP를 포함하여 이 기간(2005년 이전)은 웹 1.0 시대라고 할 수 있습니다. 여기서 말하고 싶은 것이 있습니다. Java 초보자라면 JSP와 같은 일부 오래된 기술을 진지하게 받아들이지 마십시오. 시대가 변하고, 기술도 변하고, 모든 것이 변하고 있기 때문입니다(Zuckerberg(유명한 속담: 유일한 상수 인용) 변화 그 자체입니다); 우리가 실습을 위해 대학에 갈 때 일부 학생들은 우리가 유용한 정보에 대해 이야기하지 않는다고 생각할 것입니다. 실제로는 귀하의 유용한 정보라고 말할 수 없습니다. 인지는 시장에 좋다고 하더군요
여기서 MV* 모델은 다음과 같습니다.
Angular JS、React、Vue.js、Ember JS: 프런트엔드는 브라우저 측에서 작동하고 백엔드는 서버 측에서 작동합니다. 명확한 업무 분담을 통해 병렬 개발이 가능하고, 테스트 데이터의 시뮬레이션이 어렵지 않으며, 프런트엔드를 로컬에서 개발할 수 있습니다. 백엔드는 비즈니스 로직 처리에 집중하고 RESTful 및 기타 인터페이스를 출력할 수 있습니다. 프런트엔드 개발의 복잡성은 제어 가능합니다
배포는 상대적으로 독립적입니다: 제품 경험을 빠르게 향상시킬 수 있습니다. 단점
요약하자면, 모델이건 기술이건, 좋고 나쁨은 없고, 단지 프론트의 개발 아이디어가 적합할 뿐입니다. 후면 분리는 주로 Soc(관심사 분리 원칙)을 기반으로 하며 위 모델은 모두 전면과 후면의 책임을 보다 명확하게 하고 업무 분담을 보다 합리적이고 효율적으로 만듭니다. Soc(关注度分离原则)，上面种种模式，都是让前后端的职责更清晰，分工更合理高效。
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中的数据对象来让数据变得更容易管理和使用。其作用如下：
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS
이벤트 기반 프로그래밍 방법입니다. 사용자 인터페이스를 단순화합니다
. John Gossman(WPF 및 Silverlight 설계자이기도 함)이 2005년 자신의 블로그에 게시했습니다.Vue.js, Anfular JS
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层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。
（1）MVVM模式的实现者
在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定
（2）为什么要使用Vue.js
【说明】IDEA可以安装Vue的插件!
注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。
（1）下载地址
<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
<!--1.导入Vue.js--><script></script>12
3、创建一个Vue实例
<script>
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});</script>说明：
el: '#vue'：绑定元素的IDdata:{message:'Hello Vue!'} View 레이어는 Model 레이어의 데이터를 표시하지 않지만 ViewModel의 데이터는 모델 레이어 상호 작용, 이는 뷰 레이어와 모델 레이어를 완전히 분리합니다. 이 분리는 프런트엔드 및 백엔드 분리 솔루션 구현에서 중요한 부분입니다. 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)의 장점을 흡수하여 고유한 고유성을 갖습니다. 계산된 속성 🎜🎜오픈 소스, 활발한 커뮤니티🎜🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
