베일이라니요?js？

Vue는 사용자 인터페이스를 구축하는 JavaScript 프레임워크입니다.뷰는 2014년 구글 임직원 에반유가 공식 발표했다.Vue는 데스크탑 및 모바일 어플리케이션을 위한 전자 프레임워크입니다.Electron framework는 플랫폼 간 데스크탑 응용 프로그램을 구축하는 데 사용됩니다.Evan You는 "Angular의 장점을 포착하고 무게가 더 가벼운 맞춤형 도구를 구축하기 위해 Vue를 만들었다"며 "나에게 Angular는 데이터 귀속과 데이터 구동의 DOM 처리 방법을 제공하기 때문에 직접 DOM에 접근할 필요가 없다"고 말했다.Vue의 이름은 모델-뷰-컨트롤러(MVC) 아키텍처를 의미합니다.Vue는 애플리케이션/웹 사이트의 UI에 집중합니다.

성명식 표현 데이터

Html 파일

<div id="app">
 {{ message }}
</div>

 

Js 파일

var app = new Vue({
 el: '#app',
 data: {
   message: 'Vue application to the rescue!'
 }
});

새로운 Vue 프로그램이 만들어졌고 데이터와 DOM이 연결되며 페이지의 모든 내용이 수동적입니다.Vue 응용 프로그램은 DOM 요소(#app)에 자체를 연결하고 이를 제어합니다.입구점은 HTML이지만 실제로는 모든 것이 일어났다

바인딩 데이터

Html 파일

<div id="app-2">
 <span v-bind:title="message">
   Hover your mouse over me
   to see the title dynamically change!!
 </span>
</div>

Js 파일

 

var app2 = new Vue({
 el: '#app-2',
 data: {
   message: 'You hovered and loaded the page on ' + new Date().toLocaleString()
 }
});

이것은 우리가 지령에 대한 첫 번째 소개다.v-bind 속성을 명령이라고 하는데 이것은 Vue가 정성들여 만든 특수한 속성을 나타낸다.v-bind는 렌더링된 DOM에 특수한 반응 동작을 적용합니다.콘솔을 열고 app2.message = ‘we’ve got a new message.’를 입력하면 바인딩된 HTML 제목 속성이 업데이트됩니다.

데이터 전환

Html 파일

<div id="app-3">
 <span v-if="seen">Do you see the muffin man? YES</span>
</div>

Js 파일

var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
});

콘솔에 javascript app3.seen = false;를 입력하면 메시지가 사라집니다.이것은 데이터가 속성과 텍스트에 귀속될 수 있음을 나타낸다. 그러나 일반적으로 데이터는 DOM의 구조에 귀속될 수 있다.
Vue에는 또 하나의 좋은 과도 효과 시스템이 있다.다음은 단일 변환 요소를 표시하는 코드입니다.Vue는 요소와 구성 요소에 변환을 추가/제거할 수 있는 변환 패키지 구성 요소를 지정합니다.V-if는 조건 렌더링에 사용되고 V-show는 조건 디스플레이에 사용됩니다.

Html 파일

<div id="effects">
 <button v-on:click="show = !show">
   Toggle
 </button>
 <transition name="fade">
   <p v-if="show">MostValuableProgrammers</p>
 </transition>
</div>

Js 파일

new Vue({
 el: '#effects',
 data: {
   show: true
 }
});

CSS 파일

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}

V-enter-active는 enter의 활성 상태입니다.그것은 전체 진입 단계에서 응용될 것이다.이러한 유형은 전체 변환의 지속 시간, 지연 및 완화 커브를 정의합니다.V-leave-active는 휴가의 활동 상태입니다.그것은 전체 이탈 단계에서 적용될 것이다.V-enter는 전체 V-leave-to를 입력하는 시작 상태이고, V-leave-to는 휴가의 종료 상태입니다(버전 2.1.8+에서만 사용 가능).

Vue의 이점 활용

Vue의 작은 크기(전체 프레임 18KB)를 통해 라이브러리를 빠르게 다운로드하고 설치할 수 있음

가상 DOM 렌더링 요소를 사용하여 성능을 향상시킵니다.일반적으로 사용자가 페이지와 상호 작용할 때 전체 DOM이 업데이트됩니다.Vue는 가상 DOM을 사용합니다(전체 DOM을 렌더링하지 않고 업데이트할 요소를 결정함).이 방법은 요소를 페이지에 더 빨리 보여줌으로써 응용 프로그램의 성능을 향상시킨다.

양방향 데이터 바인딩은 Vue가 Angular에서 상속받은 기능 중 하나가 큰 장점이다.양방향 데이터 바인딩은 모델 데이터 업데이트와 뷰(UI) 간의 링크를 의미합니다.현재 관련 구성 요소를 업데이트하고 추적하는 것이 더욱 간단합니다.

단일 파일 구성 요소는 구성 요소를 다시 사용하고 코드의 가독성을 높여 단원 테스트를 더욱 잘 할 수 있다.

Vue는 JavaScript에 전적으로 의존하기 때문에 기존 애플리케이션과 통합하기 쉽습니다.

Vue CLI 3이 출시됨에 따라 Vue의 브라우저 디버그 도구, 서버 렌더링, 상태 관리자 및 여러 유닛 테스트/테스트 도구

등 다양한 도구가 유지됩니다.

Vue는 배우기 쉽고 특히 뚜렷하고 간결한 문서를 제공하며 Vue 커뮤니티가 끊임없이 커지고 있다(41000개 이상의 스택 넘침 탭

Vue 사용의 부정적 영향

Vue의 반응성은 복잡하다.때때로 사용자가 구성 요소를 터치할 때 구성 요소가 정확하게 응답하지 못하고 데이터 읽기 과정에서 오류가 발생할 수 있습니다.고정적인 반응성을 위해서 데이터는 반드시 평탄화되어야 한다.
*뷔는 알리바바와 샤오미 등에서 인기가 많기 때문에 뷔 콘텐츠를 검색할 때 설명과 설명을 영어 이외의 언어로 작성할 수 있다.

틀이 너무 새롭기 때문에 대형 프로젝트는 지원이 부족하다.대형 프로젝트에서 이 틀을 채택하기 위해서는 이 기술이 신속하게 문제를 해결할 수 있도록 강력한 지원과 안정성을 가져야 한다.

유한한 자원(플러그인 사용 가능)과 경험이 풍부한 개발자가 부족한 것은 Vue가 크게 개선할 수 있는 분야

결론

Vue는 사용자 인터페이스를 구축할 때 사용하기 쉬운 새로운 프레임워크입니다.Vue는 페이스북(React)이나 구글(Angular)처럼 보급되지 않을 것으로 보이며, 후자는 거액의 자금을 지원하는 회사다.Vue는 Github와 알리바바와 BMW 등 다른 대기업에서도 좋은 추종자를 보유하고 있다.Vue에는 많은 정보가 들어 있는 훌륭한 문서가 있습니다.그것은 쉽게 공부할 수 있을 뿐만 아니라, 당신을 지지하는 아주 좋은 지역 사회를 가지고 있어서, 당신이 그것을 배우는 데 도움을 줄 수 있다.

출처

AltexSoft.(2020년 2월 27일).좋고 나쁨.js 프레임워크 프로그래밍.2021년 2월 28일 검색자https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/
Vue.(주).소개 - vue.js.2021년 2월 28일 검색자https://vuejs.org/v2/guide/