AddItemComponent.vue
1 <template> 2 <div id="add-item-template"> 3 <div class="input-group"> 4 <input @keyup.enter="addItem" v-model="newItem" placeholder="add shopping list item" type="text" class="form-control"> 5 <span class="input-group-btn"> 6 <button @click="addItem" class="btn btn-default" type="button">Add!</button> 7 </span> 8 </div> 9 </div> 10 </template> 11 12 <script> 13 export default { 14 props:['items'], 15 data: function () { 16 return { 17 newItem: '' 18 } 19 }, 20 methods: { 21 addItem: function () { 22 console.log(this.items) 23 var text; 24 25 text = this.newItem.trim(); 26 if (text) { 27 this.items.push({ 28 text: text, 29 checked: false 30 }); 31 this.newItem = ""; 32 } 33 } 34 } 35 } 36 </script>
ChangeTitleComponenet.vue
1 <template > 2 <div id="change-title-template"> 3 <em>Change the title of your shopping list here</em> 4 <input :value="value" v-on:input="onInput" /> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 props: ['value'], 11 methods: { 12 onInput: function (event) { 13 this.$emit('input', event.target.value) 14 } 15 } 16 } 17 </script>
ItemComponent.vue
1 <template> 2 <div id="item-template"> 3 <li :class="{ 'removed': item.checked }"> 4 <div class="checkbox"> 5 <label> 6 <input type="checkbox" :checked='item.checked' v-on:change="onInput"> 7 <span> 8 {{ item.text }}</span> 9 </label> 10 </div> 11 </li> 12 </div> 13 </template> 14 <script> 15 export default { 16 model: { props: 'checked', event: "change" }, 17 props: ["item",'checked'], 18 methods: { 19 onInput() { 20 this.$emit("change", event.target.checked); 21 } 22 } 23 }; 24 </script> 25 26 27 <style scoped> 28 .removed { 29 color: gray; 30 } 31 32 .removed span { 33 text-decoration: line-through; 34 } 35 </style>
ItemsComponent.vue
1 <template id="items-template"> 2 <div id="items-template"> 3 <ul> 4 <item-component v-model="item.checked" v-for="(item, index) in items" :item="item" :key="index"> 5 </item-component> 6 </ul> 7 </div> 8 </template> 9 10 <script> 11 import ItemComponent from "./ItemComponent"; 12 export default { 13 props: ["items"], 14 components: { 15 ItemComponent 16 } 17 }; 18 </script> 19 20 <style scoped> 21 ul li { 22 list-style-type: none; 23 } 24 25 ul li span { 26 margin-left: 5px; 27 } 28 </style>
App.vue
1 <template> 2 <div id="app" class="container"> 3 <h2>{{ title }}</h2> 4 <add-item-component :items="items"></add-item-component> 5 <items-component :items="items"></items-component> 6 <div class="footer"> 7 <hr/> 8 <change-title-component v-model="title"></change-title-component> 9 </div> 10 </div> 11 </template> 12 13 <script> 14 import AddItemComponent from './components/AddItemComponent' 15 import ItemsComponent from './components/ItemsComponent' 16 import ChangeTitleComponent from './components/ChangeTitleComponent' 17 export default { 18 19 components:{ 20 AddItemComponent, 21 ItemsComponent, 22 ChangeTitleComponent 23 }, 24 data() { 25 return { 26 items: [ 27 { 28 text: "Bananas", 29 checked: true 30 }, 31 { 32 text: "Apples", 33 checked: false 34 } 35 ], 36 title: "My Shopping List", 37 newItem: "" 38 }; 39 } 40 }; 41 </script> 42 43 <style> 44 .container { 45 40%; 46 margin: 20px auto 0px auto; 47 } 48 49 .footer { 50 font-size: 0.7em; 51 margin-top: 40vh; 52 } 53 </style>
main.js
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import router from './router' 5 //import ElementUI from 'element-ui' 6 //import 'element-ui/lib/theme-chalk/index.css' 7 import App from './App' 8 9 10 Vue.config.productionTip = false 11 //Vue.use(ElementUI) 12 13 14 15 16 17 new Vue({ 18 el: "#app", 19 components:{ 20 App 21 }, 22 template:"<App />" 23 });
index.html
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>learn1</title> 8 </head> 9 10 <body> 11 <div id="app"></div> 12 13 </body> 14 15 </html>