개인 공부용 블로그

Vue 라우팅이란? vue화면이 전환되는 것. 사용자가 태스크 수행을 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능. URL을 변경하게 될 경우 변경된 요소만 갱신한다. (SPA 특징) 싱글페이지 어플리케이션 위키백과 Single Page Application & Routing Vue 라우터 개념 및 사용방법 #1. vue router 설치하기 설치 전에 터미널을 통해 실행되고 있던 창이 있다면 ctrl + c 로 일괄 작업을 끝낸 뒤 재실행해줄 것! (안그럼 오류남) npm install vue-router@4 **node_modules 폴더를 가보면 vue-router가 정상적으로 생긴것을 볼 수 있다. #2. router.js 파일 생성 별도의 router.js ..

custom evnet는? App.vue에 있는 기능을 자식컴포넌트에서 가져다가 사용해야 할 경우 컴포넌트 기능이 이원화됨을 방지하기 위해 사용한다. [사용 예시] 자식이 부모에게 요청할때 {{roomInformation[i].title}} $emit()

컴포넌트를 사용하기 위해서는 별도의 html파일이 필요하다. #1. 파일 생성 하기 원하는 위치에 파일 생성 필수 공통사항 1. 파일명.vue 2. 생성된 파일명 안의 형식은 아래와 같이 맞춘다. < (꺽쇠) + Enter 키를 누르면 자동완성이 되니 참고! script안의 name은 꼭 넣어주어야 한다. #2. App.vue로 돌아와서 컴포넌트로 축약한 파일 껴넣기 파일로 축약을 했다면 한줄로 입력이 가능하다. 그런데 컴포넌트가 안되는 이유는 수순을 따르지 않았기 때문. 아래의 순서처럼 등록해줘야 한다. import Discount from "./discount"; #3. 컴포넌트 사용시 주의사항 예를 들어 함수가 연동되어 있거나 하는 코드를 컴포넌트 하는 경우 onclick이 먹지 않는 등의 불편 사..

1. export (내보내기) 하기 object자료형으로 정보가 담긴 js파일을 script에 import 하기 위해서는 별도의 파일을 하나 생성해서 objuect자료의 내용을 담는다. 자료형 앞에는 export default라고 적어야 한다. 예시 (js파일 별도로 하나 만듦) 2. import 하기 📎주의사항!!! vue에서 경로지정시에는 ' ./ '

v-if사용법 메뉴얼 https://kr.vuejs.org/v2/guide/conditional.html 조건부 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org HTML 코드 상세페이지 Lorem ipsum dolor sit amet, consectetur adipisicing elit.닫기 style body {margin: 0;} div {box-sizing: border-box;} .blackBg {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; padding: 20px;} .whiteBg {width: 100%; background: r..

함수 사용시에는 methods: {} 안에 함수를 사용한다. 템플릿 문법에 script코드가 들어간다면 이것을 함수로 빼서 아래와 같이 삽입할 수 있다. 그런데 아래처럼 오류문구가 날 것이다. vue local에서 error '신고수' is not defined no-undef 라며 신고수가 정의되지 않았다고 에러가 뜨는 것을 볼 수 있다. vue 함수 사용시 주의사항!! vue함수안에서 데이터를 사용할때에는 this.

vue 문법에서 데이터바인딩으로 삽입하기 위해서는 {{}}

Vue를 깔면 아래와 같은 파일구조로 되어 있다. *node_modules : 프로젝트에 사용되는 라이브러리 *src: 코드를 작성하는 공간 *public: html, 기타 파일 보관 *package.json: 라이브러리 버전, 프로젝트 설정 기록 App.vue 파일을 열면 아래와 같은 구조로 되어 있다. --> template, script, style 여기서 img인 vue logo를 삭제해보면 아래처럼 local에서 로고가 사라진 모습을 볼 수 있다.

업무환경에서 vue를 설치해야할 일이 있어 cmd를 통해 재설치해봄 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS로 다운 고고 current로 다운받으면 최신 업그레이드된 버전이 다운 받아지는데 그럼 vue server가 실행이 안됨 (왜냐면 불안정한 버전이기 때문에) LTS버전이란? 장기 지원 버전, 곧 LTS(Long Term Support)는 일반적인 경우보다 장기간에 걸쳐 지원하도록 특별히 고안된 소프트웨어의 버전 또는 에디션이다. 이것은 특히 리눅스를 비롯한 오픈소스 프로젝트에서 적용되고 있다. 소프트웨어 개발 프로세스 및 소프트웨..