Class17 - Vue Methods
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue Methods
Methods
中编写自定义方法,在调用时可以通过VM实例访问这些方法。同时,我们需要注意以下几点:
- 1、方法中的
this
自动绑定为 Vue 实例. - 2、不应该使用箭头函数定义函数,箭头函数绑定了父级作用域的上下文,所以
this
将不会按照期望指向 Vue 实例. - 3、获取方法中的事件属性,通过
$event
参数进行传递。 - 4、
.native
绑定原生事件
- 监听获取事件
1
<button v-on:click="add(2,$event)">add</button>
1 | add:function(num,event){ |
.native
的使用
定义组件1
2
3var btn = {
template:`<button>组件add</button>`
}
在页面上调用1
<btn></btn>
若直接在当前组件根路径添加点击事件1
<btn @click="add(2,$event)"></btn>
此时的click
方法并不会调用。正确的使用方式,是添加.native
修饰符,将btn
组件当成普通html1
<btn @click.native="add(2,$event)"></btn>
源码
1 |
|