vue

event handling

• 괄호 없이 사용하면 함수의 인자는 event객체를 갖는다.

• 괄호 안에 인수를 사용하면 입력된 인수가 들어있다.

• 인수와 event 객체를 모두 사용하고 싶을때는 $event 를 사용한다.

<template>
  <button @click="handler('hi', $event)">
    Click1
  </button>
  <button @click="handler('hi', $event)">
    Click1
  </button>
</template>
<script>
export default {
  methods: {
    handler(msg){
      console.log(msg);
    }
  }
}
</script>

• 하나의 태그에 여러개의 method를 호출하때는 () 를 꼭 넣어야한다.

막고 나만 실행

• @click.prevent 내장된 실행을 막는다.(event.prevent())

• 하위요소에 @click.stop 이벤트 버블링(상위로) 막기 (event.stopPropagation())

• 상위요소에 @click.capture 이벤트 캡쳐링(하위로) 일으키기

• 상위요소에 @click.self 정확하게 해당 요소만 클릭해야 동작 되도록 하기.
  ( 포함된 하위 요소 부분을 클릭하면 동작 하지 않음 )

@wheel

• 휠 이벤트 감지!

_ @wheel.passive 화면 스크롤과 로직을 따로 돌려준다.(속도 효율 ^)

@keydown

• keyboard event 감지

• @keydown.enter enter key 눌렀을때 실행

폼 입력 바인딩

• 양방향 데이터 바인딩

• v-model 디렉티브는 data에 접근하여 변경 시킨다.

• 한글을 입력할때는 $event.target.value 를 data에 연결해주는 방식으로 해야 바로 된다.

• @change input 칸에서 벗어나거나 enter를 입력하여 입력이 완료되면 data에 반영되도록 함.

• @model.lazy 또한 입력이 완료되면 반영!

• v-model.trim 앞뒤 공백을 없애준다.

컴포넌트

props

• 컴포넌트 요소 안에 내용을 입력하면 slot 태그 위치에 대치되어 생성된다.

• 입력한 내용은 태그도 함께 대치되어 생성된다. (ex. span)

<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
    },
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<template>
  <MyBtn>Banana</MyBtn>
  <MyBtn
    :color="color"
  >
  <span style="color:red;">Apple</span>
  </MyBtn>
  <MyBtn
    large
    color="royalblue"
  >Cherry</MyBtn>
</template>
<script>
import MyBtn from '~/components/MyBtn'

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

속성, 상속

• 컴포넌트에 속성값을 주면 최상위(루트) 요소에 적용된다.

• template 요소 아래 첫번째 요소를 최상위 요소라고 하는데

• 최상위요소가 여러개일 경우 컴포넌트에 주어진 속성값이 적용되지 않는다.

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1
    v-bind="$attrs"
  ></h1>
</template>
<script>
import MyBtn from '~/components/MyBtn'

export default {
  inheritAttrs: false,
  created(){
    console.log(this.$attrs)
  }
}
</script>

• 일방적인 상속을 inheritAttrs 옵션을 통해 막아주고

• $attrs 를 통해 태그에 직접 지정해준다. ( v-bind:"$attrs" )

emit

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1
    @dblclick="$emit('click', $event)"
  >
  ABC
  </h1>
</template>
<script>
import MyBtn from '~/components/MyBtn'

export default {
  emits: [
    'click'
  ]
}
</script>

• 컴포넌트에서 v-on 속성을 연결할때는 원하는 이름으로 만들어도 된다.

• @dblclick 더블 클릭 이벤트 발생

slot

• slot은 컴포넌트 내용을 대치하게 되는데

• 미리 slot 요소 사이에 작성해놓은 내용이 출력되고 컴포넌트를 사용할때 내용을 넣으면 그 내용으로 대치된다. (Fallback Contents)