Vue.js

프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리SPA(Single Page Application)를 구축하는데 이용 가능cf) SPA :

요소객체 안에 모델데이터의 값에 의해 v-if 조건 내용에 따라, true일 때만 보이게 하고 false이면 보이지 않게 처리화면에 랜더링하여 보일 조건을 선언하게 할 수 있다. 조건에 따라서 화면에 로딩하여 랜더링한다==> 실시간으로 로딩 후, 보이기/보이지 않기를

기본 구조1) view단 \- v-on:이벤트명 = "inline 모델데이터 처리 or 기능 메서드" \- @:이벤트명 = "inline 모델데이터 처리 or 기능 메서드" ex) v-on:click ="totAll"2) Vue 인스턴스 객체 선언 \- 기능

처리 프로세스1) vue 객체 안에 ajax를 호출하는 메서드를 선언한다.2) 이 메서드 안의 url 요청값으로 json 데이터를 출력하는 controller를 호출한다. 3) 이 json 데이터를 vue 객체의 모델 데이터에 할당하여 화면에 출력한다.

https://sample.bmaster.kro.kr 외부 json데이터 사이트https://sample.bmaster.kro.kr/contacts : 가져올 json데이터https://sample.bmaster.kro.kr/contacts

1. vue에서 model로 css 속성 처리 css 속성과 vue css 속성 비교 클래스 속성 비교 css속성 모델데이터와 연동 코드 1) html option의 value 값으로 색상명을 주어 select로 값이 변경되면 하단 글씨 색상이 바뀜

이벤트 핸들러 메서드 선언 후 이벤트 작동 시 해당 모델 데이터 변경 처리코드 1) html 2) vue구현 화면\--> 클릭해서 변경

구조화된 화면을 처리하기 위하여 사용자 정의 컴포넌트(사용자 정의 태그)를 지정하여 사용할 수 있다.기본형식

1. 컴포넌트 데이터 전달 컴포넌트는 body를 최상위로 하여 계층 구조로 컴포넌트를 가지고 있을 수 있다 1) 최상위 body ==> new Vue 객체가 활용 2) body 밑에 사용자 정의 component ==> 컴포넌트 Vue.component()

사원명과 직책명을 키워드로 받아서 사원정보가 검색되도록 설정코드 1) 검색 template 2) 검색 component \- 사용자에게 입력받는 데이터인 ename, job 선언 \- search 메서드 : emit으로 schemp라는 이벤트 핸들러

컴포넌트끼리 통신을 할 수 있는 기능이벤트 버스를 선언하고 eventBus.$emit()으로 데이터를 넘기고, eventBus.$on()으로 데이터를 받을 수 있다.예재 코드 0) 버튼을 클릭할 때 버튼 밑에 클릭한 시간이 뜨고 경계선 밑으로 클릭할때마다 클릭한 시간이