JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
웹에는 input, select등등, 특정 값을 반환해야의미를 가지는 컴포넌트들이 있다.
하지만 여러분이 이 부분에서 바인딩 때문에 문제를 삼게 될 것이다.
그 이유는 일반적인 데이터 바인딩은 단방향이기 때문이다.
바인딩에 대한 점은 이 포스팅을 참조하길 바란다.
물론 여러분은 아직 자식컴포넌트와 부모컴포넌트에 대한 개념이 옅기 때문에 컴포넌트적으로 접근하는건 좋지 못하다.
다만 지금은 input, select등의 데이터 문제를 이렇게 해결 할 수 있구나 정도로 알면 좋다.
컴포넌트에 대한 정보는 이 포스팅과 cli로 컴포넌트를 쪼개는 이 포스팅을 참조하고나서 다시보면 이해가 수월할 것이다.
<!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">
<input :value="name"><br>
{{name}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
},
});
</script>
</html>
위의 코드는 매우 쉬운 코드이다.
하지만 여러분이 틀리기 쉬운 부분이기도 하다.
한번 보도록하자.
<input :value="name"><br>
{{name}}
input의 value로 name을 준다.
그리고 아래의 바인딩으로 name을 준다고 해보자.
input으로 value를 바꾸는게 name을 바꾸는 행위일까?
만약 그렇다면 name이 바뀌게 되는 것이므로 아래의 mustache도 바뀌게 될것이다.
그러면 위와같이 출력이 될건데 한번 바꿔보자.
바뀌지 않는다...
그렇다 input의 value를 바꾸는게 현재 #app 컴포넌트의 name을 바꾸는 일과는 하등 상관이 없다.
우리가 바꾼것은 input 컴포넌트 내부의 name이다.
중요해서 밑줄을 그었다. 이점을 절대 잊어서는 안된다.
input에 데이터를 바꾼것은 다시말하지만 #app컴포넌트를 바꾼게 아니다.
따라서 만약 name을 바꾸게 하기 위해서 지금의 지식으로 해결하려면 아래와 같이 사용해야 한다.
<!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">
<input :value="name" @change="changeName($event)"><br>
{{name}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
},
methods: {
changeName($event){
this.name = $event.target.value;
}
}
});
</script>
</html>
바로 vue8강에서 소개한 이벤트 바인딩입니다.
이벤트 바인딩으로 함수를 받는다. 그리고 그 이벤트가 내부의 변수를 변경하게 하는 것이다.
그러면 그 변경된 값이 적용되게 된다.
이 방식은 전형적인 방법으로 사용된다.
그러나 매번 이렇게 사용하기는 귀찮다.
그래서 특정상황에서(라곤 하지만 매우 많은 상황이 포함됨) 사용될 수 있는 좋은 문법이 있다.
이게 바로 v-model이다.
<!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">
<input v-model="name"><br>
{{name}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
},
});
</script>
</html>
v-model을 사용하면 조금더 쉽게 적용할 수 있다.
귀찮게 이벤트 리스너를 달 필요도 없다.
중요한건 항상 이 이방법이 통하지는 않는 다는 것이다.
몇가지 예외가 존재하며 이 부분은 어쩔수 없는 부분이 있다.
그러나 일단은 v-model을 그냥 사용해도 큰 문제는 없을 것이다.
여기까지는 v-model에 대한 깊은 설명은 하지 않았다.
다만 이러한 작업을 v-model로 할 수 있다고만 이해해도 무리는 없다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-14]vuex 사용하기(state, mutation) (0) | 2018.11.06 |
|---|---|
| [Vue-13]vue cli 프로젝트 사용하기, 그리고 vue 컴포넌트 (0) | 2018.09.26 |
| [Vue-11]Router (0) | 2018.05.12 |
| [Vue-10]컴포넌트 (0) | 2018.03.13 |
| [Vue-09]이벤트 수식어 (0) | 2018.02.23 |