[Udemy Vue 완벽가이드 Section2] 20. 첫 번째 요약
- Vue 앱을 만드는 방법, mount를 이용하여 앱을 HTML 코드와 연결하는 방법
- Vue 앱은 하나의 HTML 요소에만 연결할 수 있으니, id선택자와 같은 고유 CSS 선택자를 사용.
const app = Vue.createApp({}); // createApp함수를 이용하여 Vue앱을 만듦.
app.mount('#user-goal'); //생성된 Vue앱의 메서드인 mount를 이용하여 HTML코드와 연결.
//id선택자와 같은 고유 CSS 선택자를 사용하여 하나의 HTML요소에만 연결.
- Vue로 요소를 제어하는 경우, 자식 요소도 자동으로 제어 가능
- But, Vue가 제어하는 HTML 요소 이외의 다른 요소는 제어 불가능
- Vue가 제어하는 HTML 요소에서는 특수 기능을 사용할 수 있다.
ex: 이중 중괄호를 사용하는 보간법, v-bind, v-html. 이 기능들은 Vue가 제어하는 HTML 코드에서만 사용 가능.
보간법, v-bind 구문 -> 데이터 바인딩. Vue앱에서 관리하는 데이터를 HTML 코드에 바인딩하는 것.
- createApp으로 생성한 Vue 앱에 객체를 전달하면 이 객체가 앱을 구성한다.
- 이 객체에는 다양한 옵션을 설정할 수 있다. ex: data옵션, methods 옵션 등
- 다른 옵션들도 많지만, 가장 중요한 옵션 두개. 어떤 애플리케이션을 만들더라도 이 두 옵션을 사용한다.
- data 옵션 : 함수를 갖는다. 이 함수는 데이터를 포함하는 객체를 반환. 이 객체는 Vue가 제어하는 HTML 코드에서 사용 가능.
- this키워드를 사용하면, methods와 같은 Vue앱의 다른 부분에서도 액세스 가능.
- methods 옵션 : Vue가 제어하는 HTML 코드에서 함수를 호출하게 해준다.
index.html
<!DOCTYPE html>
<html lang="en">
<!--head부분 생략-->
<body>
<header> <!--Vue가 제어 불가능-->
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal"> <!--이 section요소의 자식요소도 Vue가 제어 가능-->
<h2>My Course Goal</h2>
<p>{{courseGoal}}</p> <!--보간법. 데이터바인딩-->
<p>{{ outputGoal() }}</p>
<p v-html="outputGoal()"></p>
<p>Learn more <a v-bind:href="vueLink">about Vue.</a></p> <!--v-bind구문. 데이터바인딩-->
</section>
</body>
</html>
app.js
const app = Vue.createApp({ //createApp으로 생성한 Vue앱에 객체 전달. 이 객체가 앱을 구성한다. 이 객체에 다양한 옵션 설정 가능.
data() { //data옵션:함수를 갖는다.
return { //데이터를 포함하는 객체를 반환. Vue가 제어하는 HTML코드에서 사용 가능.
courseGoal: "Finish the course and learn Vue!",
courseGoalA: "Finish the course and learn Vue!",
courseGoalB: "<h2>Master vue and build amazing apps!</h2>",
vueLink: "https://vuejs.org/",
};
},
methods: { //Vue가 제어하는 HTML코드에서 함수 호출
outputGoal() {
const randomNumber = Math.random();
if (randomNumber < 0.5) {
return this.courseGoalA; //this키워드 사용 시, data 액세스 가능.
} else {
return this.courseGoalB;
}
},
},
});
app.mount("#user-goal");
- Vue와 같은 프레임워크를 사용할 때는, 보통 '선언형 접근 방식'을 사용한다고 말한다.
풀어서 설명하면, 개발자는 목표를 정의하거나 혹은 우리가 넣을 콘텐츠의 템플릿을 정의한다.
동적으로 만들 부분에 이중 중괄호나 v-bind로 바인딩할 속성(ex: href)으로 표시. 이렇게만 해두면 나머지 작업은 Vue가 한다. 내부적으로 모든 준비를 다 해준다.
{{ outputGOal() }} 이렇게 구체적인 값을 출력해주고, 실제 DOM을 업데이트해주고, 화면에 렌더링하고 사용자가 볼 수 있게 한다. 내부적으로 우리 대신 작업을 해준다. 그래서 개발자는 동적 플레이스 홀더만 지정하고, 최종적인 그림만 정의하면 된다. 이를 구현하기 위한 중간 단계를 직접 정의할 필요가 없다. Vue와 같은 프레임워크로 해결된다. Vue가 선언형 접근 방식을 사용한다고 표현하는 이유가 바로 이거다. 개발자가 '목표'만 선언하면 중간 단계는 신경 쓸 필요가 없다.
참고:
명령형 vs 선언형 프로그래밍
Imperative programming is HOW you do something, and declarative programming is more like WHAT you do. 즉, 명령형(절차적) 프로그래밍 : 일을 '어떻게' 할 것인가에 관한 것 선언적 프로그래밍 : '무엇을' 할 것인가에 관한
lion284.tistory.com
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다