# vuejs
VUE $EMIT 에 관하여
하위컴포넌트에서 상위컴포넌트로 DATA전달 및 이벤트 발생 필요 시BoardList.vue ( 상위 컴포넌트 )BoardDetail.vue ( 하위 컴포넌트 )BoardList에서 BoardDetail 컴포넌트를 import 함BoardDetail 안에서 함수를 통해
[내가 보기 위한!] Vue computed 개념 정리
내가 보기 위한 나의 성장을 위한 vuejs정리method, computed, watch등등 많은 기능들이 있긴한대 이거 언제써야되 ??라는 생각에하나씩 하나씩 정리해보기로 했다version 3.x우선 2.x에 있던 filter기능은 더 이상 사용되지 않는다고 한다.
[Vue] Provide / Inject vs Props
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법은 두 가지가 있다. 첫 번째 방법은 Props를 이용해 자식 컴포넌트에게 데이터를 전달하는 것이고 두 번째 방법은 Provide와 Inject를 이용해 데이터를 전달하는 것이다. 지금부터 두 방법의 차이점과 장단
[Vue] v-model 과 v-bind + v-on
class, style, value 등 속성(attribute)을 표현식에 동적으로 바인딩한다. 축약하여 ":"로 표현한다. class attribute를 바인딩하는 경우를 살펴보자. static은 항상 적용되고, active는 isActive가 true일 경우 적용된
[Vue] watch vs computed
감시 대상의 변경이 감지된 경우, 콜백을 실행한다. HTTP request를 보내거나, 알림 창을 띄우거나 할 때 사용한다. 프로퍼티처럼 사용하는데, 안에서 사용된 값의 변경이 감지된 경우 re-evaluate 하여 화면에 띄워준다. methods의 경우는 안에서 사용
[basic] Vuex?
복잡한 애플리케이션의 컴포너트들을 효율적으로 관리하는 Vuex 라이브러리Vuex 라이브러리 주요 속성은 state(data), getter(computed), mutation(methods), actions(비동기 methods)무수히 많은 컴포넌트의 데이터를 관리하기
Vuejs 시작하기 (프로젝트 생성, 기본구성)
cli 설치 이후 프로젝트 생성 명령어 초기세팅 이후 폴더구조 (저는 yarn으로 설치했습니다){{데이터 바인딩}}JS 데이터를 HTML에 꽂아넣는 문법속성값의 데이터 바인딩
어쩌다 Vue
이전에 vue를 사용해본적 없다가 써보게 되었다. 지원했던 회사에서 과제 조건으로 vue아니면 jquery를 사용해서 설계하라고 했기 때문이다. jquery는 정말 어쩔수 없는 경우 아니면 배우기 싫기 때문에 vue를 선택하게 되었다. vue와 react의 차이나 vu
[basic] Vue CLI?
Vue 기본적인 문법 형식 template문법만 배우면 될 줄 알았지만 역시나 Vue를 조금더 효율적이게 사용하고 빠르게 설정할 수 있게 해주는 것이 있었다. Vue CLI에 대해서 알아보자Vue Command Line Interface "프로젝트를 생성할때 명령어를
Basic of Vue.js - 1
으로 프로젝트 폴더를 만들었다면 그 안에 여러가지 것들이 있을텐데우리가 가장 주목해야할 것은 App.vue이다vue는 위와 같이 components를 생성하여 이를 조립하는 framework다예를 들면 html로 메인페이지와 서브페이지를 하드코딩하면위와 같이 <h
vuejs router에서 Unexpected token < 에러가 나면
vuejs router에서 Unexpected token < 에러가 나면 vue.config.js에 publicPath설정을 추가한다.
[basic] Vue Directive
뷰의 특징 그리고 매우 유용하다고 생각한다. 기본 디렉티브부터 확실하게 알아두는게 중요한거 같다.화면을 조작하기 위해서 vue가 재공하는 문법이다. HTML Element 안에 v- 접두사를 사용해서 표현식에 직접 값을 넣어주거나 미리 정해주었던 뷰 인스턴스와 데이터
[basic] Vue Router
Vue Router란? Vue에서 지원하는 공식 라이브러리로 라우팅 기능을 구현 할 수 있게 도와주는 것이다. 라우팅이란? >웹 페이지 간의 이동방법을 말한다. 페이지를 이동할때 서버에 요청해서 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시
[basic] Vue Component
컴포넌트는 화면의 영역을 구분하여 코드로 관리하는 것이다. Vuejs의 강력한 기능 중 하나이다. 컴포넌트 기반으로 화면을 개발하면 재사용성이 높아지고 화면 구성이 수월해진다. https://www.researchgate.net/publication/33446
[Basic] Vue Instance
Vue로 화면을 개발하기 위해서는 Vue Instance는 꼭 생성해야 한다. 아래 와 같은 방법으로 Instance를 생성 할 수 있다. new Vue 생성자 함수를 이용하여 인스턴스를 생성하면 root vue instance를 생성 할 수 있다. Root를 par
[Basic] Vue.js 란?
요즘 핫한 프런트엔드 프레임워크 중 하나인 vue.js를 접해 볼 수 있는 기회가 회사에서 생겨서 기록과 공부 목적을 위해 글을 작성해봅니다. Angular와 React의 장점들만 가져와서 만들어진 Vue.js! 시작 해보겠습니다. Vue.js란? 웹 페이지 화면을
vuejs 템플릿 런타임 컴파일러 사용하기
코드 테스트 시, 여러파일로 만들기 귀차니즘에 인라인으로 컴포넌트를 정의해서 사용하면 아래와 같은 오류가 발생한다.
vuejs 범위슬롯에 자식컴포넌트 데이터 전달하기
일반적으로 슬롯은 부모컴포넌트의 데이터로 렌더링 되어 자식컴포넌트의 슬롯영역에 렌더링 되어진다. 자식영역의 데이터로 렌더링하기 위해서는 slot태그에 자식영역의 데이터를 바인드하여 부모 slot영역에서 참조할 수 있다.
vuejs v-for에서 ref사용하기
ref 를 v-for 와 함께 사용하는 경우에는 ref는 데이터 소스를 미러링하는 자식 컴포넌트를 포함하는 배열을 얻게 됩니다.