Vue 学习第一天绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="vue-app">
        <h1>event</h1>
        <button v-on:click="add">加一年</button>
        <button v-on:click="subtract">减一年</button>
        
        <p>my age is {{age}}</p>
    </div>
</body>
    <script type="text/javascript" src='app.js'></script>
</html>

//实例化vue对象
//el :需要控制的元素 一定是html中的根容器元素
//data:用于数据的存储 
//methods 用于存储各种方法
new Vue({
    el:"#vue-app",
    data:{
        age:30
    },
    methods:{


        add:function(){
            this.age++;
        },
        subtract:function(){
            this.age--;
        },

        
    }
});

Vue 学习第一天 绑定事件

Vue 学习第一天绑定事件