Method

Posted yc-1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Method相关的知识,希望对你有一定的参考价值。

  Vue.js的事件监听一般都通过v-on指令配置在html中,虽然也可以在javascript代码中使用原生的addEventListener方法添加事件监听,但Vue.js本身并不提倡如此。看上去这种方式不符合传统的“关注点分离”的理念,但其实所有的Vue.js事件处理方法和表达式都严格绑定在当前的视图的ViewModel上。实际上,采用它提供的v-on指令有如下几点好处:

  • 通过查看HTML模板便能轻松定位JavaScript代码中对应的方法。
  • 无须在JavaScript中手动绑定事件,ViewModel和DOM完全解耦,更易于测试。
  • 当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。

一、如何绑定事件

  在原生DOM事件中,我们可以通过JavaScript给HTML文档元素注册不同的事件处理程序。代码示例如下:

<button onclick="learnVue()">DDFE</button>

  AngularJS也采取了类似的方式,只不过换成了ng-前缀的事件指令:

<button ng-click="learcBue()">DDFE</button>

  类似的,Vue.js也采取了这样的方式来绑定事件,下面进行详细介绍。

1.内联方式

  Vue.js在Html文档元素中采用v-on指令来监听DOM事件,代码示例如下:

  

<div id="example">
    <button v-on:click="greet">Greet</button>
</div>

  这里将一个单击事件处理器click绑定到greet方法,该方法在Vue实例中进行定义。

  在这种内联方式下一个事件处理器只能绑定一个方法,如需绑定多个方法,仍需在JavaScript代码中使用addEventListener方法来绑定。

  同样的,类似于原生JavaScript以及AngularJS,除了直接绑定一个方法外,也可以直接使用内联的JavaScript语句。代码示例如下:

<div id="example-2">
    <button v-on:click="say(‘h1‘)">Say Hi</button>
    <button v-on:click="count=count+1">Say What</button>
</div>

  与内联表达式相仿,事件处理器限制为一个JavaScript语句。

2.methods配置

  在上一节中,当用户将click事件与某个方法绑定时,需要在Vue实例当中进行定义,所有定义的方法都放在methods属性下。针对上一节的greet方法定义代码示例如下:

var vm = new Vue({
   el:‘#example‘,
   //在methods对象中定义方法
   methods:{
        greet:function(event){
            //方法内this指向vm
            alert(‘Welcome to Vue.js’)
            //event是原生DOM事件
            alert(event.target.tagName)
        }
    }   
})

//也可以在JavaScript代码中调用方法

vm.greet()

需要注意的地方如下:

  • methods中定义的方法内的this始终指向创建的Vue示例。
  • 与事件绑定的方法支持参数event即原生DOM事件的传入
  • 方法用在普通元素上时,只能监听原生DOM事件:用在自定义元素组件上时,也可以监听子组件触发的自定义事件

3.$events应用

  在上一节中,在Vue实例中创建的方法需要访问原生DOM事件时可以直接传入event来获取。如果在内联语句处理器中需要访问原生DOM事件时,则可以用一个特殊变量$event将其传入方法中。代码示例如下:

<button v-on:click="say(‘hello‘,$event)">Submit</button>

methods:{
     say:function(){
        //现在我们可以访问原生事件对象
        event.preventDefault()
    }       
}

二、如何使用修饰符

  修饰符是以半角句号(.)开始的特殊后缀,用于表示指令应当以特殊方式绑定。在事件处理器上,Vue.js为v-on提供了4个事件修饰符,即.prevent、.stop、.capture与.self,以使JavaScript代码负责处理纯粹的数据逻辑,而不用处理这些DOM事件的细节。Vue.js还为v-on添加了按键修饰符,用于监听键盘事件。

  在使用方式上,事件修饰符可以串联,代码示例如下:

<a v-on:click.stop.prevent="doThat">

  也可以只有修饰符而不绑定事件,代码示例如下:

<form v-on:submit.prevent></form>

1.prevent

  在事件处理器中经常需要调用event.preventDefault()来阻止事件的默认行为,Vue.js提供了.prevent事件修饰符以使之在HTML中便能完成操作。代码示例如下:

//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>

2.stop

 除了event.preventDefault(),用于阻止事件冒泡的event.stopPropagation()也经常被调用,Vue.js也提供了相应的.stop事件修饰符。代码示例如下:

//阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>

3.capture

  .capture事件修饰符表示添加事件侦听器时采用capture即捕获模式。代码示例如下:

<div v-on:click.capture="doThis">..</div>

4.self

  .self事件修饰符同样是Vue.js表示只当事件在该元素本身(而不是子元素)触发时触发回调。代码示例如下:

<div v-on:click.self="doThat">..</div>

5.按键

  监听键盘事件经常需要检测keyCode。Vue.js可以为v-on添加键盘修饰符,代码示例如下:

//只有在keyCode是13时调用vm.submit()
<input v-on:keyup.13="submit">

  鉴于记住所有的keyCode比较困难,Vue.js为常用的按键提供了别名。代码示例如下:

  完整的按键别名如下:

  • enter(keycode:13)
  • tab(keycode:9)
  • delete(keycode:8,46)
  • esc(keycode:27)
  • space(keycode:32)
  • up(keycode:38)
  • down(keycode:40)
  • left(keycode:37)
  • right(keycode:39)

 

  

以上是关于Method的主要内容,如果未能解决你的问题,请参考以下文章

Method

如何将 View 类中的代码片段移动到 OnAppearing() 方法?

Android获取各个应用程序的缓存文件代码小片段(使用AIDL)

javaSE_07_方法

如何在片段中隐藏键盘?

调用 replace() 方法后片段闪烁/闪烁