Vue学习之路---No.5（分享心得，欢迎批评指正）

同样，首先我们还是回顾一下昨天讲到的东西：

1.常用的Vue修饰器

2.当利用js方法不修改数据，但也可以改变视图时，我们需要整体返回再整体接收

（如： items.example1 = items.example1.filter(function(){})）

3.当我们不能直接对数组进行修改的时候，我们通常要么利用vue内置set（），要么利用整体接收来修改

4.对数组中的数据进行过滤和排序，可以用computed也可以用methods

下面我们开始今天的内容：：：

事件和事件的方法：

<div id = example2>
<button v-on:click="greet">greet</botton>
</div>

var example-2 = new Vue({
el: ' #example ',
data : {
admin : ' vue.js '
}

method : {
greet : function ( event ){

alert ( ' Hello ' + this.name + ' ! ' )
//this在这里值vm对象
alert(' event.target.tagName ')
//event在这里指js原生对象
}
}
})
//这个方法可以在外部用javascript:;的方法调用
example2.greet() // -> " hello vue.js "

同时，我们也可以直接写表达式处理

<div id = " example-2 ">
<button v-on:click = "contain + = 1 ">add 1</button>
<p>{{ contain }}</p>
</div>

el:' #example-2 ',
data : {
contain : .0
}

也可以用传参的方法来处理

<div id = "example-2">
<button v-on:click= " look( 'beauti girl' ) "></button>
<button v-on:click= " look ( ' sex girl ' ) "></button>
</div>

var example2 = new Vue({
el: ' #example2 ',
data{ }
methods : {
look function ( message ){
alert( message )
}
}
})

我们可以总结一下，就是，如果 v-on:click=""后面跟的方法名如果带括号，那它就是js表达式

如果不带括号，那它就是vue方法名，从我们第一个例子可以看到，当后面跟的东西没带括号的时候

也会有一个event，这是vue内置的默认event，就算它没有传入什么值。

但是如果是这种情况，也就是带括号的情况，如果括号里没有参数，那么也就获取不到event，如下：
<button v-on:click=" dream( 'I just wanna to run ', $event )"> dream </button>

methods : {
dream : function( message , event ){
if ( event ) {
event.preventDefault()
alert ( message )
}
}
}

这里就需要传参才可以~

下面我们讲一下事件修饰器：：：

// 阻止点击事件的冒泡行为
<a v-on:click.stop="doThis"></a>
// 阻止默认的表单提交
<form v-on:submit.prevent="onSubmit"></form>
// 事件修饰器可以连用
<a v-on:click.stop.prevent="doThat">
// 只需要修饰器，而无需处理方法
<form v-on:submit.prevent></form>
// 使用 capture 模式
<div v-on:click.capture="doThis">...</div>
// 仅当event.target是自身的时候才执行
// 比如，这样写了之后点击子元素就不会执行后续逻辑
<div v-on:click.self="doThat">...</div>

今天的内容稍稍有点少~~打了个电话有点久~~~请朋友们见谅；之后尽量早点开始总结输出~~明天见，goodnight~