Django, Vue
Vue 기초 문법
- -
📒 Front - end 개발
📎 Vue 란?
- Front-end 개발 효율성을 높이고, Web App의 복잡성을 관리하기 위한 라이브러리
📎 Web App 란?
- 웹 브라우저에서 실행되는 어플리케이션 소프트웨어
- 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것
📎 SPA (Single Page Application)
- Web App 과 함께 자주 등장할 용어
- CSR (Client Side Rendering) 방식으로 요청을 처리
- 필요한 페이지를 서버에 AJAX로 요청
- 서버는 화면을 그리기 위해 필요한 데이터를 JSON 방식으로 전달
- JSON 데이터를 JavaScript 로 처리, DOM 트리에 반영 (렌더링)
📒 Vue
📎 Vue 를 배우는 이유
- 타 Framework에 비해 입문자가 시작하기 쉽다.
- 구조가 매우 직관적이다.
📎 Vue 로 코드 작성하기
- Vue로 작업을 시작하기 위해 CDN 가져오기
- Vue instance 생성 (미리 정해진 속성명을 가진 1개의 Object를 의미)
- el, data 설정
- 선언적 렌더링 {{ }} (머스탱 표기법)
- input tag에 v-model 작성
- input에 값 입력 => Vue data 반영
- Vue data => DOM 반영
<!-- Vue 코드 작성 예시 -->
<body>
<div id="app">
<p id="name">name : {{ message }}</p>
<input type="text" v-model="message">
</div>
<!-- Vue CDN -->
<script>
const app = new Vue({
el: '#app',
data: {
message: '',
},
})
</script>
</body>
📒 Vue instance
📎 MVVM Pattern
- 소프트웨어 아키텍처 패턴의 일종
- 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않게 함
- View : 우리 눈데 보이는 부분 = DOM
- Model : 실제 데이터 = JSON
- View Model : View를 위한 Model,
View에서 데이터 변경시 View Model에서 데이터가 변경되고 연관된 다른 View도 변경됨
📎 View instance
- Vue CDN 가져오기
- new 연산자를 사용한 생성자 함수 호출 = vue instance 생성 (1개의 객체)
- el (element)
- Vue instance와 DOM을 mount하는 옵션
- Vue instance와 연결되지 않은 DOM 외부는 Vue의 영향을 받지 않음
- el 옵션에 #app 작성 = DOM연결
- data
- Vue instance의 데이터 객체 혹은 인스턴스 속성
- 데이터 객체는 반드시 기본객체 { } (Object) 여야 함
- 정의된 속성은 interpolation {{ }}을 통해 view에 렌더링 가능
- 추가된 객체의 각 값들은 this.(date_이름) 형태로 접근 가능
- methods
- Vue instance의 method들이 정의되는 곳
- method를 호출하여 data 변경 가능
- 메서드를 정의할 때 Arrow Function을 사용하면 안됨
'Django, Vue' 카테고리의 다른 글
| Vuex 심화 (0) | 2023.05.12 |
|---|---|
| Component 의 Data / Vuex (0) | 2023.05.11 |
| Vue 프로젝트 구조 (0) | 2023.05.10 |
| Vue 심화 문법 (0) | 2023.05.08 |
Contents
소중한 공감 감사합니다