해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다.
https://www.inflearn.com/course/web-game-vue
[무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의
간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런...
www.inflearn.com
간단한 예제이므로 cdn을 사용하여 작성한 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>좋아요</title>
</head>
<body>
<div id="root">
<div v-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton()">Like</button>
</div>
</body>
<script>
// #root를 vue가 통제하고 있음
const app = new Vue({
el: '#root',
data: {
liked: false,
},
methods: {
onClickButton() {
this.liked = true;
},
}
});
</script>
</html>
📌 el 속성
위 코드에서 첫번째 div의 id를 root로 정해주었고, el 속성에 #root를 넣어줌
이를 통해 해당 div 안에서는 생성된 Vue 인스턴스를 사용할 수 있지만, 해당 div 밖에서는 사용할 수 없음
📌 data 속성
data 속성 안에 liked를 선언해 줬는데, 이것들은 변수라고 생각하면 될 듯
(liked외의 여러가지 속성을 선언해도 된다.)
따로 자료형을 지정해줄 필요는 없음
그리고 이 변수들을 html 코드에서 사용하고 싶으면 중괄호 두개를 쓰고 안에 변수명을 적어주면 됨
<!--example--> <div>{{liked}}</div>
📌 methods 속성
body태그와 script태그의 코드를 수정할 수 있는 함수
methods 속성 안에 onClickButton() 메소드를 선언해 줌
html에서 button이 클릭되면 onClickButton() 메소드를 호출하고,
onClickButton() 메소드 안에서는 data의 liked을 true로 변경함 (🧐 여기서 this는 data를 가리키게 됨!!!!!)
📌 v-if / v-else
형제 태그면서 "인접"하여야 함 (위 예제처럼)
v-if="liked"라고 속성을 주입함으로써 data의 liked속성이 true면 해당 div가 보이고,
button태그에 v-else 속성을 주입함으로써 false이면 해당 button태그가 보인다.
📌 v.on:click
vue에서는 이런식으로 onclick 속성을 주입 (html의 onclick 속성과는 다르다는 것을 알아두자.)
기본적으로 vue의 제어를 받으면 html 코드에 v-를 명시해준다는 점, 기억해두자!
📣 v가 붙은 태그의 큰 따옴표("") 안에는 자바스크립트 속성을 쓸 수 있다.
'Front-End > vue' 카테고리의 다른 글
| [vue] 코드 저장할 때마다 웹팩 자동 저장(웹팩 감시 옵션) (0) | 2023.01.09 |
|---|---|
| [vue] 웹팩 사용하기 (0) | 2022.12.28 |
| [vue] 컴포넌트의 필요성과 특성 (0) | 2022.12.12 |
| [vue] v-model, v-on:submit, ref (0) | 2022.12.12 |
| [vue] vue는 무엇인가? / mvvm 패턴 / vue 3.0 설치부터 서버 띄우기까지!(+포트 변경) (0) | 2022.12.09 |
댓글