<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
#app{
text-align:center;
}
button:hover{
background-color:blue;
}
<div id="app">
<!--v-on:监听事件 这里监听 click事件 v-on:click,可以通过语法糖，进行简写：@click
mvvm : model viewmodel view viewmodel相当于一个桥梁，链接 model 和view
view：dom节点 model： js 数据。。。 databindings 数据绑定 dom 和model 进行绑定 datalisteners 接收view dom上的指令事件，调用model定义的函数等等。
-->
<h1>计数器01(直接在监听时修改num):</h1>{{num}}
<button v-on:click="num=num+10">+
<h1>计数器02（通过监听调用方法修改num）:</h1>{{num}}
<button v-on:click="sub">-
<button @click="sub">-
<script src="../js/vue.js">
const app =new Vue({
el:'#app',
data: {
num:0
},
//添加方法， 在methods中
methods:{
sub(){
this.num=this.num-10;
console.log("方法执行");
}
}
})
</html>
