Vue边学边记单文件组件 template

262 1 年前
在学习Vue单文件组件的时候,template可以作为标签,包含子组件或其他html代码,同时template也可以做为一个导出(export)的属性来添加到组件吧
<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
  },
没有了
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6