HTML 코드에 Vue가 관리하는 '데이터'를 출력하거나 사용하는데 필요한 주요기능 : 보간법(여닫는 HTML 태그), v-bind(HTML 속성)
이제 애플리케이션을 좀 더 동적으로 만들어 볼 예정이다.
methods 옵션
- 호출 및 버튼 클릭과 같은 '사용자 이벤트'가 발생하는 일이 생겼을 때 실행할 수 있는 함수를 정의.
- methods에는 JavaScript 객체를 전달한다. (cf: data 옵션과 다른 점 : data는 그 자체로 함수이자 메서드)
const app = Vue.createApp({
data(){}, //또는 data: function{} 이렇게 함수 또는 메서드
methods: { // 메서드 및 함수로 만들어진 '객체'. 객체에 정의하는 프로퍼티는 항상 '함수'여야 한다.
outputGoal(){}, //methods에 들어갈 함수는 마음대로 작성 가능. 함수 이름도 자유롭게 가능.
},
})- 'data'처럼 'methods'도 고정된 이름이므로 변경 불가능
index.html
<!DOCTYPE html>
<html lang="en">
<!--head 생략-->
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<p>{{ courseGoal }}</p>
<p>{{ outputGoal() }}</p> <!--HTML코드에서 methods객체에서 정의된 함수 호출가능. 함수 뒤에 ()붙여 호출.-->
</section>
</body>
</html>보간법 또는 v-bind 구문에서도 기본적인 JS코드(표현식)을 실행할 수 있다. 그러므로 함수 호출도 가능.
ex: {{ 1+1 }}, {{ Math.random() }}
But, 복잡한 JavaScript코드는 실행 불가능하다. ex: if문
삼항연산자는 가능하다.
app.js
const app = Vue.createApp({
data(){
return {
courseGoal: 'Finish the course and learn Vue!',
}
},
methods: {
outputGoal(){
const randomNumber = Math.random(); //Vue와 관련없는 JS함수. 0과 1 사이 무작위의 숫자를 계산해준다.
if(randomNumber < 0.5) {
return 'Learn Vue!';
} else {
return 'Master Vue!';
}
}
}
})
app.mount('#user-goal');
이렇게 더 동적인 애플리케이션이 되었다. 같은 문구만 계속 나오는 것이 아니라, 새로고침을 할 때마다 문구가 바뀐다.
이렇게 동적 요소를 추가 :)
**참고
HTML코드내에 함수를 호출하여 데이터바인딩(ex:보간법, v-bind 등)을 하면, 화면에 변경이 생길 때마다 함수가 실행된다.
만약 위 코드에 counter라는 data프로퍼티가 있고, Add버튼을 클릭할 때마다 counter가 변경되어 화면에 변경이 생기면 counter와 전혀 의존성이 없는 outputGoal함수도 호출되어 문구가 바뀐다.
아래 글 참조 :)
[Udemy Vue 완벽가이드 Section2] 28. 데이터 바인딩에 사용되는 메서드 작동원리
지금까지 공부한 것 1. Dom Interaction, Templates & Data Binding - DOM의 일부분을 만드는 법을 배웠다. Vue앱을 마운팅해서 Vue앱 템플릿을 만들었다. Vue.createApp({}).mount('#app'); - 보간법, v-bind, v-html을 이용한
lion284.tistory.com
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section2] 19. v-html을 사용하여 원시 HTML콘텐츠 출력하기 (0) | 2023.06.27 |
|---|---|
| [Udemy Vue 완벽가이드 Section2] 18. Vue앱 내에서 데이터 작업하기 (this가 무엇인지) (0) | 2023.06.26 |
| [Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기 (0) | 2023.06.26 |
| [Udemy Vue 완벽가이드 Section2] 15. 보간법 및 데이터바인딩 (0) | 2023.06.25 |
| [Udemy Vue 완벽가이드 Section2] 14. Vue앱 인스턴스 생성 및 연결하기 (0) | 2023.06.25 |
