FRONT-END

이벤트 상속

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  앞,뒤 띄어쓰기를 삭제하고 저장한다.

컴포넌트

태그에 v-if로 boolean값으로 조절할시 html요소에 렌더링되지도않는다.

하지만 태그에 v-show로 boolean값을 조절할시 html요소에 나타나며 display:none의 스타일값으로 형태가 된다.

index값을 map(index)로 매개변수 없이 생성하는법

@click 등 이벤트 객체에서 매개변수받는법

beforeCreate: App.vue의 전체 컴포넌트(소스)가 작성되기 전

created : App.vue의 전체 컴포넌트(소스)가 작성 된 후

beforeMount: template의 html요소에 연결되기 전

Mounted: template의 html요소에 연결된 후

<h1 v-once> 화면에 보이는 값에서 더이상 변화시키지 않는다.

<h1 v-html='mesage'> message에 할당된 html소스를 h1에서 그대로 받아 html문으로 출력시킨다.

<h1 :class="msg"> h1에 class를 추가할시

Getter 와 Setter

watch

디렉티브 click 

디렉티브 If : count가 4보다클시 div가 나타난다.

  <div v-if="count >4 ">

    4보다큽니다!

  </div>

디렉티브 for : fruits배열안에 들어있는 요소들을 하나씩 fruit에 교체하며 아래에서 {{ fruit }}로 나타낸다.

<ul>

    <li

      v-for="fruit in fruits"

      :key="fruit">

      {{ fruit }}

    </li>

  </ul>

외부 Fruit.vue를 만들어 메인 App.vue로 import하기

eslint 설치

npm i -D eslint eslint-plugin-vue babel-eslint

.eslintrc.js 설정

eslint 문법 커스텀하기

eslint에 의해 틀린문법을 저장할시 자동 수정

vue cli 설치

npm i -g @vue/cli

vue 프로젝트 설치

vue create 프로젝트명

vue 개발도구들 설치

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

main.js 설정

확장자 표시무시하는법

img같은 파일들 불러와서 웹에 나타내기

npm i -D file-loader 설치

 npx degit Parkstelth/webpack-test webpack-template-folder

npx degit = 현재 디렉토리에 다운명령

Parkstelth = git 사용자이름

webpack-test git에 저장된 프로젝트

webpack-template-folder 저장 생성할 폴더

버전관리식으로 다운받을때는 git clone 명령어 사용

 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime 설치

webpack 설치

npm i -D webpack webpack-cli webpack-dev-server@next

webpack의 package.json - script 설정

#webpack은 parcel과 다르게 별도의 설정파일이 필요하다.

#webpack.config.js 설정

entry는 진입점

output은 반환하는 설정

path는 반환할 경로로 노드.js 환경이니 require로 path를 불러와 path변수로 만든다.

#정적 파일 favicon등 연결

npm i -D copy-webpack-plugin

#main.js로 css바로연결하기

main.js 에 선언 import '../css/main.css'

npm i -D css-loader style-loader 로 두개 설치