做网站用小公司还是大公司,培训制作网站源码,江苏省建设工程造价信息网官网,wordpress翻页按钮颜色01-03.Vue#xff1a;v-on的事件修饰符 前言v-on的事件修饰符.stop的举例.capture举例.prevent的举例1.prevent的举例2.self举例 前言 我们接着上一篇文章 01-02.Vue的常用指令(二) 来讲 下一篇文章 01-04.Vue的使用示例#xff1a;列表功能 v-on的事件修饰符
v-on 提供了很… 01-03.Vuev-on的事件修饰符 前言v-on的事件修饰符.stop的举例.capture举例.prevent的举例1.prevent的举例2.self举例 前言 我们接着上一篇文章 01-02.Vue的常用指令(二) 来讲 下一篇文章 01-04.Vue的使用示例列表功能 v-on的事件修饰符
v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下
.stop 阻止冒泡。本质是调用 event.stopPropagation()。.prevent 阻止默认事件默认行为。本质是调用 event.preventDefault()。.capture 添加事件监听器时使用捕获的方式也就是说事件采用捕获的方式而不是采用冒泡的方式。.self 只有当事件在该元素本身比如不是子元素触发时才会触发回调。.once 事件只触发一次。
PS一个事件允许同时使用多个事件修饰符。
写法示范 !-- click事件 --button v-on:clickdoThis/button!-- 缩写 --button clickdoThis/button!-- 内联语句 --button v-on:clickdoThat(hello, $event)/button!-- 阻止冒泡 --button click.stopdoThis/button!-- 阻止默认行为 --button click.preventdoThis/button!-- 阻止默认行为没有表达式 --form submit.prevent/form!-- 串联修饰符 --button click.stop.preventdoThis/button.stop的举例
我们来看下面这个例子
templatediv idappdiv classfather clickfatherClickdiv classchild clickchildClick/div/div/div
/templatescript
export default {data() {return {};},methods: {fatherClick: function () {console.log(father 被点击了);},childClick: function () {console.log(child 被点击了);},},
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.father {height: 300px;width: 300px;background: pink;
}.child {width: 200px;height: 200px;background: green;
}
/style
上方代码中存在冒泡的现象父标签中包含了一个子标签。当点击子标签时父标签也会被触发。打印顺序是 child 被点击了father 被点击了那么问题来了如果我不想让子标签的点击事件冒泡到父亲该怎么做呢办法是给子标签加一个事件修饰符.stop阻止冒泡。代码如下 div classchild click.stopchildClick阻止冒泡后当点击子标签时打印结果是 child 被点击了PS我发现一个有意思的现象。上方的这行代码中如果把.stop改为:stop造成的现象是父标签被触发了而子标签没有被触发。
.capture举例
.capture触发事件时采用捕获的形式而不是冒泡的形式。
还是采用上面的例子当按钮点击时如果想要采取捕获的方式而不是冒泡的方式办法是可以直接在父标签上加事件修饰符.capture。代码如下 div classfather click.capturefatherClick当点击子标签时打印结果是 father 被点击了child 被点击了.prevent的举例1
比如说超链接a默认有跳转行为那我可以通过事件修饰符.prevent阻止这种跳转行为。
templatediv idappa hrefhttp://www.baidu.com click.preventlinkClick百度一下/a/div
/templatescript
export default {data() {return {};},methods: {linkClick: function () {console.log(超链接被点击了);},},
};
/script
上方代码中 如果去掉.prevent点击按钮后既会打印log又会跳转到百度页面。 现在加上了.prevent就只会打印loeg不会跳转到百度页面。
.prevent的举例2
现在有一个form表单 form actionhttp://www.baidu.cominput typesubmit value表单提交/form我们知道上面这个表单因为typesubmit因此它是一个提交按钮点击按钮后这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
现在我们可以用.prevent来阻止这种默认行为。修改为点击按钮后不提交到服务器而是执行我们自己想要的事件在submit方法中另行定义。如下
templatediv idapp!-- 阻止表单中submit的默认事件 --form submit.prevent actionhttp://www.baidu.com!-- 执行自定义的click事件 --input typesubmit clickmySubmit value表单提交 //form/div
/templatescript
export default {methods: {mySubmit: function () {alert(ok);},},
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
/style
上方代码中我们通过.prevent阻止了提交按钮的默认事件点击按钮后执行的是mySubmit()方法里的内容。这个方法名是可以随便起的我们甚至可以起名为submit反正默认的submit已经失效了。
.self举例
.self 只有当事件在该元素本身比如不是子元素触发时才会触发回调。
我们知道在事件触发机制中当点击子标签时父标签会通过冒泡的形式被触发父标签本身并没有被点击。可如果我给父标签的点击事件设置.self修饰符达到的效果是子标签的点击事件不会再冒泡到父标签了只有点击符标签本身父标签的事件才会被触发。代码如下 div classfather click.selffatherClick疑问既然.stop和.self都可以阻止冒泡那二者有什么区别呢区别在于前者能阻止整个冒泡行为而后者只能阻止自己身上的冒泡行为。
