Vue單檔案模板例項

c3tc3tc3t發表於2018-02-10
Vue

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

 

相關文章