Vue를 추가하는 방법은 여러가지가 있다. 그 중, package설치가 가장 쉬운 방법은 아니다.
가장 쉽게 설치하려면 CDN에서 나의 페이지로 Vue패키지를 불러오기를 추가한다.
이를 위해 script태그를 가져올 수 있다.
**CDN에서 Vue를 사용하는 경우, '빌드 단계'가 필요하지 않다. 따라서 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는데 적합하다. 하지만 싱글 파일 컴포넌트(SFC)구문은 사용할 수 없다.
Q. 싱글파일 컴포넌트란?
빌드도구를 사용하는 대부분의 Vue프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component:SFC, *.vue 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성한다.
Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화한다. 아래가 SFC형식의 예시
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">숫자 세기: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
script 태그를 app.js를 실행하기 전에 추가하면, script가 Vue사용을 허용한다.
Vanilla JavaScript
이전에 사용했던 순수 JavaScript에서는 명령형 접근법(Imperative approach)을 사용하였다.
We define every single step, step by step which should be executed by the browser.
ex: Get access button, input, ul, create function, click handler to the button, 클릭 발생 시 함수실행 등, 이렇게 모든 단계를 정의하고 있다.
명령형 vs 선언형 프로그래밍
Imperative programming is HOW you do something, and declarative programming is more like WHAT you do. 즉, 명령형(절차적) 프로그래밍 : 일을 '어떻게' 할 것인가에 관한 것 선언적 프로그래밍 : '무엇을' 할 것인가에 관한
lion284.tistory.com
Vue 프레임워크
Vue를 사용하면, 똑같은 문제를 새로운 방식으로 해결할 수 있다.
원하는 최종 결과와 필요한 데이터를 Vue앱에 정의하고, 어느 시점에서 DOM에서 무엇을 생성하고 추가하고 바꿀지 Vue가 스스로 알아내도록 한다.
We define the desired end result and the data we will need in our Vue app, and we will leave it up to Vue to figure out.
이를 위해 HTML코드를 조종하는 Vue앱을 생성해야한다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<label for="goal">Goal</label>
<input type="text" id="goal" v-model="enteredValue" />
<!--v-model을 작성하면, input&입력값&데이터프로퍼티가 연결되며, Vue가 이를 관리해준다.-->
<!--enteredValue를 변경할때마다 사용자가 입력한 내용을 자동으로 수신해서 이 input을 자동으로 업데이트한다.-->
<button v-on:click="addGoal">Add Goal</button><!--Vue는 이 버튼이 클릭될때마다 addGoal메서드가 실행되도록 한다.-->
<!--button을 클릭할때마다 addGoal이 트리거되어야한다. JS를 사용하여 수동으로 버튼요소에 접근해서 click listener를 추가하는 대신, Vue를 사용하면 버튼 요소에 특수 속성을 하나 추가하면 된다.-->
<!--v-on속성. v-on:수신할 이벤트 입력. 값으로는 트리거할 메서드 지정-->
</div>
<ul>
<li v-for="goal in goals">{{goal}}</li>
<!--Vue는 도달하는 방법이 아니라, 원하는 '최종결과'를 정의. 목록항목이 나오는게 우리가 원하는 결과-->
<!--goals에 모두 루프를 걸고, goal마다 list항목을 하나씩 생성한다. goal에 접근할 수 있어서 Vue에서 인식하는 {{}}로 goal출력하능-->
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script> <!--CDN에서 Vue 불러오기-->
<!--app.js실행 전, 추가-->
<script src="app.js"></script>
</body>
</html>
app.js
Vue.createApp({ //Vue앱 생성. CDN불러오기 덕분에 Vue를 호출하면 된다.
data() { //함수를 값으로 가진다.
return { //이 함수는 객체를 반환한다. Vue앱이 인식해야하는 데이터를 이 객체에서 정의할 수 있다. 앱에서 관리하려는 데이터를 간단히 추가 가능.
goals: [],
enteredValue: "",
};
}, //== data:function(){}
methods: {
addGoal() {
this.goals.push(this.enteredValue);
this.enteredValue = "";
},
},
}).mount("#app");//이 코드들이 어디서 작용하고 적용되어야하는지 Vue가 알아야한다.
//Vue앱이 페이지 어느부분에서 조정할지 Vue에 알려줘야한다.
//mount에 CSS선택자가 있는 문자열 전달. DOM의 요소 하나를 선택한다.
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section2] 14. Vue앱 인스턴스 생성 및 연결하기 (0) | 2023.06.25 |
|---|---|
| [Udemy Vue 완벽가이드 Section1] 8. Vue vs 순수 JS (0) | 2023.06.23 |
| [Udemy Vue 완벽가이드 Section1] 5. JavaScript만으로 첫번째 앱 만들기 (0) | 2023.06.20 |
| [Udemy Vue 완벽가이드 Section1] 4. Vue 대안 알아보기 (0) | 2023.06.17 |
| [Udemy Vue 완벽가이드 Section1] 2. 'Vue.js'란 무엇인가? (2) | 2023.06.16 |
