[vue] data와 v-if, v-else

Front-End/vue

[vue] data와 v-if, v-else

찐코딩 2022. 12. 11. 20:47

해당 포스팅은 인프런 웹 게임을 만들며 배우는 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 코드에서 사용하고 싶으면 중괄호 두개를 쓰고 안에 변수명을 적어주면 됨

<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가 붙은 태그의 큰 따옴표("") 안에는 자바스크립트 속성을 쓸 수 있다.

저작자표시 비영리