Vue.js는 진보적인 자바스크립트 프레임워크로 명성을 얻었습니다. Vue.js를 사용하여 단일 페이지 애플리케이션(SPA)을 빌드하거나 특정 사용자 인터페이스를 개발할 수 있습니다.
여기에서는 Vue 컴포넌트를 만들고 옵션 객체로 작업하여 동적 데이터를 렌더링하는 방법을 포함하여 Vue.js의 기본 사항을 배웁니다.
CDN 링크를 통해 Vue 포함하기
Vue.js는 가장 인기 있는 자바스크립트 프레임워크 중 하나입니다. Vue를 시작하고 HTML 페이지에 추가하려면 아래 스크립트 태그를 복사하여 헤드 섹션에 붙여넣으세요:
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
CDN 링크를 사용하는 것은 정적 HTML을 개선하거나 애플리케이션에 기능을 추가하는 데 훌륭한 옵션입니다.
그러나 본격적인 Vue 앱을 빌드할 때 유용한 단일 파일 컴포넌트(SFC) 구문과 같은 고급 기능을 더 많이 사용하려면 npm을 통해 Vue.js를 설치해야 합니다.
Vue 애플리케이션 만들기
CDN 링크를 통해 Vue 라이브러리에 액세스하면 .createApp() 메서드를 포함한 Vue 객체가 제공됩니다.
이름에서 알 수 있듯이 이 메서드를 사용하여 Vue 앱을 만들 수 있습니다.
예를 들어:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const app = Vue.createApp();
</script>
</body>
</html>
여기서 생성된 앱은 앱 변수에 저장됩니다. 앱 인스턴스를 생성한 후에는 .mount() 메서드를 사용하여 렌더링해야 합니다. 이 메서드는 DOM(문서 객체 모델)에서 앱을 마운트할 위치를 알려줍니다.
이와 같이:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp();
app.mount("#app");
</script>
</body>
</html>
Vue의 .mount() 메서드를 사용하려면 DOM 요소 또는 선택기를 인수로 제공해야 합니다. 이 예제에서는 #app ID가 있는 DOM 요소를 사용하여 Vue 앱을 마운트했습니다.
Vue 앱은 ID를 사용하여 지정된 요소만 제어한다는 점에 유의하는 것이 중요합니다. 또한 앱은 클릭 이벤트 또는 기타 상호 작용을 포함하여 해당 요소 외부의 모든 것을 제어할 수 없습니다.
Vue 애플리케이션을 만드는 마지막 단계는 모든 앱 구성을 완료한 후 .mount() 메서드를 호출하는 것입니다.
Vue의 옵션 개체
Vue.js에서는 옵션 개체를 구성 개체로 사용하여 Vue 인스턴스 또는 구성 요소를 만듭니다.
각 인스턴스 또는 구성 요소의 동작과 데이터를 정의하므로 Vue 애플리케이션의 필수적인 부분입니다. Options 객체는 인스턴스 또는 구성 요소의 다양한 측면을 나타내는 여러 속성으로 구성됩니다.
Options 객체에서 일반적으로 사용되는 속성 중 일부는 다음과 같습니다:
⭐ 데이터: 이 속성은 Vue 애플리케이션의 데이터 객체를 정의합니다. 데이터 속성과 초기 값을 포함하는 객체를 반환하는 함수입니다.
⭐ 메서드: Options 개체의 메소드 속성은 동적 렌더링을 활성화하는 데 중요한 기능을 보유합니다.
⭐ 템플릿: 이 속성은 Vue 인스턴스 또는 컴포넌트에 대한 HTML 템플릿을 정의합니다. Vue의 템플릿 컴파일러가 구문 분석할 수 있는 HTML 마크업이 포함된 문자열입니다.
템플릿 속성을 사용할 때 Vue 컴파일러는 템플릿에 정의된 콘텐츠만 렌더링합니다.
다음은 데이터, 메서드 및 템플릿 속성이 포함된 Vue 앱의 예입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 @click="reverseMessage" >{{ text }}</h1>
</div>
<script>
const app = Vue.createApp({
// template: '<h1>Welcome to your Vue app</h1>',
data() {
return {
text: "This is your Vue App"
};
},
methods: {
reverseMessage () {
this.text = this.text.split('').reverse().join('')
}
}
});
app.mount("#app");
</script>
</body>
</html>
이 프로그램은 텍스트 보간을 사용하여 “이것은 당신의 Vue 앱입니다”라는 텍스트를 표시하고 사용자가 이를 클릭하여 메시지를 되돌릴 수 있는 기본 Vue 앱을 보여 줍니다.
data() 함수는 text라는 단일 속성을 가진 객체를 반환합니다. 클릭 지시문은 텍스트 속성을 반전시키는 reverseMessage() 메서드를 <h1> 요소에 첨부하는 데 사용됩니다.
이 프로그램을 실행하면 생성된 Vue 앱은 다음과 같이 표시됩니다:
텍스트를 클릭하면 텍스트가 반전됩니다.
Vue 앱의 콘텐츠가 렌더링될 수 있도록 프로그램에서 템플릿 속성에 주석을 달았습니다. 주석 없이 그대로 두면 이 Vue 앱에는 템플릿 속성만 표시됩니다:
옵션 객체를 구성할 때 강력하고 유연한 Vue 애플리케이션을 만드는 데 활용할 수 있는 props 및 computed와 같은 다른 속성도 있습니다.
Vue의 텍스트 보간
Vue의 텍스트 보간은 데이터를 HTML 요소에 동적으로 바인딩할 수 있는 기능입니다. 즉, Vue 인스턴스의 데이터 속성 값을 HTML에 직접 출력할 수 있습니다.
Vue에서 텍스트 보간을 수행하려면 데이터 속성 이름을 이중 중괄호로 묶어야 합니다. Vue는 이중 중괄호 안의 내용을 자바스크립트 표현식으로 해석하고 그 결과 값으로 대체합니다.
예:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Welcome {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue app.",
name: "Noble",
};
},
});
app.mount("#app");
</script>
</body>
</html>
이 예제에서 텍스트 보간은 Vue 인스턴스에서 반환된 데이터 객체의 메시지 및 이름 속성을 <h1> 및 <p> 요소에 바인딩합니다. Vue 애플리케이션이 마운트되면 HTML에서 메시지 및 이름 속성의 값을 해당 위치에 표시합니다.
메서드 호출의 결과를 표시하거나 이중 중괄호 안에 기본 자바스크립트 연산을 수행할 수도 있습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h3>Welcome {{ name.toUpperCase() }}</h3>
<p>There are {{ nameLength() }} letters in your name.</p>
</div>
<p>not here</p>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue App",
name: "Noble Okafor",
};
},
methods: {
nameLength() {
return this.name.length - 1;
},
},
});
app.mount("#app");
</script>
</body>
</html>
이 예제에서 Vue 앱에는 메시지와 이름이라는 두 가지 속성을 포함하는 데이터 개체가 있습니다.
Vue 앱 내부에서 세 개의 HTML 요소는 Vue 인스턴스를 사용하여 데이터를 표시합니다. h1 요소는 메시지 속성의 값을 표시하고, h3 요소는 대문자() 메서드가 적용된 이름 속성의 값을 표시합니다.
p 요소는 Vue 앱의 메소드 객체에 정의된 nameLength() 메소드의 반환된 결과를 표시합니다. nameLength() 메서드는 이름 속성의 길이에서 1을 뺀 값을 반환합니다.
메소드 객체의 데이터 객체에서 값에 액세스하려면 이 키워드를 사용해야 합니다. 이 키워드는 현재 Vue 인스턴스를 참조하며 Vue 인스턴스 내에서 해당 속성 및 메소드에 액세스할 수 있도록 합니다. 이를 사용하여 이름 속성의 값을 검색하고 메서드를 사용하여 필요한 조작을 수행할 수 있습니다.
이 Vue 앱은 텍스트 보간을 사용하여 데이터를 HTML 요소에 바인딩하는 방법과 Vue 인스턴스에서 메서드를 정의하고 호출하는 방법을 보여줍니다.
Vue를 사용하여 프런트엔드 빌드
이 문서에서는 Vue로 작업을 시작하고 Vue의 템플릿 구문을 사용하여 텍스트를 보간하는 방법을 배웠습니다. 지시문 및 수명 주기 후크와 같은 여러 가지 다른 기능에 액세스할 수 있으므로 동적 프런트엔드 애플리케이션을 빌드하는 데 탁월한 선택입니다.