학습목적
- 의도적인 반복 학습 및 배운 내용을 직접 코드하기 위해
- vue의 예약어 중 하나인 methods를 사용해보기 위해
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{ courseGoal }}</p>
<p>{{ randomMsg() }}</p>
<p>랜덤링크로 <a v-bind:href="randomLink()"> 접속합니다. </a></p>
</section>
</body>
</html>- p 태그에 보이는 {{ randomMsg() }} 는 함수를 실행하는 문법인데 html에서 동작이 될까?
- a 태그의 어트리뷰트인 v-bind:href="randomLink()" 도 함수를 실행하는 문법인데 html에서 동작이 될까?
- 된다!
JavaScript
const app = Vue.createApp({
data() {
return {
courseGoal: '뷰 열심히 공부하기',
vueLink: "https://vuejs.org/",
linkSet: {
naver: "https://naver.com/",
google: "https://www.google.com/?hl=ko",
daum: "https://www.daum.net/",
},
}
},
methods: {
randomMsg() {
const randomValue = Math.random()
if (randomValue < 0.5) {
return "0.5보다 작으니 뷰를 배워야함."
} else {
return "0.5를 초과했으니 뷰를 마스터해야함."
}
},
randomLink() {
const randomValue = Math.random()
if (randomValue < 0.3) {
return this.linkSet.naver
} else if (randomValue < 0.6) {
return this.linkSet.google
} else {
return this.linkSet.daum
}
}
}
}).mount('#user-goal')- methods는 객체를 저장하는 예약어이자 키이며, methods 객체 내부에는 사용할 함수들이 들어있다.
- vue의 기능을 이용해 methods를 바로 동작시킬 수 있다.
- 메서드 호출은 {{ }} 문법과 v-bind 문법 모두에서 사용 가능하다.
한편...
- methods 내부 함수에서 this 키워드를 이용해 data 메서드의 return값을 사용할 수 있는 것은 상당히 이질적이다.
(this 키워드는 보통 생성된 인스턴스를 참조하는 것이 정상이다.
data 내부의 객체를 참조할 수 있게 되는건 이례적이다.) - vue는 data가 반환하는 데이터 전체 데이터를 병합해서 전역 Vue 인스턴스의 객체를 만든다.
즉, vue.createApp 객체를 만든다. - 따라서 vue.createApp 내부에서는 this를 사용하면 data 메서드가 반환하는 데이터를 활용할 수 있게 된다.
'했던것들 > Vue.JS' 카테고리의 다른 글
| 선언형 접근 방식 / vue에 대한 줄글 1 (0) | 2023.02.07 |
|---|---|
| v-html (0) | 2023.02.07 |
| interpolation과 v-bind 및 vue cdn 내부동작 추론 (0) | 2023.02.07 |
| Vue App 인스턴스 생성 및 연결 + 데이터 바인딩 (0) | 2023.02.06 |
| Vue.JS) 튜토리얼 : Attribute Binding (0) | 2023.01.21 |
