Vue.js

Vue.js
Vue.js
Vue.js Logo 2.svg
원저작자에반 유
초기 릴리즈2014년 2월, 8년 전(2014-02)[1]
안정된 릴리스
3.2.33[2] / 2022년 4월 14일; 3개월 전 (2022년 4월 14일)
저장소
기입처타입 스크립트
크기33.30KB(최소+gzip[citation needed])
유형자바스크립트 프레임워크
면허증.MIT 라이선스[3]
웹 사이트vuejs.org Edit this on Wikidata

Vue.js(일반적으로 Vue라고 불리며 "view"[4]라고 발음)는 사용자 인터페이스와 단일 페이지 애플리케이션을 [10]구축하기 위한 오픈 소스 모델-뷰-뷰 모델 프런트 엔드 JavaScript 프레임워크입니다.그것은 Evan You에 의해 만들어졌고 그와 다른 활동적인 핵심 [11]팀원들이 관리합니다.

개요

Vue.js는 선언적 렌더링과 컴포넌트 구성에 초점을 맞춘 점진적으로 적응하는 아키텍처를 특징으로 합니다.코어 라이브러리는 뷰 레이어에만 [4]초점을 맞춥니다.라우팅, 상태 관리 및 빌드 툴링과 같은 복잡한 애플리케이션에 필요한 고급 기능은 공식적으로 유지관리된 지원 라이브러리와 [12]패키지를 통해 제공됩니다.

Vue.js 에서는,[13] 디렉티브라고 불리는 HTML 어트리뷰트를 사용해 HTML 를 확장할 수 있습니다.디렉티브는 HTML 어플리케이션에 기능을 제공하며 임베디드 디렉티브 또는 사용자 정의 디렉티브 중 하나로 제공됩니다.

역사

Vue는 구글에서 Angular를 사용하여 일한 후 Evan You에 의해 만들어졌다.JS가 여러 프로젝트에 포함되어 있습니다.그는 나중에 자신의 사고 과정을 요약했다. "만약 Angular에 대해 내가 정말 좋아했던 부분을 추출해서 정말 [14]가벼운 것을 만들 수 있다면 어떨까 생각했다."이 프로젝트에 대한 첫 번째 소스 코드 커밋은 2013년 7월 날짜로, Vue는 이듬해 2월에 2014년에 처음 출시되었습니다.

버전 이름은 종종 만화와 애니메이션에서 유래하며, 대부분은 공상과학 장르에 속합니다.

버전

버전 발매일 제목 LTS 종료 판매 종료
3.2 2021년 8월 5일 5쌍둥이[15]
3.1 2021년 6월 7일 명왕성[16]
3.0 2020년 9월 18일 원피스[17]
2.7 2022년 7월 1일 나루토[18] 2023년 12월 31일 2023년 12월 31일
2.6 2019년 2월 4일 마크로스[19] 2022년 3월 18일 2023년 9월 18일
2.5 2017년 10월 13일 레벨 E[20]
2.4 2017년 7월 13일 킬라킬[21]
2.3 2017년 4월 27일 죠죠의 기묘한 모험[22]
2.2 2017년 2월 26일 이니셜 D[23]
2.1 2016년 11월 22일 헌터x헌터[24]
2.0 2016년 9월 30일 셸의 유령[25]
1.0 2015년 10월 27일 에반게리온[26]
0.12 2015년 6월 12일 드래곤볼[27]
0.11 2014년 11월 7일 카우보이 비밥[28]
0.10 2014년 3월 23일 블레이드 러너[29]
0.9 2014년 2월 25일 애니매트릭스[30]
0.8 2014년 1월 27일 --[31]
0.7 2013년 12월 24일 --[32]
0.6 2013년 12월 8일 VueJS[33]

새로운 메이저(예: v3.y.z)가 출시되면 마지막 마이너 IE 2.x.y는 18개월 동안 LTS 릴리스(버그 수정 및 보안 패치)가 되고 이후 18개월 동안 유지 보수 모드(보안 패치만)[34]가 됩니다.

특징들

구성 요소들

Vue 구성 요소는 기본 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화합니다.대략적으로 컴포넌트는 Vue의 컴파일러가 동작을 부가하는 커스텀 요소입니다.Vue에서 구성 요소는 기본적으로 옵션이 [35]미리 정의된 Vue 인스턴스입니다.아래 코드 조각에는 Vue 구성 요소의 예가 포함되어 있습니다.컴포넌트는 버튼을 표시하고 버튼을 클릭하는 횟수를 출력합니다.

< >템플릿>   < >나누다 아이디='오토'>     < >단추가 달린 v-count: 초기 카운트="0"</>단추가 달린>   </나누다> </템플릿>  < >대본> 뷰.요소('버튼 클릭', {   소품: ['초기수'],   데이터.: () => ({     세어보세요: 0,   }),   템플릿: '< button v - on : click = " on Click " > {{ count }}회 클릭 </button >',   계산했다: {     카운트 타임 투() {       돌아가다 이것..세어보세요 * 2;     }   },   구경하세요: {     세어보세요(새로운 가치, old Value) {       콘솔.로그.("카운트 값이 다음에서 변경됩니다.${old Value}로.${새로운 가치}.`);     }   },   방법들: {     클릭() {       이것..세어보세요 += 1;     }   },   마운트된() {     이것..세어보세요 = 이것..initial Count(초기 카운트);   } });  신규 뷰({   엘: '#오토', }); </대본>

템플릿

Vue는 렌더링된 DOM을 기본 Vue 인스턴스의 데이터에 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다.모든 Vue 템플릿은 규격 준수 브라우저 및 HTML 파서로 구문 분석할 수 있는 유효한 HTML입니다.Vue는 템플릿을 가상 DOM 렌더 함수로 컴파일합니다.Vue는 가상 문서 객체 모델(또는 "DOM")을 사용하여 브라우저를 업데이트하기 전에 해당 메모리의 구성요소를 렌더링할 수 있습니다.Vue는 반응성 시스템과 조합하여 애플리케이션 상태가 변경될 때 최소량의 DOM 조작을 적용하고 재렌더할 최소 구성 요소 수를 계산할 수 있습니다.

Vue 사용자는 템플릿 구문을 사용하거나 함수 호출 또는 JSX를 [36]통해 하이퍼스크립트를 사용하여 렌더 함수를 직접 쓰도록 선택할 수 있습니다.렌더 기능을 사용하면 소프트웨어 [37]컴포넌트에서 응용 프로그램을 구축할 수 있습니다.

반응성

Vue는 일반 JavaScript 개체를 사용하고 최적화된 재렌더링을 사용하는 반응성 시스템을 갖추고 있습니다.각 컴포넌트는 렌더링 중에 반응 의존성을 추적하기 때문에 시스템은 언제 재렌더해야 하는지, [38]어떤 컴포넌트를 재렌더해야 하는지 정확하게 알 수 있습니다.

이행

Vue는 DOM에서 항목을 삽입, 업데이트 또는 제거할 때 전환 효과를 적용할 수 있는 다양한 방법을 제공합니다.여기에는 다음과 같은 툴이 포함됩니다.

  • CSS 이행 및 애니메이션 클래스 자동 적용
  • Animate.css 등의 서드파티 CSS 애니메이션 라이브러리 통합
  • JavaScript를 사용하여 전환 후크 중에 DOM을 직접 조작합니다.
  • Velocity와 같은 타사 JavaScript 애니메이션 라이브러리를 통합합니다.js

트랜지션 컴포넌트에 감긴 요소를 삽입 또는 분리하면 다음과 같이 됩니다.

  1. Vue는 대상 요소에 CSS 전환 또는 애니메이션이 적용되었는지 여부를 자동으로 스니핑합니다.이 경우 적절한 타이밍에 CSS 이행 클래스가 추가 또는 삭제됩니다.
  2. 이행 컴포넌트가 JavaScript 훅을 제공했을 경우 이들 훅은 적절한 타이밍에 호출됩니다.
  3. CSS 트랜지션/애니메이션이 검출되지 않고 JavaScript 훅이 제공되지 않으면 삽입 및/또는 삭제를 위한 DOM 조작이 다음 [39][40]프레임에서 즉시 실행됩니다.

라우팅

싱글 페이지 애플리케이션(SPA)의 종래의 단점은, 특정의 Web 페이지내에서 정확한 「서브」페이지로의 링크를 공유할 수 없는 것입니다.SPA는 서버로부터의 URL 기반 응답(일반적으로 index.html 또는 index.vue)을 1개만 사용자에게 제공하기 때문에 특정 화면을 북마크하거나 특정 섹션에 대한 링크를 공유하는 것은 불가능하지 않을 경우 보통 어렵습니다.이 문제를 해결하기 위해 많은 클라이언트 측 라우터는 동적 URL을 "http://" (#!)로 구분합니다.그러나 HTML5를 사용하는 대부분의 최신 브라우저는 해시방 없는 루팅을 지원합니다.

Vue는 변경 방법(이메일 링크, 리프레시 링크, 페이지 내 링크)에 관계없이 현재 URL 경로에 따라 페이지에 표시되는 내용을 변경할 수 있는 인터페이스를 제공합니다.또한 프런트 엔드 라우터를 사용하면 버튼이나 링크에서 특정 브라우저 이벤트(클릭 등)가 발생했을 때 브라우저 경로를 의도적으로 전환할 수 있습니다.Vue 자체에는 프런트 엔드 해시 라우팅이 포함되어 있지 않습니다.그러나 오픈 소스 "vue-router" 패키지는 응용 프로그램의 URL을 업데이트하기 위한 API를 제공하며, 뒤로 버튼(내비게이션 기록), 이메일 비밀번호 재설정 또는 인증 URL 매개 변수가 포함된 이메일 확인 링크를 지원합니다.네스트된 루트를 네스트된 컴포넌트에 매핑할 수 있으며 세부적인 이행 제어를 제공합니다.Vue를 통해 개발자들은 이미 더 큰 구성요소를 구성하는 작은 구성요소로 애플리케이션을 구성하고 있습니다.vue-router를 혼합에 추가하면 컴포넌트는 자신이 속한 루트에 매핑되기만 하면 되며 부모/루트 루트는 자녀가 [41]렌더링해야 하는 위치를 나타내야 합니다. 

<div id="app"> <timeout-view> </div> ...<script> ... const User = { template: '<div> User {{ $route.params.id }}} </div> }, const router = new VueRouter ({routes: [ { path: /user/:id', 컴포넌트:사용자 } ] } ; ... </script>

위의 코드:

  1. 프런트 엔드 루트를 설정합니다.websitename.com/user/<id>.
  2. (const User...)에서 정의된 사용자 컴포넌트에 렌더링됩니다.
  3. User 컴포넌트가 $route 객체의 params 키를 사용하여 URL에 입력한 사용자의 특정 ID를 전달할 수 있도록 합니다.$route.params.id.
  4. 이 템플릿(라우터에 전달된 파라미터에 따라 다름)은,<router-view></router-view>DOM의 div#app 안에 있습니다.
  5. 다음과 같이 입력하기 위해 최종적으로 생성된 HTML:websitename.com/user/1다음과 같습니다.
<div id="app"> <div> <div> 사용자 1 </div> </div> </div>

[42]

생태계

핵심 라이브러리에는 핵심 팀과 기여자가 개발한 도구와 라이브러리가 함께 제공됩니다.

공식 공구

  • Devtools – Vue.js 응용 프로그램 디버깅을 위한 브라우저 devtools 확장
  • Vue CLI – Vue.js의 신속한 개발을 위한 표준 툴
  • Vue Loader – 싱글 파일 컴포넌트(SFC)라는 형식으로 Vue 컴포넌트를 쓸 수 있는 웹 팩로더

공식 라이브러리

  • Vue Router – 공식 라우터
  • Vuex – 플럭스의 영향을 받은 중앙 집중식 상태 관리
  • Vue Server 렌더러– 서버 측 렌더링
  • Pinia – 새로운 심플한 상태 관리

「 」를 참조해 주세요.

원천

Definition of Free Cultural Works logo notext.svg 이 기사에는 무료 콘텐츠 저작물의 텍스트가 포함되어 있습니다.MIT 라이선스 계약서/허가에 의거하여 라이선스를 취득되었습니다.Vue.js 가이드, Vue.js,Wikipedia 문서에 열린 라이센스 텍스트를 추가하는 방법은 이 사용 방법 페이지를 참조하십시오.Wikipedia 텍스트 재사용에 대한 자세한 내용은 사용 약관을 참조하십시오.

레퍼런스

  1. ^ "First Week of Launching Vue.js". Evan You.
  2. ^ https://github.com/vuejs/core/releases/tag/v3.2.33 를 참조해 주세요.
  3. ^ "vue/LICENSE". Vue.js. Retrieved April 17, 2017 – via GitHub.
  4. ^ a b c "Introduction". Vuejs.org. Retrieved January 3, 2020.
  5. ^ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps. O'Reilly Media. ISBN 978-1-4919-9721-5.
  6. ^ Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch. Apress. ISBN 978-1-4842-3781-6.
  7. ^ Yerburgh, Edd (2019). Testing Vue.js Applications. Manning Publications. ISBN 978-1-61729-524-9.
  8. ^ Freeman, Adam (2018). Pro Vue.js 2. Apress. ISBN 978-1-4842-3805-9.
  9. ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js. SitePoint. ISBN 978-1-4920-7144-0.
  10. ^ [5][6][7][8][9][4]
  11. ^ "Meet the Team". Vuejs.org. Retrieved September 23, 2019.
  12. ^ "Evan is creating Vue.js". Patreon. Retrieved March 11, 2017.
  13. ^ "What is Vue.js". W3Schools. Retrieved January 21, 2020.
  14. ^ "Evan You". Between the Wires. November 3, 2016. Archived from the original on June 3, 2017. Retrieved August 26, 2017.
  15. ^ "v3.2.0 Quintessential Quintuplets". Vue.js. August 5, 2021. Retrieved August 10, 2021 – via GitHub.
  16. ^ "v3.1.0 Pluto". Vue.js. June 7, 2021. Retrieved July 18, 2021 – via GitHub.
  17. ^ "v3.0.0 One Piece". Vue.js. September 18, 2020. Retrieved September 23, 2020 – via GitHub.
  18. ^ "v2.7.0 Naruto". Vue.js. July 1, 2022. Retrieved July 1, 2022 – via GitHub.
  19. ^ "v2.6.0 Macross". Vue.js. February 4, 2019. Retrieved September 23, 2020 – via GitHub.
  20. ^ "v2.5.0 Level E". Vue.js. October 13, 2017. Retrieved September 23, 2020 – via GitHub.
  21. ^ "v2.4.0 Kill la Kill". Vue.js. July 13, 2017. Retrieved September 23, 2020 – via GitHub.
  22. ^ "v2.3.0 JoJo's Bizarre Adventure". Vue.js. April 27, 2017. Retrieved September 23, 2020 – via GitHub.
  23. ^ "v2.2.0 Initial D". Vue.js. February 26, 2017. Retrieved September 23, 2020 – via GitHub.
  24. ^ "v2.1.0 Hunter X Hunter". Vue.js. November 22, 2016. Retrieved September 23, 2020 – via GitHub.
  25. ^ "v2.0.0 Ghost in the Shell". Vue.js. September 30, 2016. Retrieved September 23, 2020 – via GitHub.
  26. ^ "1.0.0 Evangelion". Vue.js. October 27, 2015. Retrieved September 23, 2020 – via GitHub.
  27. ^ "0.12.0: Dragon Ball". Vue.js. June 12, 2015. Retrieved September 23, 2020 – via GitHub.
  28. ^ "v0.11.0: Cowboy Bebop". Vue.js. November 7, 2014. Retrieved September 23, 2020 – via GitHub.
  29. ^ "v0.10.0: Blade Runner". Vue.js. March 23, 2014. Retrieved September 23, 2020 – via GitHub.
  30. ^ "v0.9.0: Animatrix". Vue.js. February 25, 2014. Retrieved September 23, 2020 – via GitHub.
  31. ^ "v0.8.0". Vue.js. January 27, 2014. Retrieved September 23, 2020 – via GitHub.
  32. ^ "v0.7.0". Vue.js. December 24, 2013. Retrieved September 23, 2020 – via GitHub.
  33. ^ "0.6.0: VueJS". Vue.js. December 8, 2013. Retrieved September 23, 2020 – via GitHub.
  34. ^ "Vue Roadmap". Vue.js – via GitHub.
  35. ^ "Components". Vuejs.org. Retrieved March 11, 2017.
  36. ^ "Template Syntax". Vuejs.org. Retrieved March 11, 2017.
  37. ^ "Vue 2.0 is Here!". The Vue Point. September 30, 2016. Retrieved March 11, 2017.
  38. ^ "Reactivity in Depth". Vuejs.org. Retrieved March 11, 2017.
  39. ^ "Transition Effects". Vuejs.org. Retrieved March 11, 2017.
  40. ^ "Transitioning State". Vuejs.org. Retrieved March 11, 2017.
  41. ^ "Routing". Vuejs.org. Retrieved March 11, 2017.
  42. ^ You, Evan. "Vue Nested Routing (2)". Vue Home Page (subpage). Retrieved May 10, 2017.

외부 링크