<ul class="menu">
<li v-for="menu in menus">
<a @click="clickMenu(menu)">
<span class="title">{{ menutitle }}</span>
</a>
</li>
</ul>
if(this$routepath === '/') {
this$nextTick(()=>{
$('menu li:first-child')children('a')[0]dispatchEvent(new Event('click'));
})
}以华为P50手机为例：
1进入设置 > 辅助功能 > 单手模式 ，开启单手模式开关。
2通过以下任一方式进入单手模式：
若使用手势导航且底部边缘横滑切换应用开关开启时，沿屏幕底部横滑并停顿。
若使用手势导航且底部边缘横滑切换应用开关关闭时，沿屏幕底部边缘弧线滑动并停顿。
若使用屏幕内三键导航时，沿屏幕底部横滑。
若使用手势导航且无底部边缘横滑切换应用开关时，沿屏幕底部横滑。
3点击小屏幕外任何区域可退出单手模式。
当您开启了手势放大功能后，单手模式不生效。
温馨提醒：
若您左手持机，建议沿屏幕底部从右向左滑动并停顿，单手模式窗口显示在屏幕左侧。
若您右手持机，建议沿屏幕底部从左向右滑动并停顿，单手模式窗口显示在屏幕右侧。DOM事件
在Vue中为DOM元素绑定事件的具体方法在文章中的 方法与事件处理器 章节，通过v-on指令或事件语法糖 @ 为DOM元素绑定事件。Vue解析组件模板后，在绑定更新 v-on 指令时会为DOM元素绑定事件(当然如果元素为 iframe ，会等到 iframe 加载完成后再为其绑定事件)。
Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式，因为Vue服务的是IE9以上的现代浏览器，他们也都是支持DOM2级事件。因此下例中
实际上相当于
eladdEventListener('click', func)
所以 addEventListener 支持绑定的事件， v-on 指令也都支持。同样的理论上也可以解绑事件，虽然也有相应的 api ，但是Vue文档中并没有显示地告诉我们怎么做。
在代码中可以看到，每个 v-on 指令都有一个reset 方法， reset 方法是当指令所绑定方法发生改变时，重新绑定事件之前的解绑 *** 作，我们可以利用这个 api 来解绑事件。因此如果需要解绑事件，我们可以遍历 vm_directives 找到相应该指令，进行解绑。
当然既然是采用DOM2级事件处理，也可以使用 removeEventListener 直接进行解绑，看这个 demo 。 执行解绑 *** 作后 btn1 的确解绑成功了，但 btn2 没有解绑成功，这要说到 v-on 指令的 修饰符 ，见源码中对带有修饰符的 handler 的处理。顾名思义，修饰符修饰过的 handler 做了更多的事情，Vue的处理是包装原 handler 新的 handler 用于向DOM元素绑定，而解绑时仍然解绑原方法当然会失败。
当然这只是分析Vue的事件绑定原理，大多数情况下我们并不需要去解绑事件。合理的利用事件委托可以解决大部分由事件绑定引起的性能问题。
自定义事件
Vue自定义事件是为组件间通信设计，自定义事件提供了 $on、$off、$once、$emit、$broadcast、$dispatch 几个 api，非常简洁。
首先提两个vm的私有变量，vm_events 和 vm_eventCount。每个vm实例所有的自定义事件都将存储在 vm_events，而 vm_eventsCount 存储的是执行事件广播后子组件触发自定义事件处理程序的数量，这是为了事件广播优化而来的，如果 vm_eventsCount[event] 数量为零，当事件广播时则可断定子组件没有该事件的监听器，就没必要向子组件层层捕获该事件监听器了。
$on
注册一个自定义事件，注册事件很简单，首先将其挂载到该实例下
vm_events[event] = fn
然后是向上传播，更新各个组件的 _eventsCount。这里需要注意，我们可以通过 $on 为生命周期注册钩子， 点击 查看demo，但是生命周期不可冒泡和广播，所以需要更新 eventsCount 前需要过滤。 查看modifyListenerCount
$once
因为 $once 注册的事件是一次性的，执行完后卸载，所以其实 $once 调用 $on 来注册事件的函数是包装过的。
$off
理解了注册事件的流程(其实就是更改 _events 和 _eventsCount)那么卸载事件也就很清晰了。
但是$off支持三种卸载方式
1、 如果没有参数，则删除所有的事件监听器
遍历 _events，冒泡更新每个事件的 _eventsCount，清空 vm_events
2、 如果只提供了事件，则删除这个事件所有的监听器
冒泡更新每个事件的 _eventsCount，vm_events 中剔除该事件
3、 如果同时提供了事件与回调，则只删除这个回调
遍历 vm_events[event] 的事件处理方法，如果该事件处理方法和回调相同，则从 vm_events[event] 剔除该事件处理方法，并冒泡更新该事件的 _eventsCount
$emit
触发事件，直接遍历 vm_events[event] 的每个事件处理程序并执行。
$emit 返回 shouldPropagate，shouldPropagate 是一个布尔值，取决于父链上的是否存在该事件的监听器以及，事件处理程序返回的值。他决定 $dispatch 是否停止冒泡。
dispatch
派发事件。首先在实例上触发该事件，默认情况下将会停止冒泡传播，但如果 $emit 返回的 shouldPropagate 为 true，则该事件会继续沿父链向上传播，即在父组件继续向上派发事件。
broadcast
事件广播。深度优先遍历子组件，并执行各个子组件的监听器事件处理程序，在绑定和卸载自定义事件时会会每个组件维护一个 vm_eventsCount，而它的作用正是在深度遍历的时候给予提示，避免不必要的深度遍历。
通过自定义事件在组件之间的传播，我们可以利用它进行组件通信。组件通信在应用开发过程中是一个棘手的问题，因为它直接关系到整个应用的健壮和可维护程度，在开发大型项目中建议引入vuex，从应用架构的角度来考虑组件通信相比这种事件形式更容易维护，比如多个子组件都有派发事件与父组件进行通信，如果子组件派发事件不注意命名规范，出现命名重复情况，那么父组件监听器根本不知道这个事件是从哪里派发过来的以技如何处理，这是隐患之一。如果采用这种方式进行组件通信，那么必将导致子组件大量派发事件，那么父组件将要维护大量的事件监听器，如果时间久了，很容易忘记监听器和派发事件子组件的对应关系，这又增加了开发与维护成本。充斥着事件派发的组件维护成本也是一个容易留坑的地方。此外通过事件可以进行父子组件的通信，但兄弟组件的通信有需要增加不少开发成本。
组件的自定义事件
在上文分析DOM元素绑定事件中，我们用到这个例子
但是有时候会出现 v-on 为组件绑定事件的情况，如
上文中没有分析到，留在这里说，这里有两个明显区别
是组件而不是DOM元素
自定义事件而不是DOM事件
因此显然 addEventLisntener 不适用，而且Vue执行的也是和第一个例子完全不同的处理方式， 对其的处理在 registerComponentEvents 。它其实是为组件注册自定义事件。这里 v-on 指令绑定的结果是 demoVm_a href="" title="成都app制作开发公司events[myfunc] = [func] 以及更新 _eventsCount。
查看这个 demo 。
可见 v-on 指令既可为DOM元素绑定事件也可为组件绑定自定义事件。明白了这个，这个issuse 的原因也就很明了了。这个 *** 作的主要意思就是 对于此id 点击事件的 *** 作
一般的click 回调函数这样写
$("#id")click(function(){
// 点击此事件的具体 *** 作。
});
还有一种功能这样写，是通过JS 脚本来触发 服务器事件。
例如 你使用例如jbox等 d出层做列表选择 *** 作时，在你选择了选项怎么让原来的页面刷新，显示你所选择的内容，可能在你关闭时，就可以再关闭事件中 $('#id')click(); 来触发opener 页面的某个隐藏的服务器控件来触发。刷新 *** 作。（针对于ASPNET）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）