vue添加点击事件（Vue的事件处理，点击事件）

目录

1  
  
  
  
  
  
、 v-on:click 绑定属性示例：

2 
  
  
  
  
  
 、 v-on:click 绑定方法示例：

3


 


 


 


 


 


 、 v-on:click 绑定特殊变量示例：

4 
 
 
 
 
 
、事件处理的修饰符 

        按键修饰符：

        v-model表单修饰符：

        v-bind指令修饰符：

        监听DOM事件使用的是v-on指令            ，该指令通常在模板中直接使用 
 
  
 
  
 
  
 
  
 
  
 
 ，在触发事件时会触发执行一些JavaScript代码  
  
  
  
  
  
。Vue.js提供了v-on指令的简写形式“@  
  
  
  
  
  
”











，可用“@ 
  
  
  
  
  
 ”来代替
  
  
  
  
  
  ，如v-on:click可用简写成@click

1  
   
   
   
   
   
 、 v-on:click 绑定属性示例：

<div id="element"> <button @click="count++">点击</button> <p>{{count}}</p> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: #element, data: { count:0 } }) </script>

2

 

 

 

 

 

 、 v-on:click 绑定方法示例：

<div id="element"> <button @click="show">点击</button> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: #element, data: { count:0 }, methods:{ show:function(){ alert("点击调用") } } }) </script>

3
 

 

 

 

 

 
、 v-on:click 绑定特殊变量示例：

除了绑定到一个方法之外 
  
  
  
  
  
 ，v-on也支持内联JavaScript语句 


 


 


 


 


 


，但只可以使用一个语句
 
 
 
 
 
 ，如果在内联语句中需要获取原生的DOM事件对象  
   
   
   
   
   
 ，可以将一个特殊变量$event传入方法之中

<div id="element"> <button @click="show(我被点击了,$event)">点击</button> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: #element, data: { count:0 }, methods:{ show:function(message,e){ e.preventDefault();//组织浏览器默认行为 alert(message) } } }) </script>

4            、事件处理的修饰符 

.stop 阻止事件冒泡 

 

 

 

 

 

，等同于调用event.stopPropagation .capture 捕获冒泡

 

 

 

 

 

 ，使用capture模式添加事件监听器 .once 只触发一次回调            ，加上once之后prevent失效 .prevent 阻止标签的默认行为 
 

 
 

 
 

 
 

 
 

 
 

，等于调用event.preventDefault() .passive 不阻止事件的默认行为 .self 将事件绑定到自身











，只有自身才能触发 <!--阻止单击事件继续传播--> <a v-on:click.stop="doSomething"></a> <!-- 默认情况下                  ，点击子div会默认触发冒泡 
 
 
 
 
 
 
 
 
 
 
 
，打印的结果为2

















，1； 这里给父div添加了capture修饰符            ，则会转为捕获阶段 
 
  
 
  
 
  
 
  
 
  
 
 ，则点击子div时











，会从最外层向点击的目标元素一层一层触发相同的事件
  
  
  
  
  
  ，则结果为1 
  
  
  
  
  
 ，2； --> <div @click.capture="showMsg(1)"> <div @click="showMsg(2)"> </div> </div> <!-- showMsg(msg) { console.log(msg); } --> <!--只触发一次 


 


 


 


 


 


，后续不会触发--> <button v-on:click.once="doSomething"></button> <!--阻止默认事件--> <a href="#" v-on:click.prevent="doSomething"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 `onScroll` 完成 --> <div v-on:scroll.passive="onScroll"></div> <!--阻止表单默认提交事件--> <form v-on:submit.prevent="onSubmit"></form> <!--只有当事件是从当前元素本身触发时才会调用处理函数--> <div v-on:click.self="doSomething"></div> <!--修饰符串联
 
 
 
 
 
 ，阻止表单默认提交事件且阻止冒泡--> <a v-on:click.stop.prevent="doSomething"></a> <!--只有修饰符  
   
   
   
   
   
 ，而不绑定事件--> <form v-on:submit.prevent></form>

        按键修饰符：

按键 keyCode 别名 Enter 13 enter Backspace 8 delete Esc 27 esc Left Arrow(←) 37 left Up Arrow(↑) 38 up Right Arrow(→) 39 right Down Arrow(↓) 40 down Tab 9 tab Delete 46 delete Spacebar 32 space Shift 16 shift Ctrl 17 ctrl Alt 18 alt <!--使用keycode--> <input v-on:keyup.13="xxx"> <!--使用别名--> <input v-on:keyup.enter="xxx">

        v-model表单修饰符：

lazy 光标离开标签的时候 

 

 

 

 

 

，将值赋予给value

 

 

 

 

 

 ，进行数据同步 trim 自动过滤用户输入的首空格字符            ，而中间的空格不会过滤 number

自动将用户输入转换为数值类型 
 

 
 

 
 

 
 

 
 

 
 

，如果转换结果为NaN











，则返回覆盖原始值

<div id="element"> <p>lazy示例,光标离开输入框时                  ，值才会同步更新</p> <input v-model.lazy="message" placeholder="点击输入"> <p>当前输入：{{message}}</p> <p>number示例</p> <input v-model.number="message1" placeholder="点击输入"> <p>当前输入：{{message1}}</p> <p>trim示例</p> <input v-model.trim="message2" placeholder="点击输入"> <p>当前输入：{{message2}}</p> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: #element, data: { message: , message1:, message2:, } }) </script>

        v-bind指令修饰符：

sync 对props进行一个双向绑定 prop 设置自定义标签属性 
 
 
 
 
 
 
 
 
 
 
 
，避免暴露数据

















，防止污染HTML结构 camel 将命名变为驼峰法命名法            ，如将hello_world属性名转换为helloWorld