Vue.js

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계. 기존의 프로젝트를 다 전환할 필요없이 점진적으로 전환할 수 있음.직접 script를 추가하여 프로젝트에 추가할 수 있음.vue.js를 사용하

입력할 데이터는 v-bind:value를 통해 데이터를 바인딩 할 수 있다.사용방법함수 응용 방법버튼 같이 어떤 상호작용을 수행했을 때 발동하는 함수를 의미한다.onclick 함수를 이용하여 특정한 함수를 호출했을 경우, v-on:click을 통해서 new Vue에 정

Data > 객체 혹은 함수의 형태로 vue 인스턴스가 사용할 정보를 가지고 있는 속성. Data의 선언 위의 예제는 data를 사용하는 방법을 나타낸 코드로, 프론트엔드에 data를 나타내기 위해선 {{}} 안에 data로 선언한 객체의 명과 객체 속성 이름을

이벤트 키워드를 통해서 버튼을 입력하였을 때, 데이터를 변화하고 수신할 수 있다.keyup키워드를 이용하여 키를 입력할 시, methods를 실행하도록 한다.사용방법@keyup.(키번호or키명칭).ctrl.alt.shift.meta사용 방법모든 뷰 핸들러 함수와 표현식

watch 속성에 대해 배우고 기록한다.데이터의 변형을 감지하고 계산을 수행하는 함수로, 기본적으로 Computed 속성과 매우 유사하다.watch 속성은 computed 속성보다 코드의 양이 늘어나게 되지만, Computed 속성을 쓸 수 없을 상황에서 유용하다.기본

js를 사용하면서 classList.add를 통해서 html의 요소에 클래스를 동적으로 추가하는 경우가 있다.예) 팔로우, 추가된 요소 동적할당 등.지금 이 페이지에서 알아볼 내용은 js에서 사용했던 동적 추가를 데이터의 바인딩을 통해서 클래스 스타일을 바인딩하는 방법

Spring과 Vue.js를 연동하는 방법 먼저 Spring을 연동하고 Spring의 기본 프로젝트를 설정한다 설정 방법은 다음 시리즈에 설명하고 있으니 참고하길 바랍니다. 스프링 설정방법 Vue.js란? > - 개념 사용자 인터페이스를 만들기 위한 프로그래시