<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<div id="app">

<button v-on:click="clickBtn">클릭</button>

</div>


<script src="https://unpkg.com/vue"></script>

<script>

new Vue({

el : '#app',

methods : {

clickBtn : function(){

alert('clicked')

}

}

})


</script>

</body>

</html>





인자를 넣어서 사용할 수 있음




더하기 빼기 예제




<body>

<div id="app">
{{ year }}<br>
<button v-on:click=plus()>더하기</button>
<button v-on:click="minus()">빼기</button>
</div>
<script>
new Vue({
el: '#app',
data: {
year:2018
},
methods:{
plus(){
this.year++;
},
minus(){
this.year--;
}
}

});
</script>
</body>


'Vue' 카테고리의 다른 글

vue cli 프로젝트 생성하기 2.X, 3.X  (0) 2019.08.02
Cli설치시 에러  (0) 2019.08.02
디렉티브  (0) 2019.08.02
엑시오스  (0) 2019.08.02
뷰리소스  (0) 2019.08.02

+ Recent posts