🔍조건부 렌더링 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를 바인딩하려면 아래와 같이 작성하면 된다. 함수 바인딩 실행 결과

🔍 Vue 인스턴스 뷰 인스턴스(Instance)는 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. Vue 생성자는 미리 정의된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장될 수 있다. 뷰 인스턴스 생성 시에는 데이터, 템플릿, 메소드 등의 옵션을 포함할 수 있는 options 객체를 전달해야 한다. var vm = new Vue({ //옵션 }) el (string | HTMLElement) : 대상이 되는 html element 또는 css selector (vm.el) template (string) : Vue 인스턴스의 마크업으로 사용할 문자열 템플릿 data(Object | Function) : 화면을 그리는데 사용하는 data를 반환하는 함수 or da..

회사에서 Vue.js로 작업을 하고 있어서 기초 공부를 시작했다. 뷰는 공식 문서가 굉장히 잘 정리되어 있어서 공식 문서랑 유튜브로 기본 공부를 시작하려고 한다. https://kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 🔍Vue 설치 방법 크롬 브라우저에 Vue Devtools 설치 직접 cdn 프로덕선 버전 CLI Vue CLI(Vue Command Line interface)는 기본 뷰 개발환경을 설정해주는 도구. VS Code 터미널 실행 후 아래 명령어로 설치. npm install -g @vue/cli +개발 툴은 VS Code 사용 예정

🤍싱글 페이지 애플리케이션(Single Page Application, SPA)이란? 서버로부터 매번 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 or 웹 사이트, 단일 페이지로 구성되어 있음. SPA에서 HTML, JS, CSS 등 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여 문서에 추가함. -> 사용자의 동작에 응답하는 방식 전통적인 웹 방식 : 새로운 페이지 요청 시마다 정적 리소스가 다운되고 전체 페이지를 다시 랜더링하는 방식을 사용. =>매번 새로고침이 발생되어 사용성이 떨어짐, 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적임. 🤍SPA 특징 1. 라우팅 사용자가 태스크를 수행하기 위해 어떤..