캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의를 정리했습니다.
매일 20분 야금야금 Vue.js 중급 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
뷰 싱글파일 컴포넌트에서 제공하는 속성이다.
style 태그가 scoped 속성을 가지면, 전역적이 아니라 해당 컴포넌트 안에서만 css가 적용된다.
전역 스타일보다 우선 적용된다.
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
h1 태그로 제목 텍스트를 넣었다.
h1에 대하여 style scoped 를 적용했다.
바깥 여백 margin을 둔 것이 중요하다.
<template>
<header>
<h1>TODO it!</h1>
</header>
</template>
<script>
export default {
}
</script>
<style scoped>
h1 {
color: #2F3B52;
font-weight: 900;
margin: 2.5rem 0 1.5rem;
}
</style>
<template>
<div id="app">
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
export default {
components: { TodoHeader, TodoInput, TodoList, TodoFooter },
}
</script>
<style>
body {
text-align: center;
background-color: #F6F6F6;
}
input{
border-style: groove;
width: 200px;
}
button {
border-style: groove;
}
.shadow {
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>
다음 시간에는 TodoInput 컴포넌트의 할일 저장 기능을 구현한다.