728x90
반응형
Vuejs / 데이터바인딩 / 단방향 데이터바인딩 / 양방향 데이터바인딩 / 바인딩 / 데이터 상호작용 / Vue 데이터 전달 / Vue 실시간 데이터 전달
데이터 바인딩 (Data Binding)
데이터 바인딩은 사용자와 데이터를 간편하게 상호작용 할 수 있도록 하는 것이다.
UI로 보여지는 데이터와 실제 데이터가 직접 연결되어있는 것이다.
예시 코드와 실행 결과를 통해 더 자세히 알아보자.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button v-on:click="changeText">클릭해서 데이터 바인딩하기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
const app = new Vue({
el : "#app",
data:{
message: "클릭 전.",
nextMessage: "클릭 후!",
},
methods:{
changeText(){
this.message=this.nextMessage;
}
}
})
</script>
</body>
</html>실행결과
Vue Instance의 값을 수정하면 즉시 {{message}} 위치에 값이 반영된다.
이런 방법을 '선언적 렌더링' 이라고도 한다.
단방향 데이터 바인딩 (v-bind)
HTML Form의 값을 바꾸면, Vue 변수에 값이 변경된다.
v-bind 속성을 통해 구현할 수 있다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" :value="message" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
const app = new Vue({
el : "#app",
data:{
message: "[히똔] 단방향 데이터 바인딩",
},
})
</script>
</body>
</html>실행결과
양방향 데이터 바인딩 (v-model)
HTML Form <-> Vue 변수가 서로 상호작용하면서 값이 변하는 것이다.
v-model 속성으로 양방향 데이터 바인딩이 가능하다
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/>
<div>{{message}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
const app = new Vue({
el : "#app",
data:{
message : "",
},
})
</script>
</body>
</html>실행결과
[Vue.js] SSR vs CSR / SEO와 SPA
서버사이드 렌더링 (SSR) - HTML을 만드는 곳이 서버다. - 서버에서 페이지를 구현 후 클라이언트로 넘긴다. 장점 1. 초기 로딩 속도가 빠르다. 2. SEO가 CSR보다 유리하다. 단점 1. 페이지 변화 발생시
asdfmelody.tistory.com
728x90
반응형
'웹' 카테고리의 다른 글
| [Vue.js] 컴포넌트 / 라이프사이클 개념과 예시 (1) | 2022.03.26 |
|---|---|
| [Vue.js] MVVM 패턴과 동작과정 (0) | 2022.03.25 |
| [Vue.js] Virtual DOM (가상 돔) 개념과 동작방식 (0) | 2022.03.24 |
| [Vue.js] SSR(서버사이드 렌더링) vs CSR(클라이언트사이드 렌더링) / SEO와 SPA (0) | 2022.03.22 |
| [Vue.js] Vue 시작하기 : Vue.js 사용시 장점 (0) | 2022.03.20 |