vue 사용법

 

vue를 처음 배우는데 헷갈려서 작성해 보았다

 

html

 <div id="root">
    <div v-if="clicked">버튼 눌렀음</div>
    <button v-else v-on:click = "onClickButton">버튼</button>
  </div>

 

data에 연결할 태그들을  <div id = "root"></div> (id바꿔도됨)안으로  감싸줘야

 "#root"안의 태그들을 data로  연결되게 된다

new Vue 안의 el(element)  =  "#root" 를 입력해줘야 한다

 

 <div v-if="clicked">버튼 눌렀음</div>

v-if="clicked" 를 통해 data에서 clicked : false 되어서 보이지 않게 된다

v-if는 조건문과 같아서 true면 실행된다

 

v-else는 v-if나 v-else-if가 true가 아닐때 실행

지금 data의 clicked : false 가 되어있어서 v-if 가 아닌 v-else가 실행된다  

 

 

<button v-on:click = "onClickButton">버튼</button>

그냥 html은 onclick인데 vue는v-on:click으로 사용

 

 

 "onClickButton"

v-on:click을 사용해야지 Vue가 통제하는 methods 가 연결이 된다 

 

 

v가 붙은 속성안에  ""따옴표안의 것은 

data나 mathods 에 접근가능 또한 자바스크립트 코드를 사용할수있다

 

v가 붙으면 vue가 통제하면서  root안 div를 통제하게 되면서  지금 root는 vue 가 통제하고 있고

 

js

const app = new Vue({
            el: '#root',
            data : {
                clicked : false,
            },
            methods : {
                onClickButton(){
                    this.clicked = true;
                },
            },
        });

 

methods의 this는 data를 가르킨다 

this.clicked =  data.clicked

 

methods안의 속성 clicked를 false에서 true로 

date안의 liked 속성은 like버튼을 눌렀는지 안눌렀는지 판단하는 data 바뀌는 값을 말한다

 

v-on:click은  button에 click을 달음 뷰가 통제하는 methods

onClickButton 이라는 methods를 사용

 

*data의 속성명은 마음대로 지어도된다  또는 변수 들  ,(쉼표)로 추가도 가능하다

ex)

data : {

  아무거나 : false,

  아무거나2 : true 

 } 

하지만 el , data , methods는 이름 바꾸면 안된다 

 

v -if 나 v-else는 형제태그여서 인접해야한다 v-if v-else사이에 다른태그가 들어가 면 실행되지 않는다

 

 

 

 

실행순서

버튼누르기전

버튼을 누르면

버튼을 클릭하면 Methods 안 onClickButton이 실행되면서

 

 

 

data :  { clicked : false }

 원래 data의 clicked : false 였지만 버튼클릭으로 onClickButton이 실행되면서

 

 

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

 

    onClickButton(){
             this.clicked = true;
       }

 

this.clicked : true; 가 되어져

data 의 clicked가 false였던게 onClickButton인해  true가 되면서

 

   <div v-if="clicked">버튼 눌렀음</div>
   <button v-else v-on:click = "onClickButton">버튼</button>

 

v-if = "clicked" 가  실행되면서  버튼  눌렀음 이  뜨고

v-else 버튼이 사라지게 된다 

 

 

실행순서

버튼눌렀을때