体验
实例、计数器
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!--<button v-on:click="counter++">+</button>-->
<!--<button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue%20.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
add:function () {
console.log('add被执行');
this.counter++
},
sub:function () {
console.log('sub被执行');
this.counter--
}
}
})
</script>
注释掉的部分为点击计数。
现代码增加功能,计数时打印字段:被执行。
@click属性:是v-on:click的简写,监听点击,并需要指定发生点击的地方执行方法。
app中可以插入methods(方法),此实例中,不可在add:function中直接使用counter,因为这个时候会寻找全局变量counter,而counter也是在app中创建的,所以采用this。