板橋隊長のVue.js中級講座-Webアプリケーションを作成することで学ぶVue。js, ES6, Vuex課を整理しました.
毎日20分ちょっとVuejs中級給油.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

scopedプロパティ

単一のファイルコンポーネントが提供するプロパティを表示します.
スタイルラベルにscopedプロパティがある場合、cssはグローバルではなくコンポーネント内にのみ適用されます.
グローバルスタイルよりも優先されます.
次は公式ドキュメントのscocped cssの例

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

画面の結果

[TodoHeader.vue]

h 1ラベルでタイトルテキストを付けました.
h 1にスタイル範囲が適用されます.
重要なのは外の空白を残すことです.

<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>

[App.vue]グローバルスタイル

<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>

次のレッスンでは、TooInputコンポーネントの「保留中の保存」機能を実現します.