vue02加载组件

1.搭建好项目，看我上一篇博客

https://blog.csdn.net/qq_39432715/article/details/114595946

2.创建一个person.vue

<template>
  <div id="person">
    <p>名字：{{ name }}</p>
    <p>年龄： {{ age }}</p>
    <p>性别： {{ sex }}</p>
    <p>属性组成的一句话：{{ sentence() }}</p>
  </div>
</template>

<script>
export default {
  el: 'person',
  data () {
    return {
      name: '无悔纵横',
      age: '24',
      sex: '男'
    }
  },
  methods: {
    sentence: function () {
      return (
        '名字是：' + this.name + ',年龄是：' + this.age + '性别是：' + this.sex
      )
    }
  }
}
</script>

3.引用进去

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png"/>
    <test></test>
    <person></person>
  </div>
</template>

<script>
import test from './components/test'
import person from './components/person'
export default {
  name: 'app',
  components: {
    test,
    person
  }
}
</script>

<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 注意：

1.调用函数需要加()

2.调用属性用this

3.vue组件方式（生成.vue文件）不需要new Vue,外部引用需要导包