Vue.JS 클릭 이벤트 표기 - @click v-on:click

Vue.js 에서 DOM 에 클릭 이벤트 처리를 하고 싶다면 이벤트를 정의하면 된다. 그 정의 방법은 "v-on:eventname" 이런식으로 정의하면 된다. - 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 )

 

공식 사이트에서 예제를 가져오면,

https://vuejs.org/v2/guide/events.html

 

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

For example:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

 

버튼을 누를때마다 counter 가 1씩 증가하도록 된다.

신기한 것은 바로 js 구문이 동작하도록 되네. 간단한 함수는 그냥 여기서 바로 쓰고, 함수를 부를 수도 있고

 

Vue.JS 와 같은 FE를 위한 JS 를 쓰는 이유는 다들 아는 바와 같이, 예전 CGI 혹은 템플릿 베이스 프론트엔드 엔진들 처럼 페이지 리로드 혹은 서버 다녀오기 등을 피하기 위함이다. 최종 상태나 데이터만 서버로 넘어가면 되겠지...

 

참..아무튼 이 글의 목적은 Vue.js 소개가 아니라 사실 아래 내용 때문이었다. 까먹을까봐

v-on: 을 대신 쓰는 한 캐릭터 문자 "@" 

을 기억하기 위함이다.

즉,

 

@click 동일하다 v-on:click

Vue.js 설치

혹시나 (나는 몰랐기에) vue.js 를 쓰기 위해서 아주 간단하게 머 설치 없이 html에 아래 코드만 삽입하고 원하는 대로 사용할 수 있다는 사실을 알자.

개발용, 프로토타입핑은 아래 코드를 head 에 추가하자.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

개발 완료 후 배포용 버전은 아래와 같은 코드를 html <head> 섹션에 추가하면 된다.

현재 안정 버전인 2.6 인듯

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

 

이상.

머라고 불러도 쉿 조용히 하고 그냥 해

YURI MANEI 님의 사진, 출처: Pexels