v-if 조건문

1. vue.js 시작하기

공식문서의 추천대로 node.js 랑 등등 설치한걸로 사용하기보다는

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

요거 넣어서 시작해보기

위는 개발버전, 도움되는 콘솔 경고를 포함하는 것

<!-- 상용버전, 속도와 용량이 최적화된 버전 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

2.선언적 랜더링

:vue.js의 핵심 -> 간단한 템플릿으로 DOM에서 선언적으로 랜더링을 할 수 있음

<script>

const app = new Vue({

el:'#root',// 뷰가 제어하는 요소

data :{ //데이터

liked:false,

},

methods : { // 함수들

onClickButton(){

this.liked = true;

}

}

 

})

</script>

 

데이터와 dom을 연결 시켜서 제어 가능함

<div id="root">

<div v-if="liked">좋아요누름</div>

<button v-else v-on:click ="onClickButton">Like</button>

</div>

 

요기서 v- 로 시작하는 속성을 디렉티브라고 하고 랜더링 된 dom에 특수한 반응형 동작을 하게 함

 

3.조건문 v-if

: 조건에 따라 블록을 랜더링 하기 위해 사용함.

 

-v-if : 디렉티브의 표현식이 true일 때만 랜더링됨.

-v-else : v-else 엘리멘트는 v-if 또는 v-else-if 바로 뒤에 있어야함. 그렇지 않으면 인식 불가능.

-v-else-if : else if 블록 역할을 하며 여러개를 쓸 수 있다. 이것도 v-if 또는 v-else-if 바로 뒤에 있어야함. 그렇지 않으면 인식 불가능.