Vue边学边记单文件组件 template

<template>
  <div>
    <app-nav></app-nav>
    <app-index></app-index>
    <app-footer></app-footer>
  </div>
</template>
<script>
import appNav from './include/app-nav'
import appIndex from './include/app-index'
import appFooter from './include/app-footer'
export default {
  name: 'Index',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    appNav,
    appIndex,
    appFooter
  }
}
</script>
<style scoped>
</style>

上面这代代码里，组件的html代码包含在了一个单独的template标签内。

<script>
import appNav from './include/app-nav'
import appIndex from './include/app-index'
import appFooter from './include/app-footer'
export default {
  name: 'Index',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    appNav,
    appIndex,
    appFooter
  },
  template:`<div>
    <app-nav></app-nav>
    <app-index></app-index>
    <app-footer></app-footer>
  </div>`
}
</script>
<style scoped>
</style>

上面这代码，这个单文件组件通过template属性添加。

这两种添加template模板的方法都是一样的。这里用到了ES6的模板字符串，用转换成普通字符串也一样。

另外，上面两段代码，用来了ES6里的属性和方法的的简洁表示法，如：

const foo = 'bar';
const baz = {foo:foo};

可以写成：

const foo = 'bar';
const baz = {foo};

所以上面的代码中：

components:{
    appNav,
    appIndex,
    appFooter
  }

跟下面的是一回事

components:{
    appNav:appNav
    appIndex:appIndex
    appFooter:appFooter
  },