[Vue.js] 버튼(button) 사용법 및 예제

button

화면 구성 시 가장 기본으로 쓰이는 버튼 구현 방법을 확인해 보겠다.

예제 1

<template>
  <div>
    <button @click="click()">클릭</button>	
    // 버튼 클릭 시 'click' 함수의 내용을 동작
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    click(){
      alert("버튼을 클릭 했습니다.")
    }
  }
}
</script>

 

<button @click="click()">클릭</button>

이 부분에 @click 은 'v-on:'을 줄여서 간단하게 나타낼 수 있다.

위 코드처럼 <button>을 만들어 주고 @click을 통해 하단 'click()' 함수의 내용을 실행시키는 원리다.

정말 간단하고 간단한 내용이다.

 

*결과 화면

SMALL

 

예제 2

이번엔 버튼을 이용한 '데이터 바인딩' 예제를 해보자

<template>
  <div>
    <div>
      문자를 입력하세요 <input type="text" v-model="text">	
      // v-model에 입력 값 저장
    </div>
    <br>
    <div>
      입력된 문자 : {{result}}	// 데이터 바인딩
    </div>
    <br>
    <button @click="click()">클릭</button>	
    // 클릭 시 'click()' 함수 호출
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      text:'',
      result:''
    }
  },
  methods:{
    click(){
      this.result = this.text	
      // result 변수에 text 변수 값 지정
    }
  }
}
</script>

 

{{result}} ← 데이터 바인딩

<input type="text" v-model="text">

이부분처럼 input을 사용하여 글자 입력 받는 칸을 만들고 v-model을 이용해 미리 만들어 놓은 'text'라는 변수에 입력 값을 저장한다.

※ v-model 이란? 사용자가 input을 통해 직접 입력한 단어를 기존에 만들어 놨던 변수에 저장할 수 있도록 도와주는 기능

 

<button @click="click()">클릭</button>

'클릭' 버튼을 누르면 click() 함수로 가서 'result' 변수에 v-model을 이용한 'text' 변수값을 넣어주고 데이터 바인딩 시킨다.

 

* 결과 화면