Vue.js - vue로 함수만들기, 이벤트 핸들러, 모달창 만들기, if문

vue에서는 js에서처럼 일일히 변수를 선언할 필요가 없다. 만약 함수를 만들어서 사용하고자 한다면, script영역의 대강 data()밑에
method : {함수명(){}} 이 안에다 만들어주면 된다.
참고로, 데이터나 UI의 상태를 저장하는 공간인 위 data영역은 state라고도 한다.
이때 주의할점이 함수 내에서 데이터를 갖다쓸때 this.데이터명으로 this.를 붙여준다는 점이다. 안하면 에러남
이벤트 핸들러 할때, 예를들어 클릭했을때 show()라는 함수가 작동하도록 하고자 한다면 v-on:click="show"을 쓴다.
여기서 주의할점은 show()가 아니라 show 함수명만 써야한다는점!
참고로 v-on은 @로 대체가능하다. @click, @mouseover 등이 있음.

모달창 만들기!
1.먼저 동적인 UI를 구성하기 위해서는 UI의 현재 상태를 데이터로 저장해두어야 한다. UI의 현재 상태를 데이터로 저장하는데, 모달창이 지금 어떻게 보여야하는지와 관련. 0(또는 false)면 모달창이 닫힌상태, 1(또는 true)이면 열린상태로.
2. 데이터에 따라 UI가 어떻게 보일지 작성한다. 이때 역시나 if를 사용하는데,
vue 문법으로는 if문을 v-if="조건식"으로 작성한다.
예를들어

<div class="" v-if="1 == 2">

는 조건식의 결과가 false이기 때문에
실행되지 않고 화면에 보이지 않게 된다!
데이터영역에 modale : false로 저장하고 저 조건식 안에 modale을 넣으면 들어가있는 값이 false이기때문에 실행되지 않을것이다. 데이터의 값이 true, false로 왔다갔다 하면서 해당 html이 보였다가 안보였다 동작하게 되는 것이다.
보통 버튼을 click하여 이벤트를 발생시키고 값을 변경시키므로
<button @click="modale = true">{{어쩌구}}
이런식으로 만들면 될것이다.
창을 끄기 위해서 버튼생성, click할때 modale = false값 들어가게 하면 스위치마냥 껐다가 켤수있는 모달창 완성!