Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
Vue 框架-03-键盘时间及健值修饰符
一、键盘事件，当按键盘时，在控制台输出提示
html 源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--name 具体的值是在 js 中定义的-->
<h2> 键盘 Events </h2>
<label>姓名：</label>
<input type="text" v-on:keyup="logName" />
<label>年龄：</label>
<input type="text" v-on:keyup="logAge" />
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/appEvent.js" ></script>
</body>
</html>
js 源码：
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
},
methods:{
logName: function(){
console.log("你这正在输入名字！");
},
logAge: function(){
console.log("你这正在输入年龄！");
}
}
});
上面代码是当用户点击输入框后，只要按下键盘就会在控制台打印一次提示，实际应用的并不多，下面介绍当用户按下回车键时，才触发
二、健值修饰符
下面在时间后面加上：.enter
就可以实现只监听 enter 键，就可以实现，当用户在输入完成，按下回车键时，触发我们自定义的事件
<input type="text" v-on:keyup.enter="logName" />
三、双向数据绑定 input，selecet，textarea
适用：input，selecet，textarea 三种标签
js 文件种拿到 html 文件种输入的数据，然后 html 中拿到 js 文件中的数据
源代码 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--name 具体的值是在 js 中定义的-->
<h2> 键盘 Events </h2>
<label>姓名：</label>
<!--加一个 ref 用来在 js 文件中拿到 input 标签中输入的内容-->
<input ref="userName" type="text" />
<label>年龄：</label>
<input ref="userAge" type="text" v-on:keyup.enter="notice" />
<hr />
<span>已确认信息：</span>
<br />
姓名：{{name}}<br />
年龄：{{age}}
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/appEvent.js" ></script>
</body>
</html>
源代码 js 文件：
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name : "",
age : ""
},
methods:{
notice: function(){
//console.log("你这正在输入年龄！");
//this.name 是 js 文件上面定义的一个 name 变量
this.name = this.$refs.userName.value;
this.age = this.$refs.userAge.value;
alert("姓名:" + this.name + " 年龄：" + this.age);
}
}
});
四、双向数据绑定 input，selecet，textarea （二）
上面数据绑定是在按下 输入回车键的时候，来回的同步数据，下面介绍另一种方式，实现双向数据绑定
双向数据绑定第二种方法：
源代码 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--name 具体的值是在 js 中定义的-->
<h2> 键盘 Events </h2>
<label>姓名：</label>
<!--加一个 ref 用来在 js 文件中拿到 input 标签中输入的内容-->
<input ref="userName" type="text" v-model="name" />
<label>年龄：</label>
<input ref="userAge" type="text" v-model="age"/>
<hr />
<span>同步数据：</span>
<br />
姓名：{{name}}<br />
年龄：{{age}}
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/appEvent.js" ></script>
</body>
</html>
源代码 js 文件：
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name : "",
age : ""
},
methods:{
notice: function(){
//console.log("你这正在输入年龄！");
//this.name 是 js 文件上面定义的一个 name 变量
this.name = this.$refs.userName.value;
this.age = this.$refs.userAge.value;
alert("姓名:" + this.name + " 年龄：" + this.age);
}
}
});
Vue 框架-03-键盘事件、健值修饰符、双向数据绑定的更多相关文章
- Vue.js-06：第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- Vue.js学习笔记（三） - 修饰符
本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
vue教程1-01 v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...
- 29.VUE学习之--键盘事件.键盘修饰符的实例讲解
键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue添加页面键盘事件
我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...
- vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 14_java之变量|参数|返回值|修饰符
01java中的文档注释和制作 * A: 在eclipse使用时,可以配合文档注释,导出对类的说明文档,从而供其 他人阅读学习与使用. 通过使用文档注释,将类或者方法进行注释用@简单标注基本信息.如@ ...
随机推荐
- selenium IDE的基本命令
waitForText.verifyText和asserText命令 waitForText语句在测试执行时用来判断某些文本是否存在界面中.若界面上显示了指定文本,测试程序会继续执行:若等待一段时间后 ...
- Linux CentOS7系统探索
这两天,突发奇想,想着用着微软家的windows系统很多年了,也想尝试一下其他的操作系统.很快的就想到了Linux操作系统,它不是面向用户的,而是面向服务器的,在服务器端的市场中占了很大的市场份额,备 ...
- Visual Studio 中的 Office 和 SharePoint 开发
MSDN Library 开发工具和语言 Visual Studio 中的 Office 和 SharePoint 开发 https://msdn.microsoft.com/zh-cn/libra ...
- http2.0之头部压缩
什么是头部压缩?为什么要头部压缩? 我们知道,http请求和响应都是由[状态行.请求/响应头部.消息主题]三部分组成的. 一般而言,消息主体都会经过gzip压缩,或者本身传输的就是压缩过后的二进制文件 ...
- SPSS学习系列之SPSS Modeler的帮助文档怎么调出来使用？
不多说,直接上干货! 欢迎大家,加入我的微信公众号:大数据躺过的坑 人工智能躺过的坑 同时,大家可以关注我的个人博客: http://www.cnblogs.com/z ...
- FindBugs：Java 静态代码检查
在使用 Jenkins 构建 Java Web 项目时候,有一项叫做静态代码检查,是用内置的 findBugs 插件,对程序源代码进行检查,以分析程序行为的技术,应用于程序的正确性检查. 安全缺陷检测 ...
- 关于gcc编译器中函数不用进行原型声明的解释
经过大量实验和参考网上的说法得出一个结论: gcc编译器中,函数可以不用提前进行原型声明,编译器会把函数调用同时认为是声明.需要注意的是,由于函数调用的时候并没有写明函数返回值,这是gcc把调用当成声 ...
- Java 注解实例
package com.annotation; import java.lang.annotation.Retention; import java.lang.annotation.Target; i ...
- redis实战笔记（3）-第3章 Redis命令
第3章 Redis命令 本章主要内容 字符串命令. 列表命令和集合命令 散列命令和有序集合命令 发布命令与订阅命令 其他命令 在每个不同的数据类型的章节里, 展示的都是该数据类型所独有的. 最 ...
- 美化checkbox多选框
看到那些UI框架都是有美化checkbox多选框的,不过大多是图片或者是字体图标.于是就利用label仿了个多选框效果. <!DOCTYPE html> <html lang=&qu ...