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>

Vue的事件处理，点击事件

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
标签 , ,