-
Vue.js 기초 문법 데이터 바인딩 v-Bind v-model개발 공부/PWA 2023. 9. 13. 14:00반응형
- Vue.js , Vuetify.js란?
- 기본 구조
- 단방향 바인딩과 v-Bind 디렉티브
- 양방향 바인딩과 v-model 디렉티브
- 조건문
- 반복문
- 이벤트핸들러, on
단방향 바인딩, v-Bind
- Html 어트리뷰트값에 연결하여 엘리먼트에 실시간으로 렌더링
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> .blueColor{color:blue} <!-- 1) 색상 스타일 정의 --> </style> </head> <body> <div id="main"> <h1 v-bind:class="sColorName + 'Color'">제목!</h1> <!-- 2) v_bind를 통해 blueColor style 사용 --> <input :value="sDate"> <!-- 3) v_bind 생략 가능 --> </div> <script> let app = new Vue({ el: '#main', data: { sDate: "년도 : " + new Date().getFullYear(), sColorName: 'blue' } }) </script> </body> </html>- 한쪽으로만 바인딩 되기 때문에 어트리뷰트 값 바꿔도 변수는 변하지 않음
머스태시와 v-bind 차이
<input v_bind:value="dateVal"> <!-- v-bind : HTML 어트리뷰트 값 --> <p>{{ titleVal }}</p><!-- 머스태시 : HTML 엘리먼트 값 -->1) 머스태시
2) v-bind : html의 속성 값을 넣음
양방향 바인딩, v-Model
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="main"> <p>{{ sMsg }}</p> <!-- v-model은 동기화 됨 --> <input v-model:value="sMsg"> <!-- 엘리먼트의 어트리뷰트 : 'v-model:' 다음에 명시 --> </div> <script> var main = new Vue({ el: '#main', data: { sMsg: 'rozy!' } }) </script> </body> </html>양뱡향으로 데이터 동기화되기 때문에 텍스트박스 내용 변경시 변수 값도 변경 됨
결과 화면
반응형'개발 공부 > PWA' 카테고리의 다른 글
Vue js SPA 프로젝트 생성 및 실행하기, node js 설치 (0) 2023.09.19 Vue.js 프레임워크 데이터 바인딩 조건문 if 반복문 for (0) 2023.09.13 Vue.js 프레임워크를 이용한 PWA - 뷰 시작하기, 기초 문법 (0) 2023.09.13 javascript 모듈 사용법 import, export 방법 실습 예제 (0) 2023.02.21 javascript 화살표 함수 return 생략 예제 소스 (0) 2023.02.21