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. 剑指offer五十二之正则表达式匹配

    一.题目 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式 ...

  2. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  3. mysql ERROR 1045 (28000): Access denied for user 可能解决方法分析

    在实际登录redmine的过程中,我们遇到了如下的error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...

  4. Java之IO(四)DataInputStream和DataOutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6986155.html 1.前言 DataInputStream和DataOutputStream分别继承了Fil ...

  5. VirtualBox虚拟机安装ubuntu系统（图文详解）

    不多说,直接上干货! 想简单说下,想必大家有的喜欢玩一下linux操作系统,但是又不想实际安装在物理机上.那我们就需要用到虚拟机了,这里我们介绍一下如何用VirtualBox安装ubuntu的方法. ...

  6. Chapter 3 Phenomenon——16

    "Your X-rays look good," he said. "Does your head hurt? Edward said you hit it pretty ...

  7. android学习-数据存储(一)-----SQLite源码分析

    分析SQLiteDatabase.java,SQLiteStatement.java,SQLiteSession.java,SQLiteConnectionPool.java,SQLiteConnec ...

  8. rvm is not a function的解决方法

    今天在使用rvm 1.9.3 --default设置默认的ruby的命令时出现 RVM is not a function, selecting rubies with 'rvm use ...' w ...

  9. golang基础--细说defer

    defer 匿名函数特性 执行方式类似其它语言中的析构函数,在函数体执行结束后按照调用顺序的相反顺序逐个执行 //执行顺序相反 package main import "fmt" ...

  10. For update带来的思考

    For update or not 起源 ​ 之所以想写这个专题,是因为最近在做一个抢占任务的实现.假设数据库很多个任务,在抢占发生之前任务的状态都是FREE.现在假设同时有一堆抢占线程开始工作,抢占 ...