기타/vue js (22) 썸네일형 리스트형 [Vue js] 컴포넌트 전역 vs 지역 등록 방법 오늘은 조금 헷갈릴 수 있는 컴포넌트의 전역, 지역 등록 방법에 대해 알아보도록 하겠습니다. 쉽게 설명하면 전역은 main js파일에서 컴포넌트를 등록한 것이고 지역은 사용하고자 하는 컴포넌트에 자식 컴포넌트를 등록하는 것입니다. 1. 전역 등록 방법 import BlackB from './components/BlackButton.vue' import ModifyB from './components/ModifyButton.vue' import GrayB from './components/GrayButton.vue' import Plusb from './components/PlusButton.vue' Vue.component('BlackB',BlackB) Vue.component('ModifyB',Modi.. vue js props 여러개 데이터 송수신하기 부모 컴포넌트 v-bind를 여러 개 사용해 여러 개의 데이터를 보낼 수 있습니다. 자식 컴포넌트 {{names}} {{ab}} vue js 컴포넌트 기본 사용법 컴포넌트는 vue js의 강력한 기능 중 하나입니다. 반복적으로 사용되는 코드를 컴포넌트로 만들면 재사용이 가능합니다. 1. 등록하는 방법에는 전역과 지역이 있습니다. 전역 등록은 main.js 아래 코드를 넣으면 됩니다. Vue.component(컴포넌트.name,컴포넌트) 이런 식으로 추가하면 어떤 컴포넌트에서든 사용할 수 있습니다. 지역 등록은 사용하고자 하는 부모 컴포넌트의 스크립트 태그에 아래와 같은 형식의 코드를 삽입하면 됩니다. import 컴포넌트 이름 form 컴포넌트 위치 export default{ components : { 컴포넌트 이름 } } 그럼 해당 컴포넌트에서만 사용할 수 있습니다. 전체적으로 모두 사용한다면 전역으로 일부만 사용한다면 지역으로 등록해야 합니다. 사용방법은 아.. [Vue js] 특징 및 장점 알아보기 최근 vue js가 떠오르고 있습니다. 스택오버플로우의 2019년 설문 조사에서 웹 프레임워크 2등을 차지했습니다. 1위인 react와 0.1% p차이로 단기간에 많이 좁혔습니다. vue js의 특징과 장점에 대해 알아보도록 하겠습니다. 가독성이 높고 직관적이다. 이 특징은 인기많은 언어들의 기본적인 특성입니다. 여기에 vuejs는 안정성도 있습니다. 라우팅 상태관리 등의 실제 서비스에 필요한 기능을 지원하여 빠르게 안정적인 환경 구축을 가능하게 해 줍니다. 상태 관리 설루션인 vuex는 이러한 특성을 강화합니다. 또한 모듈화가 쉽고 jquery등과 같은 자바스크립트 라이브러리를 그대로 갖다 붙여도 되기 때문에 유연합니다. 이러한 이유로 넷플릭스, 페이스북, 어도비, 알리바바 등 it공룡들이 vuejs를.. [vue js] get input value vuejs에서는 양방향 데이터 바인딩이 가능합니다. v-model을 이용하면 사용자 입력 이벤트에 대한 데이터를 업데이트합니다. 서로 다른 속성을 가질 수 있으며 서로 다른 이벤트를 전송합니다. message: {{ message }} 하나하나 입력할 때마다 문자가 하나씩 message : 이 부분에 나옵니다. 여러 줄을 한 번에 입력받을 수도 있습니다. multi: {{ message }} 위와 같이 여러줄을 입력받을 수도 있습니다. vuex actions mutations 한 번에 이해하기 오늘은 vuex의 action과 mutation에 대해 알아보도록 하겠습니다. action은 비동기 작업을 통해 state에 있는 데이터를 바꿀 수 있습니다. mutation은 동기 작업을 통해 state에 있는 데이터를 바꾸죠. components에서 직접 mutation을 commit 하는 루트는 없습니다. action을 거쳐야 하지요. 반면 action은 state를 변이 할 때 mutation을 거쳐야 합니다. 흐름도를 그리면 다음과 같습니다. action은 비동기 처리를 할 수 있기 때문에 서버와 통신할 경우 action에서 해야 합니다. action은 context.commit을 호출하여 mutation을 commit 할 수 있습니다. 조금 복잡할 수 있으니 데이터 흐름을 중심으로 우선 알아보.. vuex store state, mutation 사용법 vuex는 vue의 여러 컴포넌트 간 데이터 전달과 이벤트 통신을 한 곳에서 처리할 수 있도록 해주는 라이브러리입니다. 일반적으로 중대형 규모의 웹 애플리케이션의 경우 뷰의 컴포넌트 통신 방식인 props, eventemit이 많아져 중간에 거쳐야 할 컴포넌트가 많아지는 문제가 생깁니다. 이런 문제를 해결하기 위해 모든 데이터를 중앙 집중적으로 관리하는 것입니다. vuex는 크게 4가지 구성요소로 이루어져 있습니다. state : 컴포넌트 간에 공유할 데이터가 있는 곳입니다. 프로젝트 내에서는 어디서든 참조할 수 있습니다. mutation : state를 변경시키는 역할을 합니다. 동기 처리를 합니다. view : 데이터가 표현될 템플릿 actions : 사용자로부터 입력을 받아 처리하는 methods .. vue 컴포넌트 컴포넌트는 vue에서 가장 중요한 기능 중 하나입니다. 반복적으로 사용되는 html 코드를 재사용이 가능하도록 캡슐화합니다. 컴포넌트를 만드는 것에 앞서서 가장 중요한 것은 설계를 하는 것입니다. 어떤 부분을 컴포넌트화할지 결정해야 합니다. 설계없이 마구잡이로 생성하면 전반적인 코드의 가독성과 효율성이 저하됩니다. 컴포넌트는 전역,지역 두가지 방식으로 등록할 수 있습니다. 어떤 기준을 갖고 방식을 선택할까요? 전연등록 방식 전역변수와 같이 어느페이지,컴포넌트에서도 사용할 수 있습니다. 예시를 통해 알아보도록 하죠. Navbar.vue라는 컴포넌트가 있다고 생각해봅시다. balmostory Login Signup 위와 같이 컴포넌트를 생성해줍니다. main.js에서 아래와 같이 컴포넌트를 등록해주면 imp.. 이전 1 2 3 다음
