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>