-
Vue.js 프레임워크를 이용한 PWA - 뷰 시작하기, 기초 문법개발 공부/PWA 2023. 9. 13. 10:05반응형
- Vue.js , Vuetify.js란?
- 기본 구조
- 단방향 바인딩과 v-Bind 디렉티브
- 양방향 바인딩과 v-model 디렉티브
- 조건문
- 반복문
- 이벤트핸들러, on
Vue.js란?
- 가볍고 직관적인 프론트엔드 개발 프레임워크로 단일 페이지 어플리케이션에 적합하다.
- 링크 클릭할때마다 새로운 페이지 로드하는 방식이 아닌, 초기에 전체 페이지 로드 후 필요한 것만 비동기적으로 로드하기때문에 앱 성능 개선 가능하다.
- 가상 DOM 사용하고 조작을 최소화하여 성능 향상
* 장점
- 양방향 데이터 바인딩 : 데이터 변화가 자동으로 화면에 반영되기때문에 별도로 동기화 할 필요 없음
- 컴포넌트 기반 아키텍처 : 작은 컴포넌트로 만들어 사용하여 UI를 재사용 용이
- 가상 DOM 사용으로 가볍고 빠름 : 변경된 부분만 업데이트, 최소한의 조작만 하여 효율적임
Vue.js 시작하기, CDN 설정
<head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head>뷰의 모듈 주소를 head 사이에 넣어주면 바로 사용 가능
머스태시 사용 / 뷰 앱 구동 방법 / data 속성
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- Vue CDN 설정 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> .blue_style{color:blue} </style> </head> <body> <div id="main"> <h2 v-bind:class="colorName + '_style'">로지~</h2> <input :value="dateVal"> <!-- 속성/어트리뷰트 값 --> <!-- titleVal 값을 HTML의 엘리먼트 값으로 변환하여 표시함 --> <p>{{ titleVal }}</p><!-- 1) 머스태시 : 요소/엘리먼트 값 --> </div> <script> // Vue 객체를 생성하여 앱을 초기화하고 시작함 let app = new Vue({ el: '#main', // 2) id 선택자인 "main" div 엘리먼트와 연결 data: { titleVal: '로지로지', // 3) 머스태시로 값 전달 dateVal: new Date().getFullYear(), colorName : 'blue' } }); </script> </body> </html>1) 머스태시
변수나 함수 결과를 HTML 엘리먼트 값으로 변환하여 브라우저에 출력
2) 뷰 앱 구동
body 엘리먼트 중 id가 main인 div를 연결
3) data 속성
사용할 데이터를 변수로 선언하여 관리
결과 화면
반응형'개발 공부 > PWA' 카테고리의 다른 글
Vue.js 프레임워크 데이터 바인딩 조건문 if 반복문 for (0) 2023.09.13 Vue.js 기초 문법 데이터 바인딩 v-Bind v-model (0) 2023.09.13 javascript 모듈 사용법 import, export 방법 실습 예제 (0) 2023.02.21 javascript 화살표 함수 return 생략 예제 소스 (0) 2023.02.21 JavaScript 변수 선언 var let const 차이와 사용법 예제(+템플릿 리터럴) (0) 2023.02.15
