오늘의공부(2022.07.28)

조지성·2022년 7월 28일

vue

TIL

목록 보기

64/78

디렉티브

디렉티브는 v-접두사가 있는 특수 속성
컴포넌트 (또는 DOM 요소)에게 '~~하게 작동하라'라고 지시해주는 지시문
v-cloak : 이 디렉티브는 연결된 컴포넌트 인스턴스가 컴파일을 완료 할 때 까지 엘리먼트에 남아있습니다
v-pre:이 엘리먼트와 모든 하위 엘리먼트에 대한 컴파일을 건너 뜁니다
v-once:엘리먼트와 컴포넌트를 한번(once) 만 렌더링합니다. 이후에 재렌더링 할 때 엘러먼트/컴포넌트 및 모든 하위 엘리먼트는 정적 컨텐츠로 처리되고 건너 뜁니다.

디렉티브 구성

디렉티브(directives) : v- 접두사가 있는 특수 속성으로 디렉티브의 값(value)이 변경될 때 특정 효과를 반응적으로 DOM에 적용하는 것을 말합니다.
전달인자(Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자를 가질 수 있습니다. 예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는 데 사용합니다.
동적 전달인자 : 대괄호를 사용하여 전달인자를 동적으로 삽입할 수 있습니다. <a v-bind:[attributeName]="url"> ... </a>
수식어(Modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사로 디렉티브가 특별한 방식으로 바인딩되어야 함을 나타냅니다.

notion image

<template>
  <div>
    <p>{{msg}}</p>
    <p v-text="msg"></p>

    <p v-html="htmlStr"></p>
    <p v-text="htmlStr"></p>

    <p v-pre>{{msg 안녕하세요}}</p>
    <p v-once>{{msg}}!!!</p>
  </div>
</template>

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

export default {
  setup () {

    const msg = ref("안녕하세요");

    const htmlStr = ref('<strong>안녕!!!</strong>')

    return {
      msg,
      htmlStr,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    <p> {{ subscribers}}</p>
    <p> {{ views}}</p>
    <p> {{ likes}}</p>
  </div>
  <button @click="subscribers++">sub</button>
  <button @click="views++">views</button>
  <button @click="likes++">likes</button>
    <div v-memo="[subscribers]">
    <p> {{ subscribers}}</p>
    <p> {{ views}}</p>
    <p> {{ likes}}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const subscribers = ref(4000);
    const views = ref(400);
    const likes = ref(20);

    return {
      subscribers,
      views,
      likes,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <title>Vite App</title>
    <style>
       [v-cloak]{
        display: none;
       }
    </style>
  </head>
  <body>
    <div id="app">
      <p v-cloak>{{message}}</p>
    </div>
    <script>
        const App ={
          data(){
            return {
              message : '안녕하세요'
            }
          }
        };

        setTimeout(() => {
          Vue.createApp(App).mount('#app');
        }, 3000);

    </script>
  </body>
</html>

이벤트 처리

v-on 디렉티브에서 메소드를 호출할 수 있다. 이때 매개변수로 event 객체를 받는다.

인라인 핸들링에서 event 객체에 접근할 수 있습니다. 접근하는 방법는 $event 키워드를 사용

<template>
  <div>
    <button @click="printEventInfo('Hello vue3',$event)">inline event</button>
  </div>

  <input type="text" @keyup="onKeyupHandler($event)">
</template>

<script>
export default {
  setup () {
    const printEventInfo = (message,event)=>{
      console.log(message);
      console.log(event.target);
      console.log(event.target.tagName);
    }

    const onKeyupHandler = (event)=>{
      console.log(event.key);
    }

    return {printEventInfo,onKeyupHandler}
  }
}
</script>

<style lang="scss" scoped>

</style>

이벤트 수식어

.stop = e.stopPropagation()
.prevent = e.preventDefault()
.capture = 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.
.self = 오로지 자기 자신만 호출할 수 있다. 즉, 타깃요소가 self일 때 발동된다.
.once = 해당 이벤트는 한 번만 실행된다.
.passive = 일반적으로 모바일 장치의 성능을 개선 하기 위해 터치 이벤트 리스너와 함께 사용됩니다 .

<template>
  <div>
    <div id="modifiers">
      <!-- 캡처링 설정 -->
      <div @click.capture="clickDiv">
        div
        <p @click.self="clickP">
          p
          <!-- <span @click.stop="clickSpan">span</span> -->
          <span @click="clickSpan">span</span>

        </p>
      </div>
    </div>
    <a href="www.naver.com" @click.prevent="clickA">a영역</a>
  </div>
</template>

<script>
export default {
  setup() {
    const clickDiv = () => {
      console.log('clickDiv');
    };
    const clickP = () => {
      console.log('clickP');
    };
    const clickSpan = (e) => {
      console.log('clickSpan');
      //e.stopPropagation();
    };
    const clickA = (e) => {
      // alert('stop!');
    };
    return {
      clickDiv,
      clickP,
      clickSpan,
      clickA
    }
  }
}
</script>

<style scoped>
#modifiers div,
#modifiers p,
#modifiers span {
  padding: 40px;
}

#modifiers div {
  background-color: #ccc;
}

#modifiers p {
  background-color: #999;
}

#modifiers span {
  background-color: #666;
  display: block;
}
</style>

키 수식어

.enter
.tab
.delete (”Delete”와 “Backspace” 키 모두를 수신합니다.)
.esc
.space
.up
.down
.left
.right

<template>
  <div>
    <input type="text" @keyup="addTodo">
    <ul>
      <li v-for="(todo,index) in todos" :key="index">{{todo}} </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup () {

    const todos = reactive([]);

    const addTodo = (event)=>{
      console.log(event.key);
      if (event.key === 'Enter') {
        todos.push(event.target.value);
      }
    }

    return {todos,addTodo}
  }
}
</script>

<style lang="scss" scoped>

</style>