目录

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