Vue.js 기초셋팅

1. Vue 사용시 cdn 스크립트 추가

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

 

2.react와 마찬가지로 처음에 id="root"로 큰 div하나를 만들어주고 그 안에 마크업을 해준다.

<div id= "root">
	<div></div>
    <button>조아!</button>
</div>

<script>
	const app = new Vue({
    	el : #root, //Vue로 #data를 통제하겠다.
        data:{
        	// 통제하고자 하는 것을 데이터 선언 
        },
        methods:{
        	onClickButton(){
            // 이벤트 추가예정
            },
        }
    }) 
</script>

여기서 변수는 언제든 바꿔도 상관이 없지만 안에 들어가는 el, data, methods는 외워둘 것!

 

3.이후에 실행하고자하는 코드들을 추가해준다(button을 누르면 '눌렸음' 이라는 텍스트가 button 대신 나오게끔)

<div id= "root">
	<div v-if="liked">눌렸음</div> 
    <button v-else v-on:click="onClickButton()">조아!</button>
</div>

<script>
	const app = new Vue({
    	el : #root, //Vue로 #data를 통제하겠다.
        data:{
        	liked:false; // div에 선언한 liked를 false로 초기설정
        },
        methods:{
        	onClickButton(){
            this.liked = true ; //(data.liked = true 와 같음, 클릭이벤트가 생기면 liked는 true를 반환)
            },
        },
    }) 
</script>

여기서 html 앨리먼트 태그에 붙은 v-if, v-else-if는 앞에 v가 붙음으로서 vue가 통제하겠다는 뜻.

onClick 이런것들도 앞에 v를 붙혀주면됨.

ex) onClick -> v-on:click="onClickButton()"

 

 v-if, v-else-if 같은경우 형제이기 때문에 중간에 다른 태그나 조건문이 들어오면 에러가 발생함

<div id= "root">
	<div v-if="liked">눌렸음</div> 
    <div>에러의 원인</div>
    <button v-else v-on:click="onClickButton()">조아!</button>
</div>

예시로 이러면 작동 안됨