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-键盘事件、健值修饰符、双向数据绑定的更多相关文章

  1. Vue.js-06：第六章 - 按键修饰符的使用

    一.前言  上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...

  2. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  3. vue教程1-01 v-model 一般表单元素(input) 双向数据绑定

    vue教程1-01   v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...

  4. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  6. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  7. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  8. vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 14_java之变量|参数|返回值|修饰符

    01java中的文档注释和制作 * A: 在eclipse使用时,可以配合文档注释,导出对类的说明文档,从而供其 他人阅读学习与使用. 通过使用文档注释,将类或者方法进行注释用@简单标注基本信息.如@ ...

随机推荐

  1. iOS设置圆角的三种方式

    第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. ? 1 2 3 4 5 6 7 UIImageView *imageView = [[UIImageV ...

  2. YYYY-mm-dd HH:MM:SS 时间格式

    YYYY-mm-dd HH:MM:SS部分解释 d               月中的某一天.一位数的日期没有前导零.    dd             月中的某一天.一位数的日期有一个前导零.   ...

  3. python聚类算法实战详细笔记 (python3.6+(win10、Linux))

    python聚类算法实战详细笔记 (python3.6+(win10.Linux)) 一.基本概念:     1.计算TF-DIF TF-IDF是一种统计方法,用以评估一字词对于一个文件集或一个语料库 ...

  4. Xpath string()提取多个子节点中的文本

    <div> <ul class="show"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>00 ...

  5. (转)Mysql技术内幕InnoDB存储引擎－事务&备份&性能调优

    事务 原文:http://yingminxing.com/mysql%E6%8A%80%E6%9C%AF%E5%86%85%E5%B9%95innodb%E5%AD%98%E5%82%A8%E5%BC ...

  6. linux 可执行文件与写操作的同步问题

    当一个可执行文件已经为write而open时,此时的可执行文件是不允许被执行的.反过来,一个文件正在执行时,它也是不允许同时被write模式而open的.这个约束很好理解,因为文件执行和文件被写应该需 ...

  7. hadoop2.x 异常

    运行mr,出现如下异常 需要配置yarn-site.xml中配置如下信息 参考地址: https://issues.apache.org/jira/browse/MAPREDUCE-2983 http ...

  8. (win 7)使用puma以后，重启rails server报错： in `trap': unsupported signal SIGCHLD (ArgumentError)

    如图: 解决方案: 把config/puma.rb 文件中的 workers Integer(ENV['WEB_CONCURRENCY'] || 2) 改成 workers Integer(ENV[' ...

  9. 【C#小知识】C#中一些易混淆概念总结(四)---------解析Console.WriteLine() 分类： C# 2014-02-05 17:18 1060人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) [C#小知识]C#中一些易混淆概念总结(三) ------------------------------ ...

  10. 用as3.0制作一个滚动条组件

    本实例演示了实现一个滚动条基本功能的制作方法,没有添加改变皮肤,修改滚动条视框大小等功能,有兴趣的朋友可根据自己要求自行添加.使用时只需要通过以下一行代码创建滚动条组件: var myScrollba ...