JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
저번 시간에 더불어 이제 Vue의 메소드를 사용해보자.
메소드를 모르는 사람은 없을거라 믿는다.
이 메소드는 우리가 아는 메소드와 거의 똑같은 개념이라고 생각하면된다.
여기서 메소드들은 해당 vue template(쉽게 말하면 html내부), 그리고 vue 인스턴스 내에서 모두 사용할 수 있다.
그냥 내부에 선언한 함수들과 다른점이 뭐냐면 vue인스턴스 내의 값에 접근을 할 수 있다는 것이다.
가령 아래와 같은 코드를 예시로 보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAge">{{name}}</button>
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26
},
methods:{
showAge:function () {
document.getElementById('test').textContent += this.age;
}
}
});
</script>
</html>
예시를 위한 코드이다. 중요한건 실전에서 절대 document.getElementById등의 DOM에 직접 접근하는 함수를 사용하면 안된다.
절대 까지는 아니지만 95%이상의 상황에서는 저걸 사용할 일이 없다. 아주 적은 상황에서만 사용할 수 있다.
해당 상황은 정말 예시라는 것을 알아두자.
jquery를 사용하지 않고 native js를 사용해서 버튼을 누를 때마다 현재 나이를 출력하고 싶다.
즉 이벤트를 바인딩(이벤트를 메소드와 연결) 하고 싶다는 이야기이다.
이 때 Vue의 요소에 methods를 추가시켜준다. 중요한건 method가 아니라 methods로 해야한다. 실수하지 말자.
그 다음 우리는 메소드의 요소에 showAge를 추가해줬다. 이는 함수인데 함수는 test div안에 나이를 계속해서 추가해주는 것이다.
이 까지의 해석에 어려움이 있는 사람은 없을 것이다. 애당초 해석이랄것도 없다 그냥 당연하게 사용하면 되는 것이다.
이제 연결(바인딩)되는 html쪽을 한번 보도록하자. html에서 @click이라는 구문이 있다.
이 구문은 아마 native html이였다면 onclick등으로 되어 있었을 것이다. vue에서는 바인딩 methods를 이벤트와 바인딩 할 때 @를 사용한다.
클릭 이벤트를 바인딩 하고싶다면 @click을 사용하면 된다는 것이다.
물론 고전적인 onclick등을 사용하는 것도 가능은 하다. 이에 대해서는 좀 이야기가 필요한데 여기서 설명할건 아닐것 같으므로 생략한다.
짧게 이야기하자면 onclick과 @click은 다르다는 것이다. 물론 대부분 상황에서는 여러분이 의도한데로 동작하겠지만.
이제 테스트를 해보면된다.
제대로 동작함을 알 수 있다.
이로써 html의 이벤트와 vue의 메소드를 쉽게 바인딩 할 수 있음을 알 수 있다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
|---|---|
| [Vue-05]조건문 (0) | 2018.02.20 |
| [Vue-04]데이터 바인딩 (0) | 2018.02.20 |
| [Vue-03]라이프 사이클-기본 (0) | 2018.02.20 |
| [Vue-01]Vue 인스턴스 (0) | 2018.02.18 |