본문 바로가기

코딩기록/Vue.js

(2)
[vue]커스텀 디렉티브 활용 서론 HTML 태그안에 v-model, v-for 같이 v로 시작하는 속성(attribute)을 디렉티브라고 합니다. 더 자세히는 v-model 같이 개발자가 따로 정의하지 않아도 vue에서 바로 쓸 수 있는 것들을 빌드인 디렉티브라고 하는데, 여기서는 개발자가 별도로 디렉티브를 정의해보고 사용하는 방법에 대해 알아보겠습니다. 목차 커스텀 디렉티브 만들기 커스텀 디렉티브 예시(입력값 제한하기) 업무효율을 높이는 방법 커스텀 디렉티브 만들기 1. 컴포넌트에 정의하기 (1) 컴포넌트 directives코드 작성 custom directive를 사용하려는 컴포넌트의 script 태그에 directive 키를 추가하고, 그 속에 오브젝트 형식으로 개발자가 사용하려는 directive를 정의합니다. 아래 예시는,..
[vue]라우팅 방식 이해하기 서론 프레임워크 vue는 SPA(Single Page Application) 방식을 사용합니다. Single page라는 말 그대로 화면에 표현되는 html 파일은 단 한개인데, 이 안에 보여질 화면 요소들을(Components) JS코드를 이용해 동적으로 보여주는 구조를 갖고 있습니다. 즉, 사이트 내에서 사용자가 다른 화면으로 이동하면, html은 그대로 있고, 사용자가 보려는 화면의 url정보를 인식하고 해당 url에 맞는 컴포넌트를 동일한 html파일 내부에서 보여주게 됩니다. 이러한 과정을 라우팅이라고 하며, url경로에 따라 보여질 파일을 (1) 사이트에 접속하자 마자 다운받아서 준비해놓을지 (2) 사용자가 요청하면 그때 서버에 요청해서 처리할지 (3) 사용자가 요청은 안했지만, 일단 브라우저..