FRONT-END

search.vue에서 methods의 내부 vuex(store) 실행 방법

변이 mutations

flex의 감소 비율을 없애기

flex-shrink:0

http 요청을 위한 패키지설치

npm i axios

버튼을 누를때만 비동기 처리

async-await

vuex(Store)

부모와 자식간에는 props를 사용해 데이터 전달

부모와 최하위 자식간에는 provide/inject 사용해 데이터 전달 가능

자식과 자식간에는 vuex(store)로 데이터중앙집권형으로 데이터 전달

1. 설치

npm i vuex@next

2. store폴더 내 index.js 생성으로 vuex의 설정파일 생성

3. main.js에 use로 연결 및 import stroe 선언

4.stoe폴더 내 movie나 about .js 생성

5. index.js에서 movie나 about. js 에서 export defalut로 내보낸것을 import하여 사용 선언

V-model $data 점표기법 연결

year부분 value가 없을시

value=""와 option사이 값을 주는것은 같다.

Logo 만들기

inner처럼 가운데 bootstrap을 통해 정렬하기

1. navigations로 nav태그들을 나열하기 위해 Search, Movie, About을 만들고 href로 주소도 배치한다.

2. 나열될 div에 v-for로 나열시키고 RouterLink에 :to로 href를 할당한다.

3. bootstrap처럼 버튼을 누를시 active가 되는것을 위해 active-class="active"로 하고 nav-pills로 bootstrap 양식을 맞춘다.

4. App.vue에 Header로 선언한다.

페이지 라우터 이동 연결 설정

1. npm install vue-router@4 설치

2. main.js 설정

import router from './routes/index.js' //import 추가

createApp(App).use(router).mount('#app') //.use(router)추가

3. index.js 설정import { createRouter, createWebHashHistory } from 'vue-router'

export default createRouter({history: createWebHashHistory(),routes:[{ path:'/'. //주소 뒤 경로 component:'' //Router폴더안에 있는 vue파일을 연결}]})

index.js 내부routes-component 설정하는법

bootstrap 커스텀하기-scss

1. npm install bootstrap@next로 최신 bootstrap설치

2. main.scss 선언

@import "../../node_modules/bootstrap.scss/bootstrap.scss

3. 적용할 vue에 scss 선언

<style lang="scss">

@import "~scss/main";

</style>

4. main.scss에서 custom진행

$primary: #FDC000;

@import "../../node_modules/bootstrap/scss/functions"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/variables"; //위 커스텀 적용후 import

@import "../../node_modules/bootstrap/scss/mixins"; //위 커스텀 적용후 import

props와 context로 setup 수정하기

ref로 데이터를 반응성있게 만들기

App.composition으로 변경해보기

이벤트 상속

refs

@click.prevent="handler"

.prevent 는 태그동작만 막는다.

.once 는 console동작을 1회만 한다.

@click.stop 은 곂치는요소중 .stop이 적용된 요소만 작동된다.

@click.capture // 부모요소에 적용 // 곂치는요소 누를시 부모요소(뒤) 먼저 작동후 자식요소(앞)가 작동된다.

@click.self 는 해당하는 영역이며 자기가 노출되는 영역만 정확하게 작동한다.

@wheel.passive 는 부하를 줄이기 위해 스크롤과 로직을 따로 처리해준다.

@keydown 은 뒤에 .키를 통해 키가 입력되면 작동된다.

폼입력바인딩

# v-model="msg"는 입력값이 영어에서는 잘되나 모음,자음을 합치는 한글의 경우 기존방식인

{ :value="msg"

  @input="msg=$event.target.value" }를 사용해야한다.

v-model 수식어

 v-model.lazy="msg" 와 @change='msg=$event.target.value' 가 같은것

 v-model.trim  앞,뒤 띄어쓰기를 삭제하고 저장한다.

컴포넌트