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