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

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~

转载于:https://www.cnblogs.com/fangmc/p/6551514.html

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

  1. 前端Vue学习之路(二)-Vue-router路由

    Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...

  2. 前端Vue学习之路(一)-初识Vue

    Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...

  3. Vue学习之路（基础篇）

    Vue学习之路(基础篇)

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

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  5. Vue学习之路1 小白起步

    习背景: 之前一直写As3.0,从开始的flash小游戏,到网页播放器,到最近结束的桌面应用,东西越写越多,路却越走越窄T_T  言归正传,转到前端算是小白了,就从html.js.css这些开始学,好 ...

  6. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...

  7. Vue学习之路(8)------快餐店收银系统

    转载:http://jspang.com 第1节:Mockplus把我们的想法画出来 第2节:Vue-cli搭建开发环境 第3节:搞定项目图标Iconfont 第4节:编写独立的侧边栏导航组件 第5节 ...

  8. 前端Vue学习之路(五)插件的使用

    vant插件使用 这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话 找到package.json文件 添加以下内容 plugins:[['import', ...

  9. 前端Vue学习之路(四)axios请求数据

    axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识 假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动 所以封装 ...

  10. mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路

    今天看一篇文档中见到了了v-cloak指令,感觉很新鲜.由于使用的频率不高.但还是想了解下是做什么的. 众所周知,程序的指令一般都是语义化的,然后,我企图从cloak这个单词能找到点线索. 然后发现, ...

最新文章

  1. java map prefix_从键以特定表达式开头的Map中获取所有值的最快方法
  2. SQL语句的增删改查
  3. linux驱动由浅入深系列链接
  4. python——类和对象之__dict__属性的使用
  5. iOS程序启动原理(上)
  6. dotnet Blazor 用 C# 控制界面行为
  7. 基于VMWare配置VxWorks开发环境
  8. 李开复唱衰互联网手机：大部分公司会失败
  9. Mysql 函数入门
  10. pandas read_sql
  11. 嵌入式linux ntpd命令,嵌入式Linux网络编程之：实验内容——NTP协议实现
  12. 详解C/C++预处理器
  13. 计算机中我的云文档在哪儿里,wps云文档可以删除吗在哪里删除
  14. PL/SQL基础题型
  15. 好用的网页在线客服工具
  16. 信息化，从心动到行动有多远？
  17. Font Awesome文字图标的使用
  18. 新一代的无线通信技术（转）
  19. DaVinci：限定器 - RGB
  20. 每个人的心里都有两头狼

热门文章

  1. LayaAir 屏幕适配-横屏与竖屏
  2. JavaScript JSON 对象使用详解、JSON. parse()、JSON. stringify()
  3. 小D课堂 - 零基础入门SpringBoot2.X到实战_汇总
  4. 阶段3 2.Spring_07.银行转账案例_10 使用动态代理实现事务控制
  5. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_3_BufferedInputStream_字节缓冲...
  6. Master Reactor Manager Worker TaskWorker(Task)
  7. 详解C# 匿名对象（匿名类型）、var、动态类型 dynamic
  8. Remove Duplicates from Sorted List解题报告
  9. SQL Server 2008 R2 企业版/开发版/标准版（中英文下载，带序列号）
  10. 【转载】.NET系统学习----Assembly