vue之组件的使用（转载）

在工程目录/src下的component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
  <div id="firstcomponent">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      author: "微信公众号 jinkey-love"
    }
  }
}
</script>

<style>
</style>

uang... 不能按官网文档那样子叫我做就做，我得先试试再告诉你，我做完效果是这样子的，希望观众做完也是这样子。(迷之微笑 )

vue之组件的使用（转载）

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div ></div>所以就以这个组件作为主入口，方便 )
第一步，引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: { firstcomponent }
}

第三步，使用。
在<template></template>内加上<firstcomponent></firstcomponent>

<template>
  <div >
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstcomponent></firstcomponent>
  </div>
</template>

完成后的代码：

vue之组件的使用（转载）

这时候运行项目就ok啦。