Vue组件

<template>
  <div>

<header>
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <h1><router-link :to="{name: 'iMain'}">{{ sitename }}</router-link></h1>
    </div>
    <div class="nav navbar-nav navbar-right cart">
        <!-- <router-link active-class="active" tag="button" class="btn btn-default btn-lg" :to="{name: 'Form'}"> </router-link> -->
        <!-- <button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
            <span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
        </button> -->
        <router-link active-class="active" tag="button" class="btn btn-default btn-lg" :to="{name:'Form'}">
            <span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
        </router-link>
       
    </div>
  </div>
</header>
  </div>
</template>

<script>
export default {
  name: 'my-header',
  data () {
    return {
    sitename: "Vue.js Pet Depot",
    }
  },
  props: ['cartItemCount'],
  methods: {
    showCheckout() {
      this.$router.push({name: 'Form'});
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  text-decoration: none;
  color: black;
}

.router-link-exact-active {
  color: blue;
}
.router-link-exact-active{
    color: blue;
}
</style>

组件目录：src/components

组件扩展名为：.vue

大多数.vue组件遵循一种简单的模式：

文件的顶部通常是模板所在的位置

模板由template 开始和结束标签组成，还必须在<template>标签中包含一个根元素，通常我们会输入一个<div>标签，但<header>标签也可以。

注意：一个模板中只能有一个根元素。

模板之后是<script>标签，这是我们创建Vue实例的地方。

最后是<style>标签，可以选择将CSS代码放入其中并将范围限定在组件内