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>

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

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

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

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