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

조건문을 만들어 조건대로 함수를 수행할 수 있다.프로그램의 언어마다 조건문을 사용할 수 있다. vue.js에서는 v-if를 사용하여 조건문을 수행할 수 있다. 조건문이 들어맞을 경우에만 프론트엔드에 렌더링 할 수 있다.밑의 코드에서는 if, else if, else문을

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

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

computed 속성이란? 데이터와 흡사하며 어떠한 값을 계산된 값으로 제공해주는 속성을 정의한다.사용 예시)예를 들어 3개의 변수가 있고 그 3개의 변수를 하나로 합치려고 할 때 join()과 같은 제공함수를 사용하게 된다. 하지만 computed 속성을 사용할 경우

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

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

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

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