[Vue.js] 뷰(Vue) 디렉티브 v-on 이벤트 핸들링

뷰(Vue) 디렉티브 v-on 알아보기

 

 

 

v-on

 

 

"사용자의 액션에 의해 명령을 실행하는 입력핸들링 디렉티브 입니다."

 

 

 

 

 

오늘은 복습할겸 v-if와 v-on을 함께 사용하겠습니다.

 

우선 버튼을 눌렀을때 data의 visible이 'true'와'false'를 반복하며, 'true'일 경우 <span>앨리먼트 안의 텍스트가 보여지고 'false'일 경우 사라지는 코드를 작성하겠습니다.

 

    <h1>v-on</h1> <!--Html-->
    <div  id="app"> 
         <p id="frame">
             <span v-if="visible">{{msg}}</span>  //v-if="visible"
         </p><br>
         <button  v-on:click="toggleMsg">visible = {{visible}}</button> //v-on:click="clickBtn"
    </div>

var firstApp = new Vue({ 	//JavaScript
        el: '#app',
        data :{
            msg: '오늘은 v-on을 배우고 있습니다.',
            visible : true //초기값은 true
        },
        methods: {
            toggleMsg: function(){
                this.visible = !this.visible; //visible 반대의 값을 저장
            }
        }
 })

See the Pen bGeqbxv by junheeleeme (@junheeleeme) on CodePen.

 

 

v-on을 활용하기 위해서는 Vue 인스턴스 메소드를 만들어 사용해야한다.

 

 

var app = new Vue({
     el: '#app',
     data: { 
        message: 'hello!'msg: '오늘은 v-on을 배우고 있습니다.',
        visible : true
    },
     methods: { // <--  인스턴스안에 메소드(methods)를 만들어야 한다.
        toggleMsg: function () {   //<-- 직접 메소드를 정의하는 법
          this.visible = !this.visible;
        }
    }
})

 

문법이 다른 언어랑 조금 달라서 익숙해지는데 시간이 좀 필요해 보이고 특히 괄호사용 순서가 애매하다..