十二、v-on监听事件

1、可以用v-on指令，监听DOM事件，并在触发时运行一些JavaScript代码。

2、v-on可以缩写成@。

3、如果想访问原始的DOM事件，可以使用特殊的变量$event作为参数传入。

<template v-if='false'><!--1、可以在触发时运行一些JavaScript代码。-->
    <button type="button" @click='count-=1'>-</button>
        {{count}}
    <button type="button" @click='count+=1'>+</button>
</template>
<script>
let data={
    count:0,   
}
</script>

<template v-if='false'><!--3、使用正常的变量，作为参数传入。-->
           <button type="button" @click="hello('hello world')">hello world</button>
       </template>
<script>
    methods:{
        hello(val){//val是形参可以随便命名。
           alert(val);
        },
    }
</script>       

<template><!--3、如果想访问原始的DOM事件，可以使用特殊的变量$event作为参数传入-->
    姓名：<input type="text" @input='setName($event)'>
    <!-- 
    姓名：<input type="text" @input='setName'> 
                                                  是与上一句代码的简写模式-->
   {{name}}
</template>
<script>
    methods:{
       setName(e){//e是形参可以随便命令。
          console.log(e);//输出结果：InputEvent {isTrusted: true, data: '1', isComposing: false, inputType: 'insertText', dataTransfer: null, …}
                         //监听输入事件。事件中有两个重要属性：
                         //（1）data：显示当前输入的字符
                         //（2）target：显示当前监听的input标签的元素所有属性内容。其中的value属性是input标签的文本内容。
          console.log(e.target.value);
          this.name=e.target.value;
      },
    }
</script>