Vue單文件組件開發

時間 2019-11-17

標籤 vue 文件組件開發简体版

原文原文鏈接

第一步：配置環境html

安裝cnpmvue

1 npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝@vue/clinpm

1 cnpm install -g @vue/cli

檢查版本是否正確bootstrap

1 vue --version

使用vue.server和vue.build對*.vue文件進行快速原型開發，須要安裝vue serve瀏覽器

1 cnpm install -g @vue/cli-service-global

新建一個App.vue文件測試安裝是否成功：app

1 <template>
2     <h1>Hello world!</h1>
3 </template>

在該文件當前路徑運行：學習

1 vue serve App.vue

打開瀏覽器輸入localhost:8080看到以下畫面則運行成功測試

環境安裝到此結束，接下來用一個簡單案例來學習vue的單文件組件開發。字體

第二步：簡單案例實戰ui

以一個物品清單爲例：

該案例由4個組件構成，分別是：

1. addItem.vue 添加物品

2. item.vue 物品實例

3. items.vue 物品列表

4. changeTitle 改變標題

首先，建立一個項目demo：

1 vue create demo

項目默認目錄以下，啓動主頁在public， vue源碼(包括組件)都存放到src

而後分別編寫各組件代碼

1. addItem.vue：

 1 <template>
 2     <div class="input-group">
 3         <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem">
 4         <span class="input-group-btn">
 5             <button class="btn btn-primary" @click="emitAdd">
 6                 <i class="fa fa-plus-square-o fa-lg">&nbsp;</i><span>Add</span>
 7             </button>
 8         </span>
 9     </div>
10 </template>
11 
12 <script>
13 export default {
14     data() {
15         return {
16             newItem: ''
17         }
18     },
19     methods: {
20         emitAdd() {
21             this.$emit('addItem', this.newItem);
22         }
23     }
24 }
25 </script>
26 
27 <style>
28 </style>

2. item.vue：

 1 <template>
 2     <li :class="{'removed': item.checked}" class="list-group-item">
 3         <div class="checkbox">
 4             <label>
 5                 <input type="checkbox" v-model="item.checked">
 6                 <span>{{ item.text }}</span>
 7             </label>
 8         </div>
 9     </li>
10 </template>
11 
12 <script>
13 export default {
14     props: ['item']
15 }
16 </script>
17 
18 <style>
19 .removed {
20     color: gray;
21 }
22 
23 .removed span {
24     text-decoration: line-through;
25 }
26 </style>

3. items.vue：

 1 <script>
 2 import item from './item'
 3 
 4 export default {
 5     props: ['items'],
 6     components: {
 7         item
 8     }
 9 }
10 </script>
11 
12 <template>
13     <ul class="list-group">
14         <item v-for="item in items" :key="item.id" :item="item"></item>
15     </ul>
16 </template>
17 
18 <style>
19 </style>

4. changeTitle.vue：

 1 <template>
 2     <div>
 3         <em>Change the title here:</em>
 4         <input type="text" :value="title" @input="onInput">
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     props: ['title'],
11     methods: {
12         onInput(event) {
13             this.$emit('input', event.target.value);
14         }
15     }
16 }
17 </script>

最後修改App.vue，導入上面的組件：

 1 <template>
 2     <div id="app" class="container">
 3         <h1>{{ title }}</h1>
 4         <add-item @addItem="add"></add-item><br>
 5         <items :items="items"></items>
 6         <div class="footer">
 7             <hr>
 8             <change-title :title="title" v-model="title"></change-title>
 9         </div>
10     </div>
11 </template>
12 
13 <script>
14 import addItem from './components/addItem'
15 import items from './components/items'
16 import changeTitle from './components/changeTitle'
17 
18 export default {
19     name: 'app',
20     components: {
21         addItem,
22         items,
23         changeTitle
24     },
25     data() {
26         return {
27             items: [
28                 {id: 1, text: 'Bananas', checked: true},
29                 {id: 2, text: 'Apples', checked: false}
30             ],
31             title: 'My Items List'
32         }
33     },
34     methods: {
35         add(text) {
36             this.items.push({
37                 text: text,
38                 checked: false
39             });
40         }
41     }
42 }
43 </script>
44 
45 <style>
46 </style>