Vue單文件組件開發(fā)實現(xiàn)過程詳解

更新時間：2020年07月30日 15:36:32 作者：viewts

這篇文章主要介紹了Vue單文件組件開發(fā)實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

第一步：配置環(huán)境

安裝cnpm

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

安裝@vue/cli

cnpm install -g @vue/cli

檢查版本是否正確

vue --version

使用vue.server和vue.build對*.vue文件進行快速原型開發(fā)，需要安裝vue serve

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

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

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

在該文件當(dāng)前路徑運行：

vue serve App.vue

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

環(huán)境安裝到此結(jié)束，接下來用一個簡單案例來學(xué)習(xí)vue的單文件組件開發(fā)。

第二步：簡單案例實戰(zhàn)

以一個物品清單為例：

該案例由4個組件構(gòu)成，分別是：

1. addItem.vue 添加物品

2. item.vue 物品實例

3. items.vue 物品列表

4. changeTitle 改變標(biāo)題

首先，創(chuàng)建一個項目demo：

vue create demo

項目默認(rèn)目錄如下，啟動主頁在public， vue源碼(包括組件)都存放到src

然后分別編寫各組件代碼

1. addItem.vue：

<template>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem">
    <span class="input-group-btn">
      <button class="btn btn-primary" @click="emitAdd">
        <i class="fa fa-plus-square-o fa-lg"> </i><span>Add</span>
      </button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    emitAdd() {
      this.$emit('addItem', this.newItem);
    }
  }
}
</script>

<style>
</style>

2. item.vue：

<template>
  <li :class="{'removed': item.checked}" class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="item.checked">
        <span>{{ item.text }}</span>
      </label>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style>
.removed {
  color: gray;
}

.removed span {
  text-decoration: line-through;
}
</style>

3. items.vue：

<script>
import item from './item'

export default {
  props: ['items'],
  components: {
    item
  }
}
</script>

<template>
  <ul class="list-group">
    <item v-for="item in items" :key="item.id" :item="item"></item>
  </ul>
</template>

<style>
</style>

4. changeTitle.vue：

<template>
  <div>
    <em>Change the title here:</em>
    <input type="text" :value="title" @input="onInput">
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

最后修改App.vue，導(dǎo)入上面的組件：

<template>
  <div id="app" class="container">
    <h1>{{ title }}</h1>
    <add-item @addItem="add"></add-item><br>
    <items :items="items"></items>
    <div class="footer">
      <hr>
      <change-title :title="title" v-model="title"></change-title>
    </div>
  </div>
</template>

<script>
import addItem from './components/addItem'
import items from './components/items'
import changeTitle from './components/changeTitle'

export default {
  name: 'app',
  components: {
    addItem,
    items,
    changeTitle
  },
  data() {
    return {
      items: [
        {id: 1, text: 'Bananas', checked: true},
        {id: 2, text: 'Apples', checked: false}
      ],
      title: 'My Items List'
    }
  },
  methods: {
    add(text) {
      this.items.push({
        text: text,
        checked: false
      });
    }
  }
}
</script>

<style>
</style>

需要注意的是：每個組件必須只有一個根元素。我這里需要在public/index.html引入bootstrap樣式和font-awesome圖標(biāo)字體。

運行程序：

cnpm run serve

最后附上運行截圖：