Vue.js开发入门(四)

方法与事件

1.方法与事件在事件绑定上,类似于原生的JavaScript的onclick方法,也是在HTML上监听的,比如,我们监听一个按钮的点击事件,每次点击都加1

<div id="app">
    每点击一下加一: {{count}}</br>
 <button @click="count++">点击加一</button>
   //@click和v-on:click的效果是一样的,在vue中,基本加@的都是缩写,是一个语法糖。
</div>

<script>
   var app = new Vue({
       el: '#app',
        data: {
        count:0  
            }
      })
</script>

2.@click的表达式可以直接使用JavaScript语句,也可以在一个Vue事例中methods选项内的函数名,接下来我们再增加一个按钮,每次都加5

<div id="app">
   点击次数: {{counts}}</br>
<button @click="countAdd()">点击加一</button>
//注意,这里的countAdd()是方法,而不是++了!!!!
<button @click="countAdd(5)">点击加五</button>
</div>

<script>
  var app = new Vue({
       el: '#app',
       data: {
        counts:0  
             },
        methods:{
            countAdd:function(count){
            count = count || 1;
            this.counts += count;
               }

             }
})
</script>