1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.     </head>
    8.     <body>
    9.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    11.         <div id="app">
    13.         </div>
    15.         <script>
    16.             //1.创建一个组件
    17.             var MyCompose = {
    18.                 //组件中不能有el el: "#app",
    19.                 //data 变了，data需要为函数
    20.                 data() {
    21.                     return{
    22.                         firstname: "dai",
    23.                         secondname: "liang",
    24.                     }
    25.                 },
    26.                 //method和computed都可以保留
    27.                 methods: {
    28.                     fullname() {
    29.                         return this.firstname + this.secondname
    30.                     }
    31.                 },
    32.                 template: `
    33.                     <h3> {{ firstname }}  {{ secondname }}  {{ fullname() }} </h3>
    34.                 `
    35.             };
    37.             //2.全局注册组件，注意最好使用驼峰写法
    38.             // Vue.component("MyComp",MyCompose);
    40.             //3.使用组件
    41.             var vm = new Vue({
    42.                 el:"#app",
    43.                 //4.局部注册组件
    44.                 components: {
    45.                     MyCompose,
    46.                 },
    47.                 template:`
    48.                 <MyCompose></MyCompose>
    49.                 `,
    50.             })
    51.         </script>
    53.     </body>
    54. </html>