说明

脚手架创建工程后，会自动创建一个 HelloWorld.vue ，这个组件只是一个例子，没什么用

本文创建一个组件，并显示到页面上，如下图：

代码

创建组件

在 components 目录下创建文件：UserInfo.vue，内容如下：

<template>
    <div id="app">
        <div>昵称：{{name}}</div>
        <div>性别：{{sex}}</div>
        <div>年龄：{{age}}</div>
    </div>
</template>
<script>
export default {
    name:'UserInfo', // 组件名字
    data:function(){ //组件数据，必须是函数，返回 json对象
        return {
            name:'李雷',
            sex:'男',
            age:20
        }
    }
}
</script>
<style scoped>
#app{
    border: red 1px solid;
}
</style>

修改 App.vue

修改 App.vue 文件，移除 HelloWorld 组件，使用 UserInfo 组件，内容如下：

<template>
<!-- 模板 -->
  <div id="app">
    使用UserInfo 组件（成对标签）：
    <user-info></user-info>
    ------------------------------<br>
    ------------------------------<br>
    使用UserInfo 组件（单独一个标签）：
    <user-info/>
  </div>
</template>

<script>
//引入 UserInfo 组件
import UserInfo from './components/UserInfo'

export default {
  name: 'App',
  components: {
    'user-info':UserInfo //注册局部组件
  }
}
</script>

启动服务

npm run serve

访问

打开浏览器访问：http://localhost:8080/

原文出处：/show_1IX2ixl8sSlR.html