事件绑定 | 码代码的冰果果

vue事件绑定。

vue对象怎么使用，点这里回顾。

前端页面中使用：事件绑定v-on:事件类型='函数名()'或@事件类型='函数名()'（函数名后边的括号可带可不带）

创建vue对象时传递的json对象：在与data对象同级的地方（逗号隔开），添加一个methods对象，内部定义我们的函数（与data对象中的一样，使用key/value键值对的形式）。

事件类型有：

click：在元素上按下并释放任意鼠标按键
mouseenter：指针移到有事件监听的元素内
mouseout：指针移出元素，或者移到它的子元素上
focus：元素获得焦点（不会冒泡）
blur：元素失去焦点（不会冒泡）
error：资源加载失败时
特别多，可以访问这里查看。

{
  el: '#app', // el是元素element的简写，‘#app’是ID选择器方式绑定message
  // 这里是Model：数据（后端给）
  data: 
  {
      message: '哼!'
  },
  methods:
  {
      zhe_0: function () 
      {
          alert(this.message);   
      },
      zhe_1()
      {
          alert(this.message); 
      }
  }
}
//this关键字代表的是vue对象

代码演示：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 这是View  现在就是templet模板-->
<div id="app">
    <button v-on:click='zhe_0'>点这儿</button>
    <!-- 下面是缩写 -->
    <button @click='zhe_1()'>再点一次</button>
</div>
<script>
    var vm = new Vue
    (
        {
            el: '#app', // el是元素element的简写，‘#app’是ID选择器方式绑定message
            // 这里是Model：数据（后端给）
            data: 
            {
                message: '哼!'
            },
            methods:
            {
                zhe_0: function () 
                {
                    alert(this.message);   
                },
                zhe_1()
                {
                    alert(this.message); 
                }
              //this关键字代表的是vue对象，所以this.message等价于vm.message。不过这里不能写成vm.message
            }
        }
    )
</script>

事件修饰符:

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>