<!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--; }, } });