• 售前

  • 售后

热门帖子
入门百科

Vue.js前端框架之变乱处理小结

[复制链接]
零度2017 显示全部楼层 发表于 2021-10-26 14:17:30 |阅读模式 打印 上一主题 下一主题
1. v-on 事故监听

监听DOM事故利用 v-on 指令。该指令通常在模板中直接利用,在触发事故时会执行一些 JavaScript 代码。
v-on 指令的基本用法

(1)在 HTML 中利用 v-on 指令,后面可以是所有的原生事故名称。基本用法如下:
  1. <button v-on:click="show">显示</button>
复制代码
将 click 单击事故绑定到 show 方法中,单击“表现”按钮时,执行 show() 方法,show() 方法在 Vue实例中界说。
(2)在利用 v-on 指令的过程中,Vue.js 提供了 v-on 指令的简写情势 “@” ,上述代码可改写为如下:
  1. <button @click="show">显示</button>
复制代码
(3)v-on 指令的简单用法如下:
  1. <div id="box">
  2.                         <!--v-on 基本用法-->
  3.                         <button v-on:click="count1++">计数</button>
  4.                         <p>按钮被点击{{count1}}次</p>
  5.                         <!--v-on 简单用法-->
  6.                         <button @click="count2++">计数</button>
  7.                         <p>按钮被点击{{count2}}次</p>
  8. </div>
  9.                    <script type="text/javascript">
  10.                                 var vm = new Vue({
  11.                                         el : '#box',
  12.                                         data:{
  13.                                                 count1:0,
  14.                                                 count2:0
  15.                                         }
  16.                                        
  17.                                 });
  18.                         </script>
复制代码
v-on 指令的简单用法如下图所示:

事故处理方法

在利用 v-on 指令过程中,通过 v-on 指令必要将事故和某个方法举行绑定,而绑定的方法作为事故处理器界说在 methods 选项中。示例代码参考如下:
  1. <div id="box">                        <button v-on:click="show">显示</button>                </div>                   <script type="text/javascript">                                var vm = new Vue({                                        el : '#box',                                        data:{                                                name:'晓茗',                                                age: 29,                                                occupation:'演员'                                        },                                        methods:{                                                show:function(){                                                        alert('姓名:'+this.name+'年事:'+this.age+'职业:'+this.occupation);                                                }                                        }                                                                        });                        </script>
复制代码
v-on 指令将点击事故与表现方法绑定的效果图片如下:

利用内联 JavaScript 语句

(1)利用 v-on 指令除了直接绑定到一个方法之外,v-on 指令也支持内联 JavaScript 语句,但前提是只可以利用一个语句。示例代码参考如下:
  1. <div id="box">
  2.                         <button v-on:click="show('明日之星')">显示</button>
  3.                 </div>
  4.                    <script type="text/javascript">
  5.                                 var vm = new Vue({
  6.                                         el : '#box',
  7.                                         methods:{
  8.                                                 show:function(message){
  9.                                                         alert('消息:'+message);
  10.                                                 }
  11.                                         }
  12.                                        
  13.                                 });
复制代码
利用内联 JavaScript 语句的运行效果如下图所示:

(2)在内联语句中必要获取原生的 DOM 事故对象时,可以将一个特殊变量 $event 传入方法中。示例代码如下:
  1. <div id="box">
  2.                         <a href="http://www.baidu.com" rel="external nofollow"  v-on:click="show('明日之星',$event)">{{message}}</a>
  3.                 </div>
  4.                    <script type="text/javascript">
  5.                                 var vm = new Vue({
  6.                                         el : '#box',
  7.                                         data:{
  8.                                                 message:'你好'
  9.                                         },
  10.                                         methods:{
  11.                                                 show:function(message1,e){
  12.                                                         e.preventDefault();
  13.                                                         alert(message1);
  14.                                                 }
  15.                                         }
  16.                                        
  17.                                 });
  18.                         </script>
复制代码
除了向 show() 方法通报一个值外,还通报了一个特殊变量 $event,该变量的作用是当点击超链接时,对原生 DOM 事故举行处理,应用 preventDefault() 方法制止该超链接的跳转行为。当单击 “你好” 超链接时,会弹出对话框,运行效果如下图所示:

2. 事故处理修饰符

所谓修饰符,就是以半角句点符号指明的特殊后缀。Vue.js 为 v-on 指令提供了多个修饰符,包罗事故修饰符和按键修饰符。
事故修饰符
在事故处理程序中经常会调用 preventDefault() 或 stopPropagation() 方法来实现特定的功能。为处理这些 DOM 事故细节,Vue.js 为 v-on 指令提供了事故修饰符。常用的事故修饰符及其说明如下表所示:

修饰符可以串联利用,而且可以只利用修饰符,而不绑定事故处理方法。事故修饰符的利用方式如下:
  1. <!-- 阻止单击事件继续传播-->
  2. <a v-on:click.stop="doSomething"></a>
  3. <!-- 阻止表单默认提交事件-->
  4. <form v-on:submit.prevent="onSubmit"></form>
  5. <!-- 只有当事件从当前元素本身触发时才调用处理函数-->
  6. <div v-on:click.self="doSomething"></div>
  7. <!-- 修饰符串联,阻止表单默认提交事件且阻止冒泡-->
  8. <a v-on:click.stop.prevent="doSomething"></a>
  9. <!-- 只有修饰符,而不绑定事件-->
  10. <form v-on:submit.prevent></form>
复制代码
应用一个 .stop 修饰符制止事故冒泡的示例代码如下:
  1. <div id="box">
  2.                         <div v-on:click="show('div事件触发')">
  3.                                 <button v-on:click.stop="show('按钮的事件触发')">显示</button>
  4.                         </div>
  5.                 </div>
  6.                    <script type="text/javascript">
  7.                                 var vm = new Vue({
  8.                                         el : '#box',
  9.                                         methods:{
  10.                                                 show:function(message){
  11.                                                         alert(message);
  12.                                                 }
  13.                                         }
  14.                                        
  15.                                 });
  16.                         </script>
复制代码
当单击”表现“按钮时,只会触发该按钮的单击事故。如果在按钮中未利用 .stop 修饰符,当单击”表现“按钮时,不光会触发该按钮的单击事故,还会触发 div 的单击事故,会弹出两个对话框。运行效果如下图所示:
(1)利用 .stop 修饰符:

(2)未利用.stop 修饰符点击确定后表现:


按键修饰符


除事故修饰符之外,Vue.js 还为 v-on 指令提供了按键修饰符,以便监听键盘事故中的按键。当触发键盘事故时必要检测按键的 keyCode值,代码如下:
  1. <input v-on:keyup.13="submit">
复制代码
应用 v-on 指令监听键盘的 keyup 事故,键盘中回车键的 keyCode 值是13,所以,在文本框输入内容后,单击回车键时就会调用 submit()方法。
对上述所示的代码,可以利用其别名的方式,回车键别名为 Enter ,代码如下:
  1. <input v-on:keyup.enter="submit">
复制代码
Vue.js 为常用的按键提供的别名如下表所示:
  1. 备注:后期会继续跟进 Vue.js前端框架:表单控制绑定,希望大家的多多支持和关注。
复制代码
到此这篇关于Vue.js前端框架之事故处理小结的文章就介绍到这了,更多相干Vue.js事故处理内容请搜索草根技能分享从前的文章或继续浏览下面的相干文章盼望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作