1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5. </head>
    6. <body>
    7. <script type="text/javascript" src="./vue.js"> </script>
    8. <div id="app" >
    9.     <!-- 编写组件标签 -->
    10.     <My> </My> 
    11. </div>
    13. <script type="text/javascript">
    15.     // 创建一个student组件
    16.     const Student = Vue.extend({
    17.         template:`
    18.         <div>
    19.         <h3>学生名称: {{ studentName}} </h3>
    20.         <h3>学生年龄: {{ age }} </h3>
    21.         <button @click="addage">年龄增加</button>
    22.         </div>
    23.         `,
    24.         data(){
    25.             return {
    26.                 studentName: '张三',
    27.                 age:18,
    28.             }
    29.         },
    30.         methods:{
    31.             addage(){
    32.                 this.age ++ 
    33.             }
    34.         }
    35.     })
    36.    //注意这里，注册组件一定要在vm前面
    37.     Vue.component("My",Student);
    41.     var vm = new Vue({
    42.         el:"#app",
    43.         data:{
    44.             myage: 18,
    45.         },
    46.     })
    48. </script>
    49. </body>
    50. </html>

    注意 注册组件这个步骤一定要在vm前面