Vue.js는 주로 프런트 엔드 개발이라고도 하는 애플리케이션의 시각화 부분에 중점을 둡니다. Vue.js는 다른 프로젝트 및 라이브러리와 통합하기가 매우 쉽기 때문에 날마다 인기를 얻고 있습니다. 설치 및 사용이 매우 간단합니다.
Vue.js는 진보적인 JavaScript 프레임워크입니다. 오픈 소스 대화형 웹 사용자 인터페이스 및 단일 페이지 애플리케이션(SPA) 개발에 사용됩니다. Vue.js는 일반적으로 Vue라고 하며 "view.js" 또는 "view"로 발음됩니다.
단일 페이지 응용 프로그램 또는 SPA는 사용자에게 데스크톱 응용 프로그램과 유사한 매우 부드럽고 반응이 빠르고 빠른 경험을 제공하는 웹 응용 프로그램 또는 웹 사이트입니다. 단일 페이지 애플리케이션에는 단일 페이지에 메뉴, 버튼 및 블록이 포함되어 있습니다. 사용자가 그 중 하나를 클릭하면 서버에서 완전히 새로운 페이지를 로드하는 대신 현재 페이지를 동적으로 다시 작성합니다. 이것이 응답 속도의 이유입니다.
Vue는 기본적으로 프론트엔드 개발용으로 개발되었기 때문에 많은 HTML, JavaScript, CSS 파일을 처리해야 합니다. Vue.js를 사용하면 사용자가 지시문이라는 HTML 속성으로 HTML을 쉽게 확장할 수 있습니다. Vue.js는 내장 지시어와 많은 지시어를 제공합니다. defiHTML 응용 프로그램의 기능을 향상시키기 위해 사용자가 nite.
다음은 Vue.js의 가장 중요한 기능 목록입니다.
Vue.js 컴포넌트는 이 프레임워크의 중요한 기능 중 하나입니다. 재사용 가능한 코드를 캡슐화하기 위해 기본 HTML 요소를 확장하는 데 사용됩니다. 나중에 HTML에서 재사용할 수 있는 Vue.js 애플리케이션에서 재사용 가능한 사용자 정의 요소를 생성할 수 있습니다.
Vue.js는 렌더링된 DOM을 Vue 인스턴스 데이터와 연결하는 데 사용할 수 있는 HTML 기반 템플릿을 제공합니다. 모든 Vue 템플릿은 사양 호환 브라우저 및 HTML 파서에서 파싱할 수 있는 유효한 HTML입니다. Vue.js는 모델을 가상 DOM 렌더링 기능으로 컴파일합니다. Vue는 브라우저를 새로고침하기 전에 컴포넌트를 가상 DOM 메모리로 렌더링합니다. Vue는 또한 다시 렌더링할 최소 구성 요소 수를 계산하고 애플리케이션 상태를 변경할 때 최소한의 DOM 조작을 적용할 수 있습니다.
Vue는 간단한 JavaScript 객체를 사용하고 재 렌더링을 최적화하는 반응성 시스템을 제공합니다. 이 프로세스에서 각 구성 요소는 반응 종속성을 추적하므로 시스템은 언제 어떤 구성 요소를 다시 렌더링해야 하는지 정확히 알 수 있습니다.
페이지 탐색은 vue-router의 도움으로 수행됩니다. 단일 페이지 애플리케이션에 대해 공식적으로 지원되는 vue-router 라이브러리를 사용할 수 있습니다.
Vue를 사용하면 요소가 DOM에서 삽입, 업데이트 또는 제거될 때 다양한 전환 효과를 사용할 수 있습니다.
Vue.js를 사용하는 방법에는 여러 가지가 있습니다. 공식 사이트로 이동하여 설치하거나 CDN 라이브러리의 Vue.js 파일을 사용하여 시작할 수도 있습니다. 다음은 프로젝트에서 Vue.js를 사용하는 몇 가지 방법입니다.
태그를 사용하고 싶다면 <script> Vue.js를 HTML 파일에 직접 삽입하려면 공식 웹사이트에서 다운로드해야 합니다.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Vue.js 공식 웹사이트로 이동합니다. https://vuejs.org/v2/guide/installation.html 필요에 따라 vue.js를 다운로드합니다.
애플리케이션에서 CDN의 Vue.js 파일을 사용할 수도 있습니다. 요소 내에서 https://unpkg.com/vue@3/dist/vue.global.js 링크를 사용하십시오. <script>, 아래:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js는 웹 개발 및 단일 페이지 애플리케이션(SPA) 구축에 널리 사용되는 최신 소프트웨어 기술 중 하나입니다. 이름에서 짐작할 수 있듯이 주로 프로젝트의 UI나 디스플레이 쪽에서 사용됩니다.
프로젝트에서 Vue.js를 사용할 때의 이점을 살펴보겠습니다.
Vue.js의 가장 큰 장점 중 하나는 크기가 매우 작다는 것입니다. JavaScript 프레임워크의 성공은 그 크기에 크게 좌우되며 이 흥미로운 JavaScript 플러그인은 18-21KB에 불과하므로 매우 쉽게 다운로드하여 즉시 사용할 수 있습니다.
Vue.js 프레임워크는 구조가 매우 간단하고 이해하기 쉽습니다. 이것이 이 프레임워크의 인기에 대한 이유 중 하나입니다. HTML과 JavaScript에 익숙하다면 Vue.js에서 쉽게 코딩할 수 있습니다. 사용자는 간단한 구조로 인해 Vue.js를 웹 프로젝트에 쉽게 추가하고 애플리케이션을 개발할 수 있습니다.
Vue.js는 모든 것에 대한 많은 구성 요소를 가지고 있으며 기존 애플리케이션과 매우 빠르게 통합될 수 있습니다. JavaScript로 작성된 모든 애플리케이션과 통합할 수 있습니다.
Vue.js의 유연한 특성 덕분에 React.js, Angular.js 및 기타 새로운 JavaScript 프레임워크의 개발자가 쉽게 이해할 수 있습니다. 가상 노드를 사용하여 HTML 파일, JavaScript 파일 및 순수한 JavaScript 파일을 작성할 수 있는 많은 유연성을 제공합니다.
Vue.js 애플리케이션에서 재사용 가능한 사용자 정의 요소를 생성할 수 있습니다.
Vue.js는 매우 간단하고 완전하며 상세한 문서를 제공하므로 HTML 및 JavaScript에 대해 거의 모르는 개발자가 이를 사용하여 프로그래밍할 수 있습니다.
Vue.js는 ReactJS, Ember 등과 같은 다른 기존 프레임워크와 유사한 가상 DOM을 사용합니다. 가상 DOM은 원래 HTML DOM의 경량 인메모리 트리 표현이며 초기 DOM에 영향을 주지 않고 업데이트됩니다.
Vue.js는 HTML 블록 처리를 단순화하는 MVVM(Model View View Model) 아키텍처와 양방향 통신을 제공합니다.
프레임워크는 단순하고 간단한 모델 구문을 사용하여 선언적으로 데이터를 DOM에 렌더링할 수 있는 시스템과 함께 제공됩니다.
다음은 예입니다.
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Vue.js 프레임워크를 사용하면 defiHTML 응용 프로그램에 기능을 제공하는 데 사용되는 지시문이라고 하는 HTML 속성이 있습니다.
Vue.js에는 두 가지 유형의 지시문이 있습니다.
Vue.js는 이중 중괄호 {{}}를 데이터의 자리 표시자로 사용하고 Vue.js 지시문은 v-접두사를 사용하는 HTML 특성입니다.
Vue 앱은 단일 DOM 요소에 연결하여 완전히 제어합니다. 위의 예에서는 #app입니다.
Vue를 사용하면 HTML을 진입점으로 간주할 수 있으며 다른 모든 것은 생성된 Vue 인스턴스 내에서 발생합니다.
요소 및 특성 바인딩을 시도하는 예를 살펴보겠습니다.
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> 이 경우 새 v-bind 특성은 지시어입니다. 디렉티브는 Vue에서 제공하는 고유한 속성임을 나타내기 위해 v- 접두사와 함께 사용되며 렌더링된 DOM에 특별한 응답 동작을 적용하는 데 사용됩니다.
예제의 결과는 다음과 같습니다.
Ercole Palmeri
색칠을 통해 소근육 운동 능력을 키우면 아이들이 글쓰기와 같은 보다 복잡한 기술을 준비할 수 있습니다. 색칠하다…
지난 월요일, Financial Times는 OpenAI와의 계약을 발표했습니다. FT는 세계적 수준의 저널리즘에 라이선스를 부여합니다…
수백만 명의 사람들이 스트리밍 서비스 비용을 지불하고 월간 구독료를 지불합니다. 당신은…
