🔍뷰 라우터(Vue-router)란 싱글 페이지 애플리케이션(SPA) 여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는 방식. 뷰 라우터(vue-router) Vue.js에서 SPA 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인. 뷰 라우터 설치 npm install vue-router //vue router 설치 import Vue from 'vue' import VueRouter from 'vue-router'//main.js 추가 🔍뷰 라우터(Vue-router) 동작 방식 vue 설치 후 폴더 구조를 보면 아래와 같이 html 파일은 index.html 단 하나로 구성되어 있다.(SPA) index.html에서 id로 app을 매..

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다. 개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다. 1. 컴포넌트란 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다. 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식..

🔍반복문, 리스트 렌더링 Vue.js에서 반복문 렌더링으로 제공하는 디렉티브는 v-for 구문이다. 배열을 기반으로 리스트를 렌더링할 수 있다. v-for item in items 🔍예제 people로 데이터를 선언하고 각각 다른 name, age를 주고 싶을 때 아래와 같은 코드를 작성할 수 있으나, 여기서 더 많은 데이터가 추가될 경우 코드가 복잡해질 수 있다. 이런 경우 v-for 구문을 활용할 수 있다. 실행 결과 반복문에 사용될 태그에 v-for 구문을 삽입해 주면 된다. 실행해 보면 동일한 결과가 출력되고 있다. 그리고 v-for 구문에는 index값을 사용할 수 있다. index를 추가해 주면 아래와 같이 index가 붙어 출력되는 것을 확인할 수 있다. 💡공식문서를 살펴보면 2.2.0 이상..

🔍조건부 렌더링 Vue.js에서도 if문을 제공한다. Vje.js에서 조건부 렌더링 시에 사용하는 디렉티브는 v-if, v-show가 있다. 🔍예제 show에 false를 주었기 때문에 브라우저 화면에 아무 것도 나타나지 않는다. 이번에는 토글 버튼을 추가하는 코드를 작성해 보았다. true로 주었기 때문에 토글 버튼 클릭 시 Yes 메시지가 나타난다. 여러 개의 div 태그에 조건부 렌더링을 하고 싶다면 template 태그로 묶어서 사용하면 된다. 아래와 같이 v-if와 @click을 같이 줄 수도 있다. 버튼 클릭 시 숫자가 1씩 증가하는 것을 확인할 수 있다. 그렇다면 v-if와 v-show의 차이점은 무엇일까? 아래의 개발자도구에서 확인해 보면 알 수 있듯이, v-if는 조건에 따라 컴포넌트가 ..

🔍computed 속성 컴퓨티드 속성은 템플릿 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다. 아래 코드는 공식 문서에 나와있는 코드인데 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. {{ message.split('').reverse().join('') }} 만약 message 값이 안녕하세요일 경우 아래와 같이 변환된다. 자바스크립트 내장 API를 통해서도 변환 가능하지만 템플릿이 좀더 복잡해질 경우 가독성이 떨어질 수 있고, 이럴 때 computed 속성을 활용할 수 있다. 만약 메서드로 사용하고 싶다면 함수이기 때문에 괄호를 추가해주어야 에러가 나지 않는다. 🔍computed 속성 & 메서드 차이점 computed 속성은 해당 속성이 종속된 대상이 변경될 때만..

🔍데이터 양방향 바인딩 지금까지는 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 값을 확인했다. => 단방향 데이터 바인딩 두 방향 모두 데이터에 접근할 수 있도록 하는 것을 양방향 데이터 바인딩이라고 한다. 🔍폼 입력 바인딩 양방향 데이터 바인딩이 자주 사용되는 대표적인 예. v-model v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성함. 입력 유형에 따라 엘리먼트를 업데이트하는 올바른 방법으로 자동 선택함. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함. 🔍예제 텍스트박스에 입력하는 글자가 실시간으로 보여지도록 하고 싶을 때, 양방향 데이터 바인딩..

🔍Vue.js 이벤트 핸들링 기존 Javascript의 'addEventListener' 메서드, jQuery의 '.on' 메서드와 같이 이벤트를 연결하여 사용하는 기능 'v-on' 디렉티브, '@' 2가지를 사용해서 이벤트 핸들링 처리함. 🔍메서드 이벤트 핸들러 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하여 처리 click 이벤트 핸들링의 기본적인 예제를 해보기 전에 기존에 자바스크립트에서 사용했던 onclick 이벤트를 적용시켜보면 버튼을 누르면 설정해둔 alert창이 잘 뜬다. v-on:을 붙여서 이벤트 핸들러를 적용시켜도 동일하게 잘 뜬다. 이번에는 함수를 통해 처리해보았다. 더하기 버튼, 빼기 버튼이 잘 동작한다. submit에도 적용시킬 수가 있다. 입력 후 버튼을 누르면..

🔍 데이터 바인딩이란? 바인딩이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스를 의미한다. 🔍 Vue.js 데이터 바인딩 Vue.js는 대부분의 html 태그에 바인딩을 제공한다. input 태그의 text 박스에 Vue에서 정의한 inputData 데이터를 바인딩해보면 hello가 잘 들어간다. Vue.js에서 데이터를 바인딩하기 위해서는 예약어 v-bind를 사용해야 한다. (예약어는 생략 가능하다.) v-bind:속성명="데이터 또는 함수" :속성명="데이터 또는 함수" //생략 버전 input 태그의 type까지 바인딩 가능하다. 태그의 link를 바인딩하려면 아래와 같이 작성하면 된다. 함수 바인딩 실행 결과