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~