vue beiginner

template refs

javascript로 dom을 핸들링 할 경우

<template>
    <h1>{{ title }}</h1>
    <input type="text" ref="boo" />
    <button @click="handleClick">click me</button>
    <Modal />
</template>

export default {
    name: "App",
    components: { Modal },
    data() {
        return {
            title: "My First Vue App",
        };
    },
    methods: {
        handleClick() {
            console.log(this.$refs.boo);
            this.$refs.boo.classList.add("active");
            this.$refs.boo.focus();
        },
    },
};
</script>

---

style의 scoped & global

<style scoped>

• <style> 태그가 scoped 속성을 가지고있을 때, CSS는 현재 컴포넌트의 엘리먼트에만 적용된다.

하위 컴포넌트는 상위 css와 하위 css 영향을 받는다.
상, 하위가 동일시 되어있는 지정된 style을 사용하게 되면 성능저하를 가져올 수 있다. 그렇기 때문에 클래스 또는 id선택자를 사용하여 느려지지 않게 이슈를 해결할 수 있다.

만일 공통되는 속성이 있다면 global style파일을 만들어서 index에 import사용하는 것을 추천!

components Props

event 활용

emitting custom event

• 부모에게 이벤트를 전달한다.

//App.vue

<div v-if="showModal">
    <Modal
        :header="header"
        :text="text"
        theme="sale"
        @close="toggleModal"
    />
</div>


//Modal.vue
<template>
    <div class="backdrop" @click.self="closeModal">
        <div class="modal" :class="{ sale: theme === 'sale' }">
            <h1>{{ header }}</h1>
            <p>{{ text }}</p>
        </div>
    </div>
</template>

<script>
export default {
    props: ["header", "text", "theme"],
    methods: {
        closeModal() {
            this.$emit("close");
        },
    },
};
</script>

• modal.js안에서 만들어진 클릭이벤트는 this.$emit("close")를 부모로 전달한다.
• 전달받은 close emit은 @close="toggleModal"로 받는다.

click event modifiers

//app.vue (부모)
<!-- click event modifiers -->
<!-- <button @click="toggleModal">open Modal</button> -->
<!-- <button @click.alt="toggleModal">open Modal</button> -->
<button @click.shift="toggleModal">open Modal</button>

//Modal.vue
<template>
    <!-- 내부에는 이벤트 먹히지 않게하기 -->
    <div class="backdrop" @click.self="closeModal">
    <!-- <div class="backdrop" @click="closeModal"> -->
        ...
    </div>
</template>

slots

//app.vue
<template>
<div v-if="showModal">
    <Modal theme="sale" @close="toggleModal">
    	<template v-slot:links>
              <a href="#">sign up now</a>
              <a href="#">more info</a>
        </template>
        <h1>Ninja Givaway</h1>
        <p>Grab yout ninja swag for half price!</p>
    </Modal>
</div>
</template>



//modal.vue
<template>
  <div class="backdrop" @click.self="closeModal">
    <div class="modal" :class="{ sale: theme === 'sale' }">
          <slot> default slot</slot>

          <div class="action">
              <slot name="links"></slot>
          </div>
      </div>
  </div>
</template>

using teleport