认识Vue和修饰符
Vue
一、认识Vue
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue官网
创建一个 .html
文件,然后通过如下方式引入 Vue:
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
HTML
{{ message }}
JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
二、修饰符 1、事件修饰符
说明:
showsome(21, $event)
中21是函数传递的数字变量,$event是Vue提供的当前事件的事件对象。两个标签都有相同的函数,则会有事件冒泡。
阻止事件冒泡,使用事件修饰符。
link me
2.按键修饰符 下面例子,用事件的event去判断是否按的是enter(对应which编码是13)键。
可以使用按键修饰符,按enter键才响应函数。
按键修饰符有:
enter
,space
,esc
, 也可以写按键which对应的数字
【认识Vue和修饰符】等同于
事件修饰符可以链式调用
意思是按下enter键或者space键或者esc键都可以响应函数。全部的按键别名:
.enter
.tab
-
.delete
(捕获 "删除" 和 "退格" 键) .esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (?)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (?)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。注意:系统修饰键与常规按键不同,单独按没有效果需组合按键。
三、练习 1、一个输入框,输入什么就实时输出什么;
2、一个输入框,输入内容按下回车或者空格才输出输入框中的内容;
3、一个表单的submit按键不跳转。
output: {{ name }}
output: {{ name }}
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福(12)
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 樱花雨
- vue-cli|vue-cli 3.x vue.config.js 配置
- 前任
- 2020-04-07vue中Axios的封装和API接口的管理