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>
<style>
태그가 scoped 속성을 가지고있을 때, CSS는 현재 컴포넌트의 엘리먼트에만 적용된다.하위 컴포넌트는 상위 css와 하위 css 영향을 받는다.
상, 하위가 동일시 되어있는 지정된 style을 사용하게 되면 성능저하를 가져올 수 있다. 그렇기 때문에 클래스 또는 id선택자를 사용하여 느려지지 않게 이슈를 해결할 수 있다.
만일 공통되는 속성이 있다면 global style파일을 만들어서 index에 import사용하는 것을 추천!
//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>
//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>
//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>