Vue.js Method

Method

Vue.js 的事件监听一般都通过 v-on 指令配置在HTML中,虽然也可以在Javascript 代码中使用原生 addEventListener 方法添加事件监听,但Vue.js 本身并不提倡如此。

看上去这种方式不符合传统的“关注点分离”的理念,但其实所有的Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上。实际上,采用它提供的 v-on 指令有以下几点好处:

(1)、通过查看HTML 模板便能轻松定位 Javascript 代码中对应的方法

(2)、无须在Javascript 中手动绑定事件,ViewModel 和 Dom 完全解耦,更易于测试

(3)、当一个 ViewModel 被销毁时,所有的事件处理器都会被自动删除

如何绑定事件

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

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

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

<button ng-click="learnVue()">submit</button>

Vue.js 也采取了这样的方式来绑定事件

1、内联方式

Vue.js 在HTML 文档元素中采用 v-on 指令来监听DOM事件

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

2、methods 配置

上例中,当用户将click 事件与某个方法绑定时,需要在Vue 实例中进行定义,所有定义的方法都放在methods 属性下

<div id="example">
    <button v-on:click="greet">Greet</button>
    <button v-on:click="say(‘hi‘)">Say Hi</button>
</div>

<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:‘#example‘,
        data:{
            name:‘Vue.js‘,
        },
        //在 methods 对象中定义方法
        methods:{
            greet:function(event){
                //方法内 this 指向 Vue实例对象
                console.log(this);
                console.log(‘Hello‘ +this.name+‘!‘);
                //event 是原生 DOM 事件
                console.log(event.target.tagName);

            },
            say:function(msg){
                alert(msg);
            }
        }
    })
</script>

需要注意的地方如下:

(1)、methods中定义的方法中的this 始终指向创建的 Vue实例

(2)、与事件绑定的方法支持参数 event 即原生 DOM 事件的传入

(3)、方法用在普通元素上时,只能监听原生 DOM事件;用在自定义元素组件上时,也可以监听子组件触发的自定义事件

3、 应用

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

<div id="example">
    <a href="https://cn.vuejs.org/v2/guide/index.html" v-on:click="prevent($event)">Vue官网</a>
</div>

<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    new Vue({
        el:‘#example‘,
        //在 methods 对象中定义方法
        methods:{
            prevent:function(event){
                //现在我们可以访问原生事件对象
                event.preventDefault();
            }
        }
    })
</script>

这样,就阻止了点击a 链接以后,跳转到Vue页面

4、如何使用修饰符

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

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

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

也可以只使用修饰符,不绑定事件:

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

4-1、prevent

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

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

4-2、stop

event.stopPropagation() 用于阻止事件冒泡,Vue.js 也提供了相应的.stop事件修饰符

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

4-3、capture

.capture事件修饰符是 Vue.js 1.0.16 版本中新增的,表示事件侦听器时采用 capture 即捕获模式

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

4-4、self

.self 事件修饰符同样是 Vue.js 1.0.16 版本中新增的,表示只当事件在该元素本身(而不是子元素)触发时触发回调

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

5、按键

监听键盘事件经常需要检测 keyCode。Vue.js 可以为 v-on 添加键盘修饰符

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

更多关于keyCode的介绍,可参考博文 http://dapengtalk.blog.51cto.com/11549574/1860203

时间: 2024-10-26 04:51:00

Vue.js Method的相关文章

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自

实例分析Vue.js中 computed和method不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

Vue.js——vue-resource全攻略

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

MVVM大比拼之vue.js源码精析

VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准 入口 Vue 的入口也很直白: ? 1 var demo = new Vue({ el: '#demo', data: { message: 'Hello V

vue.js 中slot 用处大(转载)

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submit.prevent syntax to avoid that behavior. Then wire together the @submitevent with an add Vuex action to handle an async post to an api. This lesson wa

Vue.js学习之条件v-if和列表循环v-for详解

本文将继续和大家分享Vue.js的基础知识,主要是介绍Vue.js的条件v-if和列表循环v-for的相关使用,一起来看看吧,希望可以帮助大家更好的学习Vue.js. v-if .v-else.v-show.还可以使用template <div v-if="ok">ok</div> <div v-else>No</div> <div v-show="ok">ok</div> <templa

Vue.js&mdash;&mdash;vue-resource全攻略

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

从Vue.js源码角度再看数据绑定

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue).在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](http