양방향 데이터 바인딩
input 태그에 입력한 값을 화면에서 확인하고 싶다면 아래와 같이 로직을 작성할 수 있을 것이다.
<body>
<div id="app">
<input type="text" @keyup="getValue">
{{ text }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "",
},
methods: {
getValue(e) {
this.text = e.target.value
}
}
});
</script>
</body>하지만 아래와 같이 v-model 을 사용하여 양방향 바인딩을 할 수도 있다.
<body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "",
},
});
</script>
</body>computed 속성
템플릿 내에 아래와 같이 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다.
<div id="example">
{{ message.split('').reverse().join('') }}
</div> <body>
<div id="app">
{{ reverseMessage }}
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "안녕하세요"
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>이와같이 복잡한 로직을 cumputed 속성에서 사용하면 가독성이 매우 향상될 것이다.
watch 속성
대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있다.
<body>
<div id="app">
{{ message }}
<button @click="changeValue">changeValue</button>
{{ updated }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "반갑습니다",
updated: "No",
},
methods: {
changeValue() {
this.message = "안녕히가세요";
this.updated = "Yes";
},
},
watch: {
message(newValue, oldValue) {
console.log(newValue, oldValue);
},
},
});
</script>
</body>watch 속성은 message 를 감시하고 있다. 이 경우 watch 속성 안에 message 라는 이름을 가진 함수를 작성할 수 있다. 이 함수는 매개변수로 newvalue 와 oldValue 를 받는다.
tenacity