Add basic styles.

src/App.vue

@@ -1,6 +1,14 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
+    <NoteList />
-    <h1>Welcome to Your Vue.js App</h1>
   </div>
 </template>
+
+<script>
+import NoteList from '@/components/NoteList.vue'
+export default {
+  components: {
+    NoteList
+  }
+}
+</script>

src/components/NoteList.vue

@@ -1,14 +1,12 @@
 <template>
   <textarea
     @keyup.enter="addNote"
+    onfocus="this.value=''"
+    onblur="this.value = 'Start typing something…'"
     v-model="content"
-    cols="30"
     rows="10"
   ></textarea>
-  <button type="submit" @click="addNote">
+  <div class="note" v-for="note in notes" :key="note.id">{{ note.text }}</div>
-    Submit
-  </button>
-  <div v-for="note in notes" :key="note.id">{{ note.text }}</div>
 </template>
 
 <script>
@@ -28,4 +26,17 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+textarea {
+  width: 100%;
+  border-width: 0 0 1px 0;
+  border-color: black;
+  resize: none;
+}
+
+.note {
+  border-width: 1px;
+  padding: 5px;
+  margin-bottom: 5px;
+}
+</style>