组件 - 02.组件添加method - 《十年运维》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="./vue.js"> </script>
<div id="app" >
    <!-- 编写组件标签 -->
    <Student></Student>
</div>
<script type="text/javascript">
    // 创建一个student组件
    const Student = Vue.extend({
        template:`
        <div>
        <h3>学生名称: {{ studentName}} </h3>
        <h3>学生年龄: {{ age }} </h3>
        <button @click="addage">年龄增加</button>
        </div>
        `,
        data(){
            return {
                studentName: '张三',
                age:18,
            }
        },
        methods:{
            addage(){
                this.age ++ 
            }
        }
    })
    // 2.局部注册一个组件
    var vm = new Vue({
        el:"#app",
        data:{
            myage: 18,
        },
        components:{
            Student,
        }
    })
</script>
</body>
</html>