方法methods补充
methods，即方法，用于存放函数，通常结合v-on使用来进行事件绑定，也可以用于插值表达式{{}}中展示值以及提供给指令使用。
我们可以在methods以外的地方定义函数吗？答案是否定的（后面说到computed另说，下同）。
Vue-loader会把整个.vue文件当作是一个超大的字符串来对它进行解析，因此必须将函数定义在methods中。这一点上与React是有差别的，在React中可以定义函数的位置比较多。
由于script中是可以写逻辑语句的所以把函数写在methods外script内并不会导致程序报错，但如此一来写在methods外的逻辑就跟结构层失去了联系。
methods与data中的变量结合起来后自变量因变量的逻辑可以处理许多不同的视图更新需求。
【注意】从npm上下载的包所提供的函数也要存放在methods中，否则结构层无法调用函数。
比如现在下载一个时间处理模块moment实验一下，moment实质上是一个函数：
v-on事件绑定详解
事件绑定函数的两种方式
两种方法的区别在于参数传递的方式上，第一种方法是事件绑定函数名，当我们不需要传参的时候可以直接在v-on事件绑定的属性值中写函数名即可，这种方法默认携带事件对象；第二种方法是事件绑定函数调用，当我们要确切的传递参数时我们就要以在v-on事件绑定属性值中调用函数并传参的方式，有的时候我们还需要传事件对象，在Vue中的事件对象传递通过$event并且事件对象的传参必须在所有参数之后。
以上的例子就是用调用函数的方式，前面计数器一篇juejin.im/editor/post…
Vue中的事件对象传递
上面我们说到事件绑定函数的两种方式中第一种事件绑定函数名是默认携带事件对象的，事件对象会成为该函数的第一个参数，需要获取时直接在函数中以形参接收即可，我习惯将接收事件对象的形参命名为ev，如下：
HTML:
<p @click='add'>{{num}}</p>
JS:
export default {
data ( ) {
return{
num: 0
}
}
methods: {
add ( ev ) {
console.log ( event . target . innerHTML )
this . num ++
}
}
}
随手找个组件图示一下：
而第二种方法事件绑定函数调用在传递事件对象必须要将$event作为最后一个参数来传递。
常用的事件修饰符
.stop 阻止冒泡
我们在处理事件相关的问题是必然会碰到事件冒泡的问题，这一修饰符是用来阻止事件冒泡的。下面举个栗子~
像下图这种情况无论点哪个按钮都会冒泡触发父元素的事件。
原生JS的阻止冒泡有点麻烦：
Vue修饰符阻止冒泡方便很多：
prevent 阻止默认行为
说到默认行为最典型的就是a标签的默认跳转,下面就以a标签举个栗子~
原生：
VUE:
时间修饰符可以串联在一块写，像这样：<a @click.stop.prevent='handle'></a>，但在串联使用修饰符的时候需要注意先后顺序的问题：
除了以上两个鼠标事件相关的修饰符比较常用之外还有一些键盘事件相关的修饰符也会比较常用：
.enter 指定回车键
这个修饰符一般跟表单结合使用，用于键盘事件指定enter键，例如回车提交表单：
.delete 指定删除键
下面还是用上面的表单举个栗子让用户按键delete时将文本框内容一秒清空
自定义修饰符
Vue为我们提供的案件修饰符并不囊括键盘上的所有按键，除了Vue为我们提供的按键修饰符以外我们还可以根据自己的实际工作情况来自定义案件修饰符，做法是通过全局config.keyCodes对象和键盘码来实现。
键盘上的每个按键都有对应的唯一键盘码，我们可以获取看看：
下面将键盘码作为修饰符看看效果：
像这样直接用键盘码作为修饰符有一个缺点就是不直观，我们在实际工作中不可能所有的键盘码都记得以至于有的时候我们在看到键盘码时并不能很快就知道对应的按键，针对这一缺点，Vue为我们提供了给自定义按键命名的方法，让我们在工作中更块地识别自定义按键。具体的做法是通过全局的config.keyCodes对象。
因为config.keyCode是全局的，所以要放到入口文件main.js里（结合webpack和node做比较完整的项目的情况下，纯Vue挂html里写着练手的忽略）。
