学习心得,
事件处理,
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app-1">
<button v-on:click="counter += 1">{{msg}}</button>
<p>这个按钮被点击了 {{counter}} 次.</p>
</div>
<hr>
<div id="app-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">{{msg}}</button>
</div>
<hr>
<div id="app-3">
<button v-on:click="say('hi')">{{msg1}}</button>
<button v-on:click="say('what')">{{msg2}}</button>
</div>
<hr>
<!--有时也需要在内联语句处理器中访问原生 DOM 事件。-->
<!--可以用特殊变量 $event 把它传入方法：-->
<div id="app-4">
<button v-on:click="warn('表格尚未提交',$event)">{{msg}}</button>
</div>
<hr>
<!--在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。-->
<!--尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。-->
<!--为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。-->
<!--通过由点 (.) 表示的指令后缀来调用修饰符。-->
<!--.stop-->
<!--.prevent-->
<!--.capture-->
<!--.self-->
<!--.once-->
<div id="app-5" v-on:click="doThat">
<!-- .stop,阻止单击事件冒泡-->
<a v-on:click.stop="doThis" v-bind:href="url">{{msg}}</a>
<br>
<!-- .prevent,提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"><button type="submit">点这里</button></form>
<br>
<!--修饰符可以串联-->
<a v-on:click.stop.prevent="doThat" v-bind:href="url">{{msg}}</a>
<br>
<!-- .prevent,只有修饰符-->
<form v-on:submit.prevent><button type="submit">点这里</button></form>
<br>
<!-- .capture,添加事件侦听器时使用事件捕获模式-->
<!--.capture改变了 函数回调顺序,添加过的优先触发,顺序为:.capture>触发事件本身>冒泡父级-->
<div v-on:click.capture="doThis"><button v-on:click="doThisIn">{{msg}}</button></div>
<br>
<!--.self,只当事件在该元素本身(比如不是子元素)触发事件触发回调-->
<div v-on:click.stop.self="doThis">{{msg}}</div>
<div v-on:click.stop.self="doThis"><button>{{msg}}</button></div>
<br>
<!-- .once,点击事件将只会触发一次 -->
<a v-on:click.once="doThis">{{msg}}</a>
<br>
</div>
<hr>
<!--全部的按键别名：-->
<!--.enter-->
<!--.tab-->
<!--.delete (捕获“删除”和“退格”键)-->
<!--.esc-->
<!--.space-->
<!--.up-->
<!--.down-->
<!--.left-->
<!--.right-->
<div id="app-6">
<!--只有在keycode是13的时候调用app6.submit()-->
<input v-on:keyup.13 = 'submit1'>
<!--记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：-->
<input v-on:keyup.enter = 'submit2'>
<!--缩写语法-->
<input @keyup.f1 = 'submit3'>
</div>
<hr>
<div id="app-7">
<!--你也可以通过将它们转换到 kebab-case -->
<!--来直接使用由 KeyboardEvent.key 暴露的任意有效按键名作为修饰符：-->
<input @keyup.page-down="onPageDown">
<!--在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。-->
<!--极少数的键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, -->
<!--如果你想支持 IE9，它们的内置别名应该是首选。-->
</div>
<hr>
<div id="app-8">
<!--可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。-->
<!--.ctrl-->
<!--.alt-->
<!--.shift-->
<!--.meta-->
<!--注意：在 Mac 系统键盘上，meta 对应命令键 (⌘)。-->
<!--在 Windows 系统键盘 meta 对应 windows 徽标键 (⊞)。-->
<!--在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。-->
<!--在其他特定键盘上，尤其在 MIT 和 Lisp 键盘及其后续，-->
<!--比如 Knight 键盘，space-cadet 键盘，meta 被标记为“META”。-->
<!--在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。-->
<!--Alt + C-->
<input @keyup.alt.67="clear">
<br>
<br>
<div @click.ctrl="doSomething">Do something</div>
<!--修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。-->
<!--换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；-->
<!--单单释放 ctrl 不会引发事件。-->
</div>
<hr>
<div id="app-9">
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">{{msg}}</button>
<!-- 只有在 Ctrl 被按下的时候触发 -->
<button @click.ctrl.exact="onCtrlClick">{{msg}}</button>
</div>
<hr>
<div id="app-10">
<!--.left-->
<!--.right-->
<!--.middle-->
<!--这些修饰符会限制处理程序监听特定的滑鼠按键。-->
<button @click.left.exact="leftClick">{{msg}}</button>
<!--经过测试,@click.right 无法使用,需要更改为@contextmenu-->
<!--<button @click.right.exact="rightClick">{{msg}}</button>-->
<button @contextmenu.exact="rightClick">{{msg}}</button>
<!--经过测试,@click.middle 目前还未发现使用方法-->
<button @click.middle.exact="middleClick">{{msg}}</button>
</div>
<hr>
<script>
//取消鼠标右键默认点击事件
document.oncontextmenu = function(){
return false;
};
//事件处理
//监听事件
//可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
var app1 = new Vue({
el:"#app-1",
data:{
msg:"增加1",
counter: 0
}
});
var app2 = new Vue({
el:"#app-2",
data:{
msg:"Greet",
name:"Vue.js"
},
methods:{
greet:function(event){
// `this` 在方法里指当前 Vue 实例
alert("HELLo" + this.name + "!");
//event 是原生DOM事件
if(event){
alert(event.target.tagName);
}
}
}
});
// 也可以用 JavaScript 直接调用方法
// app2.greet();
//内联处理器方法
//除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
var app3= new Vue({
el:"#app-3",
data:{
msg1:"say hi",
msg2:"say what"
},
methods:{
say:function(message){
alert(message);
}
}
});
//有时也需要在内联语句处理器中访问原生 DOM 事件。
// 可以用特殊变量 $event 把它传入方法：
var app4 = new Vue({
el:"#app-4",
data:{
msg:"提交"
},
methods:{
warn:function(message,event){
//现在我们可以访问原生事件对象
if(event){
// 取消默认事件
event.preventDefault();
alert(message);
}
}
}
});
//事件修饰符
// 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
// 因此，用 @click.prevent.self 会阻止所有的点击，
// 而 @click.self.prevent 只会阻止元素上的点击。
var app5 = new Vue({
el:"#app-5",
data:{
msg:"占位符~",
url:"http://www.baidu.com"
},
methods:{
doThis:function(){
alert("doThis");
console.log("doThis");
},
onSubmit:function(){
alert("onSubmit");
console.log("onSubmit");
},
doThat:function(){
alert("doThat");
console.log("doThat");
},
doThisIn:function(){
alert("doThisIn");
console.log("doThisIn");
}
}
});
//键值修饰符
// 可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 13;
var app6 = new Vue({
el:"#app-6",
data:{
msg:"占位~"
},
methods:{
submit1:function(){
console.log("submit1");
},
submit2:function(){
console.log("submit2");
},
submit3:function(){
console.log("submit3");
}
}
});
//自动匹配按键修饰符
var app7 = new Vue({
el:"#app-7",
data:{
},
methods:{
}
});
//系统修饰健
var app8 = new Vue({
el:"#app-8",
data:{
},
methods:{
clear:function(){
console.log("clear");
},
doSomething:function(){
console.log("doSomething");
}
}
});
//.exact修饰符
//.exact 修饰符应与其他系统修饰符组合使用，以指示处理程序只在精确匹配该按键组合时触发。
var app9 = new Vue({
el:"#app-9",
data:{
msg:"点击试试"
},
methods:{
onClick:function(){
console.log("onClick");
},
onCtrlClick:function(){
console.log("onCtrlClick");
}
}
});
//鼠标按钮修饰符
var app10 = new Vue({
el:"#app-10",
data:{
msg:"点击试试"
},
methods:{
leftClick:function(){
console.log("leftClick");
},
rightClick:function(){
console.log("rightClick");
},
middleClick:function(){
console.log("middleClick");
}
}
});
// 为什么在 HTML 中监听事件?
// 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 传统理念。
// 不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，
// 它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
// 1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
// 2.因为你无须在 JavaScript 里手动绑定事件，
// 你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
// 3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。
// 你无须担心如何自己清理它们。
</script>
</body>
</html>
网友评论