-
Vue 데이터 바인딩 문법front-end/Vue 2024. 4. 2. 11:49728x90
1. Vue 데이터 보관 방법
<script> export default { name : 'App', data(){ return { price : 6000 } } } </script>
2. HTML 중간에 넣는 방법
<template> <div> 맛있는 붕어빵 {{ price }} 원 </div> </template>
3. App.vue 전체 코드
<template> <div> 맛있는 붕어빵 {{ price }} 원 </div> </template> <script> export default { name: 'App', data() { return { price: 6000 } } } </script> <style></style>
4. 쓰는 이유
- 실시간 렌더링 기능을 사용하기 위해서
- 웹앱 같은 효과를 주기 위해서
- HTML style, id, class도 데이터 바인딩으로 사용이 가능합니다.
728x90'front-end > Vue' 카테고리의 다른 글
Vue module.css 사용하기 (0) 2024.04.03 Vue Component 사용하기(props 전달) (0) 2024.04.03 Vue if문법 v-if (0) 2024.04.02 Vue 반복문 v-for (0) 2024.04.02 Vue 환경세팅 하기 (0) 2024.04.02