同样,首先我们还是回顾一下昨天讲到的东西:
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~
来源: http://www.cnblogs.com/fangmc/p/6551514.html