VUE34 [Vue] 페이지가 전환될때마다 스크롤이 처음으로 돌아가게 하는 라우터 함수 Routes > index.js 파일에서 scrollBehavior 함수를 createRouter에 등록해준다 일반함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior() { return { top: 0 } } }) 화살표함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior: () => ({ top: 0 }) }) 2022. 8. 12. [Vue] 스타일 데이터 바인딩시 케이스스타일 문제 해결하기 Vue에서 데이터를 바인딩할때는 대쉬 케이스(dash case) - 기호를 가진 데이터를 사용할 수 없다. 대신 카멜 케이스(camel case)를 사용하면 자동으로 스타일 속성에 알맞게 변경이 된다. 또는 대쉬 케이스를 따옴표로 묶어주면 사용이 가능하다. 1. camel case 사용 2. 따옴표로 대쉬 케이스를 묶어준 후 사용 결과 2022. 8. 9. [Vue] 데이터값을 바인딩해서 클래스 이름 요소에 부여하는 방법 클래스 이름으로 데이터를 바인딩하기 위해서 :을 class 앞에 부여하였다 absolute는 false이므로 class 이름으로 들어가지 않고 fixed는 true이므로 class 이름으로 들어간다 참고로 객체에서 key와 value의 이름이 같을때 하나를 생략해줄 수 있다 결과적으로 아래의 코드와 같은 결과물이 나온다 2022. 8. 9. [Vue] template에서 데이터 접근시 사용하는 키워드 $data 사용법 $data로 data() 옵션에 선언한 데이터에 접근할 수 있다 첫번째 방법: 점 표기법 $data.type은 'movie'를 의미하고 $data.number는 10을 의미한다 두번째 방법: 대괄호 표기법 $data['type']은 'movie'를 의미하고 $data['number']는 10을 의미한다 예제 2022. 8. 5. [Vue] props로 문자 데이터가 아닌 다른 데이터(숫자, 객체, 선언한 데이터 등)을 전달하는 방법 props로 문자 데이터 전달 App.vue HelloWorld.vue {{ message }} props로 문자가 아닌 다른 데이터 전달 props를 전달할때 v-bind: 디렉티브를 사용해 데이터를 전달한다. 이때 v-bind는 생략하고 :만 사용할 수 있다. App.vue :v-bind를 사용해 props값으로 숫자데이터를 전달하고 있다. 만약 :v-bind를 사용해 props값으로 문자데이터를 전달하고 싶다면 쿼트로 한번 더 감싸준다. 선언한 데이터를 속성으로 가질때도 v-bind: 디렉티브를 사용한다. // data 옵션에서 생성한 message라는 데이터를 연결했다 // v-bind:로 연결했기 때문에 message는 문자열이 아니다 2022. 7. 6. [Vue/한줄정리] 싱글 파일 컴포넌트(SFC)란? CLI로 뷰 프로젝트를 생성하고 나면 App.vue라는 파일이 자동으로 생성되는데 코드에는 HTML, CSS, JS를 넣을 수 있는 섹션이 구분되어져 있다. App.vue 파일처럼 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 vue 확장자를 가진 파일을 싱글 파일 컴포넌트라고 말한다. App.vue 2022. 6. 30. [Vue] 컴포넌트 전역등록, 지역등록 전역등록 TheHeader 라는 컴포넌트를 전역적으로 등록해주었다. import { createApp } from 'vue'; import App from './App.vue'; import HelloWorld from './components/HelloWorld.vue'; createApp(App) .component('hello-world', HelloWorld); .mount('#app'); 지역등록 모듈 시스템에서 컴포넌트를 다른 컴포넌트에 지역적으로 등록하는 방법이다. 등록하고 싶은 컴포넌트를 import해준다. 2022. 6. 30. [Vue] vite.js로 Vue 프로젝트 시작하고 ESLint, 경로 별칭까지 설정해주기 vite.js로 Vue 프로젝트 시작하기 npm으로 설치하기 npm create vite@latest yarn으로 설치하기 yarn create vite 원하는 프레임워크 선택하기 원하는 옵션 선택하기 (자바스크립트 or 타입스크립트) package.json에 명시된 패키지들 설치해주기 npm install 프로젝트 시작하기 npm run dev eslint 설정해주기 eslint 설치해주기 npm i -D eslint eslint-plugin-vue .eslintrc.json 파일 만들어주고 eslint 설정해주기 .eslint.json 파일 생성 .eslint.json 파일에 코드 넣기 (기호따라 변경 가능) { "env": { "browser": true, "node": true }, "extend.. 2022. 6. 30. [Vue] 컴포지션 API 사용법 컴포지션 API란? Vue 프로젝트의 구성요소 data, computed, methods... 등을 유연하게 구성하여 사용할 수 있도록 도와주는 API를 말한다. 컴포지션 API가 필요한 이유 규모가 큰 어플리케이션에서 코드 공유와 재사용을 높이기 위해 컴포지션 API를 사용한다. 일반 Vue 프로젝트에서는 data 옵션에 데이터를 등록하고 computed 옵션 안에 연산된 데이터를 등록하며 methods 옵션 안에서는 함수를 등록해 사용해준다. 프로젝트의 규모가 커져 관리해야할 data, computed data, methods 등이 늘어나게 되면 관련된 기능을 가진 코드끼리 묶어주는 것이 좋다. 이를 도와주는 API가 composition API다. 일반 Vue 프로젝트(Options API)의 로직.. 2022. 6. 19. [Vue] 요소나 컴포넌트를 참조할 수 있는 refs 사용법 refs 특정한 요소나 컴포넌트를 등록한 이름으로 참조하는데 사용하는 속성 1. 요소 참조하기 h1 요소에 ref를 hello라는 이름으로 등록해주었다. h1요소는 등록한 ref로 참조할 수 있게 된다. 참조한 요소는 HTML 구조에 연결이 된 이후에 엑세스 할 수 있으므로 mounted 라이프사이클 안에서만 등록한 요소를 ref로 찾을 수 있다. 해당 요소를 참조할때는 this.$refs.이름으로 찾아준다. Hello World 2. 컴포넌트 참조하기 요소를 참조한 것과 마찬가지로 참조하고 싶은 컴포넌트에 ref="이름"을 등록해준다. ref를 등록해주면 컴포넌트의 가장 최상위 요소를 참조해준다. 등록해준 컴포넌트의 최상위 요소는 this.$refs.컴포넌트이름.$el로 접근해준다. Hello Worl.. 2022. 6. 18. [Vue] Provide와 Inject를 사용해 데이터 전달해주기 자식의 자식 컴포넌트에게 데이터 넘겨주기 1. props ChildComp.vue ⊂ ParentComp.vue ⊂ App.vue App 컴포넌트가 자식 컴포넌트로 ParentComp를 가지고 있고 ParentComp가 자식 컴포넌트로 ChildComp를 가지고 있다고 할때 ChildComp도 역시 App 컴포넌트의 자식 컴포넌트가 된다. 이때 App 컴포넌트에서 데이터를 ChildComp에게 props로 보내주게 되면 props가 ParentComp를 거쳐갈 수 밖에 없다. 이렇게 사용하지 않을 props를 하위 컴포넌트에게 전달하기 위해 받는 현상을 props drilling이라고 한다. 예제 App 컴포넌트의 하위 컴포넌트인 ParentComp 에게 props로 msg를 전달해주었다. ParentC.. 2022. 6. 18. [Vue] 이벤트를 상속시켜주는 Emit 부모 컴포넌트의 이벤트 상속받기 부모 컴포넌트의 속성을 자식 컴포넌트가 상속받을 수 있었던 것처럼 이벤트도 자식 컴포넌트에 상속 시킬 수 있다. Banana 부모 컴포넌트에서 받은 이벤트는 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 이벤트 @click="log"가 추가된다. 만약 부모 컴포넌트의 이벤트를 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 이벤트는 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 이벤트를 상속받을 수 있는 방법 1. 부모 컴포넌트에서 상속받고 싶은 이벤트를 emits의 배열에 .. 2022. 6. 17. [Vue] v-bind="$attrs"를 사용해 컴포넌트의 속성 상속시키기 부모 컴포넌트의 속성 상속받기 부모 컴포넌트 App.vue에서 MyBtn에게 class와 style 속성을 전달해주었다. Banana 부모 컴포넌트에서 받은 속성은 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 maple이라는 클래스가 추가되고 color: red라는 style 속성도 추가되어 화면에 출력된다. 만약 부모 컴포넌트의 속성을 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 속성은 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 속성을 상속받을 수 있는 방법 $attrs로 부모 컴포넌트의 속성에 .. 2022. 6. 17. [Vue] 컴포넌트 만들기 (props 전달 방법, slot 사용하기) ⚠️ 이 포스팅은 Vue3(한국어): 컴포넌트 기초를 공부하고 정리한 블로그 포스팅입니다. ⚠️ 컴포넌트란? 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다 컴포넌트의 장점 1. 캡슐화 (모듈화) 2. 재사용성 증가 컴포넌트 만들어 불러오기 컴포넌트 만들어주기 컴포넌트를 불러오기 App.vue에서 MyBtn 컴포넌트를 불러왔기 때문에 두 컴포넌트의 관계는 App.vue(부모) MyBtn(자식) 관계가 된다. 부모 컴포넌트(상위 컴포넌트): 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트(하위 컴포넌트).. 2022. 6. 16. [Vue] 이벤트 수식어 (prevent, once, stop, capture, self, passive) ⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 이벤트 수식어 Vue는 복잡한 javascript 구현을 간단히 처리하기 위해 이벤트 수식어를 제공한다. @이벤트.이벤트수식어="수행할 이벤트" v-on:이벤트.이벤트수식어="수행할 이벤트" 이벤트 수식어의 종류 prevent: event.preventDefault()처럼 이벤트의 기본동작을 방지해준다 once: 이벤트를 한번만 실행해준다 stop: event.stopPropagation()처럼 상위 요소에 이벤트가 전파되는 것을 방지해준다 (이벤트 버블링 중단) capture: 이벤트를 특정 상위요소에서 하위요소로 전파시켜준다 (포착 단계에서만 이벤트를 발생시킨다) self: 요소가 화면에 노출된 부분에서만.. 2022. 6. 15. [Vue] 이벤트 핸들링 ⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 이벤트 청취 v-on디렉티브는 @기호로 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행해준다. 실행하고 싶은 자바스크립트 코드를 넣어도 되고 미리 만들어둔 메서드를 연결할 수도 있다. 인라인 핸들러 Hello World Hello World 메서드 핸들러 Hello World Hello World 이벤트 핸들러에 메서드 연결해주기 1. 전달해줄 인수가 없는 경우 자바스크립트에서 함수를 호출하기 위해서는 반드시 소괄호가 포함되어야했지만 Vue에서 함수를 실행할때 전달해줄 인수가 없다면 함수 이름만으로 함수를 호출할 수 있다. 인수 없이 함수만 호출해줄때 첫번째 파라미터로 event 객체를 가진다... 2022. 6. 15. [Vue] 리스트 렌더링 (v-for) ⚠️ 이 포스팅은 Vue3(한국어): 리스트 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 기본 배열 데이터로 리스트 만들어주기 기본 구조 배열에 있는 데이터를 하나씩 꺼내올때 v-for 디렉티브를 사용한다. items가 배열이라면 item in items 구조로 items에 있는 데이터에 하나씩 접근한다. 이때 상태유지를 위해 key값을 함께 제공해주어야한다. key값을 부여하면 상태를 유지시켜 준다. key는 고유한 값으로 Vue가 각각의 리스트를 분별할때 사용한다. 예를 들어, key값을 가지고 있는 v-for로 만든 어떤 리스트에 변화가 생겼을때 Vue는 이 리스트를 처음부터 다시 렌더링하지 않고 key로 각각의 요소를 구별해서 바뀐 부분만 업데이트해 준다. 한마디로 v-for와 key 속성.. 2022. 6. 14. [Vue] 조건부 렌더링 v-if, v-else, v-else-if, v-show (v-if와 v-show의 차이점) ⚠️ 이 포스팅은 Vue3(한국어): 조건부 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ v-if v-if 디렉티브는 조건에 따라 요소를 렌더링할 때 사용한다. v-if="조건" 조건이 true면 해당 요소를 렌더링하고 false면 해당 요소를 렌더링 하지 않는다. 아래의 예제에서 awesome이라는 데이터가 true일경우만 h1 요소가 렌더링된다. Vue is awesome! 예제 Click Me Hello 여러 요소에 조건문 한번에 설정해주기 부모태그로 요소를 감싸준 후 v-if 디렉티브를 부모태그에 넣어주면 조건에 만족하면 모든 자식 태그가 렌더링 된다. title paragraph 1 paragraph 2 template v-if 디렉티브를 넣기 위해 의미 없는 HTML 태그를 넣고 싶지 .. 2022. 6. 14. [Vue] 클래스와 스타일 바인딩 ⚠️ 이 포스팅은 Vue3(한국어): 클래스와 스타일 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ HTML 클래스 바인딩 인라인 스타일 바인딩하기 클래스 바인딩 객체 구문 (인라인) 객체를 data에 정의해서 class에 연결해줄 수도 있다. Hello 객체 구문 (객체 따로 빼주기) 클래스 이름 text-danger를 작은따옴표로 묶어서 object의 key값으로 사용할 수 있도록 해주었다. Hello 배열 구문 Hello 스타일 바인딩 CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case)를 사용할 수 있다. 케밥 케이스를 사용하면 작은따옴표로 감싸주어야하는 번거로움이 있기 때문에 그냥 카멜케이스로 사용하자. Hello 객체 구문 Hello 배열 구문 He.. 2022. 6. 14. [Vue] Watch 속성 정리 ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Watch 속성 Watch 속성 데이터가 변경되는 것을 감시해서 로직처리를 하고 싶을때 watch 옵션을 사용한다. 즉 watch란 데이터의 변경사항을 감시하는 옵션이다. data() { return { 데이터이름: '데이터내용', }; }, watch: { // 감시하고 싶은 데이터를 메서드로 만들어준다 데이터이름(value) { // 데이터가 변경되었을때 처리할 로직 console.log(this.데이터이름); // this.데이터이름 대신 첫번째 파라미터로 접근할 수도 있다 console.log(value); } } 예제 watch 옵션 안에 있는 msg 메서드는 msg 데이터가 업데.. 2022. 6. 13. 이전 1 2 다음
