데이터 바인딩
-
07. 뷰 템플릿(Template)FrontEnd/Vue.js 2021. 9. 11. 15:05
뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 1. 데이터 바인딩(Data Binding) 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있습니다. 1) {{}} - 콧수염 괄호 {{ message }} > data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다. 2) v-bind v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다. v..
-
01. Vue.jsFrontEnd/Vue.js 2021. 9. 7. 11:07
1. Vue.js Vue.js는 웹 페이지 화면을 개발하기 위한 화면단 라이브러리이자 프레임워크이다. 2. Vue.js 장점 1) 배우기가 쉽다. 2) 리액트(react.js)와 앵귤러(angular.js)에 비해 성능이 우수하고 빠르다. 3) 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다. 3. Vue.js 특징 1) MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 돔 리스너(DOM Listener) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치..