Intro
Vue.js를 사용하기 위한 기본적인 지식을 알아볼게요!
🔵 setting
Vue Instance
가장 기본 요소이자 Vue의 중심이 되는 요소
- Vue Instance는 ViewModel이다.
- 즉, Model과 View 사이의 중개자 역할을 한다.
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>const app = new Vue({
el:'#app'
})Vue Data Binding
data object는 Vue Instace 내부에 들어가면 DOM과 반응형으로 연결
{{}}xprtmxm qhrksqjq ghkfdyd- data가 변화하면 DOM이 다시 렌더링된다.
- 데이터 내에서 빈 변수를 지정할 때는 그 값에 들어올 데이터 타입에 맞춰서 빈값을 지정하는 게 좋습니다!
<body>
<div id="app">
<!-- Mustache -->
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world!!!',
},
})
</script>
</body>- Vue 인스턴스와 DOM을 연결한다 (==바인딩한다!) : 반응형 시스템이 구축됩니다.
- 모든 코드는 데이터 중심으로 작성한다. --> 반응형 유지
- 모든 이벤트 핸들링 & DOM 조작은 Vue에게 맡긴다!
기록하는 습관은 쉽게 무너지지 않아요.