v-on 基础

• 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用 下面的代码中，我们使用了v-on:click="counter++”
• 另外，我们可以将事件指向一个在methods中定义的函数

<div id='app'>
    <h2 >点击次数：{{counter}}</h2>
    <button v-on:click='counter++'>增加次数</button>
    <button v-on:click='buttonClick'>增加次数</button>
</div>

注：v-on也有对应的语法糖：
v-on:click可以写成@click

<div id='app'>
    <h2 >点击次数：{{counter}}</h2>
    <button @click='counter++'>增加次数</button>
    <button @click='buttonClick'>增加次数</button>
</div>

let app = new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        buttonClick(){
            this.counter++
        }
    }
})

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

<div id="app">
  <!--1. .stop修饰符的使用-->
  <div @click="divClick">
    停止冒泡行为
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2. .prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
    //取消提交按钮的默认提交行为
  </form>

  <!--3. .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">  //enter指的是回车键 监听回车键 
	
  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
</script>