npx로 설치하기


# https://github.com/ParkYoungWoong/vue3-webpack-template
# 폴더는 저기 링크가서 다운받기
# npx degit '폴더링크' vue3-test

#1 폴더 변경
cd Desktop

#2 프로젝트 복사
npx degit ParkYoungWoong/vue3-webpack-template#eslint vue3-test 

#3 설치
npm i vue@next

#4 실행
npm run dev
        
        

공식 홈페이지

바로가기

인스턴스와 라이프사이클

인스턴스 설명
created() 컴포넌트가 생성된 직후에 실행됨
mounted() 화면에 출력이 되고나서 실행됨
(화면에 그려진 내용 조회할때 사용)

보간법

문자열

데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문){{ }} 사용한 문자열 보간법(text interpolation)입니다.


<span>메시지: {{ msg }}</span>
        

v-once 디렉티브 를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다.


<span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>
        

원시 HTML

실제 HTML을 출력하려면 v-html디렉티브를 사용해야 합니다.

속성

Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없습니다. 대신 v-bind를 사용하세요.


<div v-bind:id="dynamicId"></div>
<!-- 조건 생성할 경우 -->
<button v-bind:disabled="true">Button</button>
        

약어

v-bind 약어


<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>
        

v-on 약어


<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>
        

Computed

Computed 속성은 기본적으로 getter 이지만, 필요할 때엔 setter 도 제공할 수 있습니다.

Watch

특정한 데이터들을 감시하는 용도

클래스와 스타일 바인딩

HTML 클래스 바인딩

v-bind:class에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다.

인라인 스타일 바인딩

CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥 케이스와 함께 따옴표 사용)를 사용할 수 있습니다.

조건부 렌더링

v-if, v-else-if, v-else

v-if는 조건에 따라 블록을 렌더링할 때 사용합니다.

블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다.


<h1 v-if="isShow">Hello?!</h1>
<h1 v-else-if="count > 3">3이상</h1>
<h1 v-else>Good</h1>
        

v-show

v-show는 단순히 엘리먼트의 CSS display 속성만을 전환합니다


<h1 v-show="ok">Hello!</h1>
        

리스트 렌더링

v-for디렉티브는 item in items형태로 특별한 문법이 필요합니다.


<ul>
  <li
    v-for="fruit in fruits"
    :key="fruit">
    {{fruit}}
  </li>
</ul>
          

이벤트 핸들링

v-on:click="methodName"나 줄여서 @click="methodName" 으로 사용합니다.


<button @click="demo">test</button>
        

이벤트 수식어

종류 설명
.prevent 기본 동작(기능) 방지 Ex) a태그 링크이동 막기
.stop 이벤트 버블링 방지 (자식 > 부모)
.capture 이벤트 캡쳐링 방치 (부모 > 자식)
.self 자신이 노출 되어 있는 부분만 클릭시 동작
.once 특정 이벤트가 발생했을때 단 한번만 실행됨
.passive 독립적으로 연산?함 Ex) 휠에 스크롤 이벤트 렉걸리는거 부담 덜어줌

키 수식어

Vue는 가장흔히 사용되는 키에서 명령어를 제공합니다.

.enter, .tab, .delete, .space, .up, .down, .left, .right


<input type="text" @keydown="handler">
        

폼 인력 바인딩

v-model디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있습니다.


<input type="text" v-model="msg">
        

v-model 수식어

종류 설명
v-model.lazy 포커스가 아웃될때 데이터가 갱신됨
v-model.number 사용자 입력이 자동으로 숫자로 형변환 됨
v-model.trim 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거

컴포넌트

컴포넌트 이름 대소문자 규칙

파스칼케이스로 정의하기

첫글자는 대문자
MyComponentName,
MtBtn 등등

Props , Slot을 이용하여 데이터 전달하기

요약 : 자식 컴포넌트에서 prop속성으로 각각 속성 정의 가능, slot 태그로 HTML 삽입 가능

App.vue


<template>
  <MyBtn color="royalblue"/>
  <MyBtn :color="color"/>
  <MyBtn large/>
  <MyBtn color="royalblue" large/>
  <MyBtn>
    <span style="color:red">Banana</span>
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components:{
    MyBtn
  },
  data(){
    return{
      color:'#000'
    }
  }
}
</script>
        

MyBtn.vue


<template>
  <div
    :class="{large}"
    :style="{backgroundColor: color}"
    class="btn">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
    color:{
      type: String,
      default: 'gray'
    },
    large: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
    &.large {
      font-size: 20px;
      padding: 10px 20px;
    }
  }
</style>
        

상속 활용하기

요약: v-bind="$attrs"inheritAttrs: false 를 사용하여 자식한테 활용하기

App.vue


<template>
  <MyBtn> 
    class="jjgodcom"
    style="color:red">
    Banana
  </MyBtn>
</template>

<script>>
import MyBtn from '~/components/MyBtn'

export default {
  components:{
    MyBtn
  }
}
</script>
        

MyBtn.vue


<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1> 
    :class="$attrs.class"
    :style="$attrs.style">
    aa
  </h1>
  <!-- 한번에 적용하기 -->
  <h1> 
    v-bind="$attrs">
    aa
  </h1>
</template>

<script>>
export default {
  inheritAttrs: false, // 속성 상속 받지 않는 코드
  created(){
    console.log(this.$attrs)
  }
}
</script>

<style> lang="scss" scoped>
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>
        

slot 활용하기

v-slottemplate에만 사용할 수 있음

App.vue


<template>
<h1>slot 컨텐츠 방법</h1>
<MyBtn>
  <template v-slot:icon>
    <span>(B)</span>
  </template>
  <template v-slot:text>
    <span>Banana</span>
  </template>
</MyBtn>
<!-- 약어로 #을 사용함 -->
<h1>slot 컨텐츠 약어로 작성하기</h1>
<MyBtn>
  <template #icon>
    <span>(B)</span>
  </template>
  <template #text>
    <span>Banana</span>
  </template>
</MyBtn>
</template>
        

MyBtn.vue


<template>
  <div class="btn">
    <slot name="icon"></slot>
    <slot name="text"></slot>
  </div>
</template>
        

Provide / inject

  • provide(){return} : 부모 컴포넌트는 데이터 제공을 위해 사용
  • inject:[배열] : 자식 요소는 데이터 사용을 위해 사용
  • provide는 반응성을 제공 안하기때문에 반응성 작업을 위해 computed()옵션을 사용합니다.

App.vue


<template>
  <button> @click="message = 'Good?'">Click</button>
  <h1>App : {{message}}</h1>
  <Parent></Parent>
</template>

<script>>
import Parent from '~/components/Parent'
import {computed} from 'vue' // 핵심코드

export default {
  components:{
    Parent
  },
  data(){
    return{
      message:'Hello!'
    }
  },
  provide(){
    return{
      msg: computed(()=>this.message) // 핵심코드
    }
  }
}
</script>
        

Parent.vue


<template>
  <Child></Child>
</template>

<script>>
import Child from '~/components/Child'

export default {
  components:{
    Child
  }
}
</script>
        

Child.vue


<template>
  <div>Child : {{msg.value}}</div>
</template>

<script>>
export default {
  inject: ['msg'] // 배열로 받아야함
}
</script>
        

refs

ref속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다.

App.vue


<template>
  <h1 ref="hello">Hello!</h1>
  <Hello ref="asd"></Hello>
</template>

<script>
import Hello from "./components/Hello.vue";

export default {
    mounted() {
        console.log(this.$refs.hello);
        console.log(this.$refs.hello.textContent);
        // Hello.vue 에 ref="good" 에 접근하는 방법
        console.log(this.$refs.asd.$refs.good);
    },
    components: {
      Hello
    }
}
</script>
        

Hello.vue


<template>
  <h1>~</h1>
  <h1 ref="good">!</h1>
</template>
        

컴포지션 API

공식 문서

composition

두개는 같은 코드지만 컴포지션 API를 이용하면 비슷한 코드끼리 묶어서 정리 가능 가독성 올라감

반응성(ref)

setup(){}은 그냥 사용하면 반응성을 제공 안합니다.

그래서 import { ref } from 'vue'를 사용해야 반응성을 제공 합니다.


import { ref } from 'vue'

export default {
  setup(){
    let count = ref(0);

    return{
      count
    }
  }
}
        

기본 옵션과 라이프 사이클

  • computed : 계산되는 내용 작성할때
  • watch : 값이 변경될떄 console.log()로 확인가능
  • created : 컴포넌트가 실행된 직후에 실행됨, setup 내부 어디서든지 사용하면 됨
  • onMounted(mounted) : HTML과 컴포넌트가 연결된 직후에 실행됨, 컴포지션 API에서는 onMounted 으로 사용됨

props, context

아직 emits 쪽은 이해를 못함

App.vue


<template>
  <MyBtn 
    class="jjgodcom"
    style="color:red;"
    color="#ff0000"
    @hello="log">
    Apple
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components:{
    MyBtn
  },
  methods:{
    log(){
      console.log('Hello World!')
    }
  }
}
</script>
        

MyBtn.vue


<template>
  <div 
    v-bind="$attrs"
    class="btn"
    @click="hello">
    <slot></slot>
  </div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  inheritAttrs:false,
  props:{
    color:{
      type: String,
      default:'gray'
    }
  },
  emits:['hello'],
  setup(props, context){

    function hello(){
      context.emit('hello')
    }

    onMounted(()=>{
      console.log('setup props');
      console.log(props.color);
      console.log('setup context');
      console.log(context.attrs);
    })

    return{
      hello
    }
  }
}
</script>
        

문법

조건문


        

타이틀h2

h3

타이틀 설명

그냥 설명

  • 글머리
콜아웃

<!DOCTYPE html> : 문서(페이지) HTML 버전을 지정
        
tr>(td>code.code)+td
종류 설명