인프런 "웹 게임을 만들며 배우는 vue" 강의를 보며 작성하는 내용입니다.
https://www.inflearn.com/course/web-game-vue
Vue 라이브러리 추가하기
공식문서를 확인하면 아래와 같은 스크립트 문을 추가하라는 것을 확인할 수 있다.
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
버튼을 눌러서 화면 바꾸기
script문을 사용해서 버튼 클릭으로 텍스트 노출 관리하기
Script
<script>
const app = new Vue({
el: '#root',
data: {
liked: false,
},
methods: {
onClickButton() {
this.liked = true;
},
},
});
</script>버튼 클릭시 true로 고정되는게 싫은 경우
this.liked = !this.liked;
로 바꾼다면 동적으로 사용가능하다.
Body
아래와 같이 v를 붙여서 vue가 통제할 수 있게 할 수 있다.
v-onv-ifv-else
<body>
<div id="root">
<div v-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">Like</button>
</div>
</body>위 코드에서 알고 기억할 것은 id="root" 내부에 v-if , v-else 등을 사용해서 조건문을 사용할 수 있었다. 이들의 스코프는 동등한 형제 태그면서 인접해야한다.
인접하지 않은 경우
<div v-if="liked">좋아요 눌렀음</div>
<div>사이 가르기</div>
<button v-else v-on:click="onClickButton">Like</button>위와 같이 형제 사이가 떨어지면 사이 가르기만 화면에 그려지는 것을 확인할 수 있다.
v-else-if 도 사용가능하다고!
<div v-if="liked">좋아요 눌렀음</div>
<div v-else-if="liked">좋아요 눌렀음</div>
<div v-else-if="liked">좋아요 눌렀음</div>
<div v-else-if="liked">좋아요 눌렀음</div>
<div v-else-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">Like</button>v-else-if 또한 사용 가능하다.
이때 liked 가 위치한 “” 따옴표 내부에는 JS code 를 넣을 수 있다.
<body>
<div id="root">
<div v-if="1+2 === 3">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">Like</button>
</div>
</body>v-if 의 조건이 참이기 때문에 좋아요 눌렀음이 화면에 랜더링된다.
