웹/Vue.js
-
vue.js v- 접두어가 붙어 있는 속성, 디렉티브웹/Vue.js 2023. 5. 15. 11:38
디렉티브 디렉티브는 Vue에서 제공하는 특수 속성으로 v- 접두어가 붙어있으며 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 다양한 상황에서 DOM 요소의 행동을 제어하고, 렌더링을 최적화하는 데 사용됩니다. Vue.js는 여러 내장 디렉티브를 제공하며, 사용자 정의 디렉티브를 생성하는 것도 가능합니다. 기본적으로 내장 되어 있는 디렉티브는 v-bind, v-model, v-if(v-else-if, v-else), v-for, v-on, v-text, v-html, v-show, v-slot, v-pre, v-once 등이 있습니다. 1. 내장 디렉티브 1) v-bind Vue 인스턴스의 데이터 속성을 DOM 요소의 속성에 연결합니다. 이를 통해 동적으로 DOM 요소의 속성을 변경할 수 있습니다. 예..
-
Visual Studio Code에서 Vue.js 사용하기 2 - 프로젝트 생성웹/Vue.js 2022. 4. 19. 17:28
2022.04.18 - [프로그래밍/WEB] - Visual Studio Code에서 vue.js 사용하기 - 설치 방법 Visual Studio Code에서 vue.js 사용하기 - 설치 방법 Visual Studio Code에서 vue.js를 사용하기 전에 먼저 vue.js를 설치해야 한다. 순서는 다음과 같다. 참고로, cmd 창을 열어 npm install vue 를 입력하고 엔터하면 끝이지만 Visual Studio Code에서 터미널을.. jasmintime.com 이 전 글에서 설치를 다 하였으면 프로젝트를 생성해서 간단한 사이트를 Vue.js로 만들어 보자. 터미널에서 Vue.js 프로젝트가 위치할 경로로 이동해 준 다음 (이미 해당 경로면 안 해도 된다.) vue create 프로젝트명 ..
-
Visual Studio Code에서 Vue.js 사용하기 1 - 설치 방법웹/Vue.js 2022. 4. 18. 11:10
Visual Studio Code에서 Vue.js를 사용하기 전에 먼저 Vue.js를 설치해야 한다. 순서는 다음과 같다. 참고로, cmd 창을 열어 npm install vue 를 입력하고 엔터하면 끝이지만 Visual Studio Code에서 터미널을 실행하는 방법이 포함되었다. Visual Studio Code에서 Terminal > New Terminal를 클릭해서 cmd창을 연다. 하단에 터미널이 뜨는데 뜨지 않는다면 아래쪽 파란색 윗부분에 마우스를 올렸을 때 마우스 커서가 Vertical Resize 아이콘으로 바뀐다면 위로 끌어올려 터미널창이 숨겨진 것을 볼 수 있다. 터미널이 cmd가 아니라면 +옆에 아래 화살표를 클릭하고, Command Prompt를 선택하여 터미널을 추가한다. cmd ..