vue.js前端框架技术

韩颜聪、谢翠兰、赵娟、黄秀明、张衡

目录

  • 1 前置知识
    • 1.1 JavaScript
    • 1.2 掌握ES6基础
    • 1.3 flex布局思维导图
  • 2 Vue.js入门
    • 2.1 学习指南
    • 2.2 Web前端开发概述
    • 2.3 第一个vue实例
    • 2.4 章节测试
  • 3 基础特性
    • 3.1 学习指南
    • 3.2 vue实例常用到的构造选项
    • 3.3 data数据对象
    • 3.4 methods方法
    • 3.5 常用指令
    • 3.6 事件修饰符
    • 3.7 计算属性与监听属性
    • 3.8 filters过滤器
  • 4 内置指令
    • 4.1 学习指南
  • 5 Vue项目化
    • 5.1 学习指南
    • 5.2 Vue CLI三个主要工具
    • 5.3 vue脚手架项目环境配置
    • 5.4 使用Vue Cli快速构建项目
      • 5.4.1 vue脚手架项目目录说明
  • 6 组件
    • 6.1 学习指南
    • 6.2 组件的简介
    • 6.3 组件的使用
    • 6.4 组件之间的通信
      • 6.4.1 父组件向子组件通信
      • 6.4.2 子组件向父组件通信
    • 6.5 组件实战案例
    • 6.6 内容分发slot(插槽)
  • 7 路由插件
    • 7.1 学习指南
    • 7.2 路由的基本使用
    • 7.3 路由传参及获取参数
  • 8 Axios插件
    • 8.1 学习指南
    • 8.2 axios的使用
    • 8.3 axios的使用总结
    • 8.4 跨域的解决
  • 9 课堂实操项目
    • 9.1 综合项目案例截图和素材
事件修饰符
  • 1 内容
  • 2 PPT
  • 3 任务

[事件修饰符]



v-on指令提供了一些事件修饰符,即自定义事件行为,不同的事件修饰符会产生不同的功能,通常配置v-on指令来使用,写在事件之后,用“.”号连接,如“v-on:click.once”表示点击事件只触发一次。常用的事件修饰符如下表所示:



事件修饰符

说明

.stop

阻止事件冒泡

.prevent

阻止默认事件

.capture

添加事件监听器时使用事件捕获模式

.self

将事件绑定到该元素本身,只有自身才能触发

.once

事件只触发一次

键盘事件的修饰符:在我们的项目中,经常需要监听一些键盘事件来触发程序的执行,例如键盘的按下(keydown)和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰,比如:

.enter监听enter回车键的触发
.tab监听tab键的触发
.up、.down 、.left、 .right监听上、下、左、右键的触发
ctrl监听ctrl键的触发
。。。。。。

实例:监听回车键事件

<input @keydown.enter="login">