Vue

Vue는 웹 페이지 화면을 개발하기 위한 javascript 프레임워크이다.여기서 보면 리액트와 차이점이 있다. 리액트는 라이브러리고 Vue는 프레임워크이다.배우기 쉽다리액트에 비해 성능이 좋다리액트의 가상돔, 앵귤러의 데이터 바인딩을 가지고 있다.긴말이 필요 없다.

Vue 프로젝트를 WebStorm을 통해 생성 해보자.WebStorm에서 Vue.js에서 프로젝트를 생성 해주자.그러면 프로젝트가 아래와 같이 생성 된다.main.js : Vue 인스턴스를 생성App.vue : 최초로 불러오는 Vuecomponents : 컴포넌트 폴더

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용컴포넌트의 데이터를 DOM에 그리는 방법으로 사용되는 문법은 중괄호를 두번 쓴다.이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스

Method는 뷰 컴포넌트 안에 기능을 정의해놓은 것 이다.method에 객체를 만들고 사용할 함수를 정의하면 된다.name 이라는 데이터를 만들어 버튼을 누르면 alert에 name을 띄우게 해보자.data 에 있던 값은 template과 methods에서 접근이 가

기존에는 스크립트에 state와 함수를 표현할 때 아래와 같이 했다Vue 3에서는 Composition API 와 setup 함수의 등장으로 컴포넌트 객체에 setup 함수를 사용할 수 있다. setup은 아래와같이 사용해서 더 간결하게 사용할 수 있다.setup을 쓰

만약 객체의 상태에 따라서 템플릿에 동적으로 표현을 해줘야할 경우 아래와 같이 한다.author.books의 길이가 0 이상이면 Yes, 아니면 No를 표현 해준다.간단한경우는 상관 없지만, 복잡하거나 양이 많아지면 template이 커진다.따라서 이런 경우 compu

일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 스타일을 동적으로 만들기 위해서다. 하지만 class와 style을 v-bind를 사용하여 할당하게되는 경우 성가시고 오류가 발생하기 쉽다. HTML 클래스 바인딩 객체로 바인딩 클래스를 동적으로 표현

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용한다. 블록은 디렉티브 표현식이 참인 경우에만 렌더링됩니다.v-else로 v-if에 해당되지 않는 else블록을 나타낼 수 있다.dog를 true로 만든 뒤 버튼을 누를 때 마다 현재 dog의 참거짓 값을 반대로 돌

v-for 디렉티브를 이용해 배열을 리스트로 랜더링 할 수 있다.items라는 배열에서 한개식 꺼내서 item에 담아 표현 해주고, idx는 배열의 순서를 나타낸다.for를 중첩으로도 사용이 가능하다.객체의 속성들을 반복하는데에도 v-for를 사용할 수 있다.순서대로

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있다.아래와 같이 사용한다.핸들러는 두 가지 종류가 있다.인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인

화면에서 데이터를 처리할 때 엘리먼트의 상태와 자바스크립트의 상태가 동기화가 되야하는 경우가 많다. 이럴 때 값을 수동으로 연결하고 이벤트리수너를 통해 변경하는것은 번거롭다. 이럴 떄 v-model 디렉티브는 단순화 하는데 도움을 준다. 기본 사용법 텍스트 imp

라이프사이클이란 Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계를 말하며 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 부른다.onMounted 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행한다.onUpdated 리랜더링 시 실행한

computed는 정해진 계산식에 따라 결과값을 반환하는 함수를 내가 호출하는 방식이다.하지만 watcher는 호출을 하는게 아니라 지정한 값이 변경할 때 마다 인지하고 알아서 수행하는 방식이다.input에 값을 입력하게 되면 watch에 의해 비동기로 함수가 실행 된

개발자가 템플릿의 엘리먼트에 직접 접근해야하는 경우가 있을 수 있다. ref로 접근하기 v-for 내부에서 ref 사용하기 ref가 v-for 내부에서 사용되면, 해당 ref는 마운트 후 엘리먼트로 채워지므로 배열 값이어야 한다. list에 있는 값을 v-for