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>