이전 글에서 간단히 컴포넌트를 등록하고 화면에 뿌려주는 것 까지 알아보았다. 이번에는 컴포넌트를 이용하여 검색창을 한번 만들어보겠다. 물론 서버까지 갔다오지는 않고... 우선 나는 컴포넌트와 인스턴스를 분리해주었다. 왜냐하면 해당 검색기능을 여러 곳에서 사용할 건데, 컴포넌트와 인스턴스를 같은 곳에 작성하면, 여러 곳의 el 속성이 같아야 하기 때문.. 그냥 컴포넌트 작성 파일에 인스턴스 객체를 생성하지 않으면 된다. 이렇게 컴포넌트만을 가지고 있는 js파일을 만들었다. 여기서 조금 설명할 게 있는데, 보통 template를 작성 할 때 따옴표(') 로 쓰는데, 만약 template를 이미지와 같이 길게 작성하고 싶을 때 줄바꾸기를 하고싶다! 라고 한다면 따옴표(') 대신에 억음부호(`) 로 묶어주면 된..

간단히 설명하면 컴포넌트는 블록과 같이 생각하면 되고, 여러 곳에서 재활용하기 위해 만드는 것이다. 예를 들면 게시판의 검색기능이 있다고 하면, 검색기능은 이곳저곳에서 많이 쓴다. 그럴때마다 검색기능 코드를 쓰는 것보다 "검색기능" 이라는 컴포넌트를 만들어 놓고 각 게시판에 해당 컴포넌트는 넣기만 하면 되는 것이다. 그럼 바로 컴포넌트(전역)를 만들어 보자 ============================================================================ 1. 컴포넌트 생성 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 자 이렇게 컴포넌트를 등록하였다. 로 감싸서 화면에 helloWorld!!!라는 문구를 찍어준다. template 속성은 ..

Vue를 이용하여 게시판 만드는 연습을 하는데 도중에 이러한 에러가 발생하였다. 해당 내용을 보면 component를 올바르게 등록하였는가? 라는 내용인데... 분명히 component를 등록하였다. 분명 위와 같이 해당 component를 등록하였는데 component가 등록되어 있지 않다고 하자 당황..... 이것 때문에 하루종일 헤매었다... 그러다 구글링을 하면서 Vue인스턴스가 component 보다 아래에 있어야 된다는 말을 듣고 설마... 하면서 위치를 바꿔보니 된다.... 뷰 인스턴스와 컴포넌트를 각각 javaScript파일로 만들어서 불러와서 이용을 하는 바람에 그걸 생각 못한 게 실수였다.. 뷰 인스턴스를 컴포넌트보다 먼저 불러와서 컴포넌트를 못찾음.. 뷰 인스턴스를 컴포넌트보다 아래 ..