vue点击事件onclick用法

Vue.js中的点击事件可以使用v-on指令（或者简写为@）来绑定。我们可以将点击事件绑定到一个属性、方法或者特殊变量上。

1. 绑定属性示例：

   <div id="element">
     <button @click="count++">点击</button>
     <p>{{count}}</p>
   </div>
   <script src="http://60.205.187.0/vue/vue.js"></script>
   <script type="text/javascript">
     var demo = new Vue({
       el: '#element',
       data: {
         count: 0
       }
     })
   </script>

在这个示例中，点击按钮会使count属性增加，并且在模板中显示出来。

2. 绑定方法示例：

   <div id="element">
     <button @click="show">点击</button>
   </div>
   <script src="http://60.205.187.0/vue/vue.js"></script>
   <script type="text/javascript">
     var demo = new Vue({
       el: '#element',
       data: {
         count: 0
       },
       methods: {
         show: function() {
           alert("点击调用")
         }
       }
     })
   </script>

在这个示例中，点击按钮会调用show方法，弹出一个提示框。

3. 绑定特殊变量示例：

   <div id="element">
     <button @click="show('我被点击了',$event)">点击</button>
   </div>
   <script src="http://60.205.187.0/vue/vue.js"></script>
   <script type="text/javascript">
     var demo = new Vue({
       el: '#element',
       data: {
         count: 0
       },
       methods: {
         show: function(message, e) {
           e.preventDefault(); // 阻止浏览器默认行为
           alert(message)
         }
       }
     })
   </script>

在这个示例中，点击按钮会调用show方法，并传入两个参数：一个是字符串，一个是特殊变量$event，它代表原生的DOM事件对象。在show方法中，我们可以通过$event获取到原生的DOM事件对象，并对其进行一些操作。