Vue 框架之键盘事件、健值修饰符、双向数据绑定


Posted in Javascript onNovember 14, 2018

一、键盘事件,当按键盘时,在控制台输出提示

Vue 框架之键盘事件、健值修饰符、双向数据绑定

html 源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>VueLearn-cnblogs/xpwi</title>
    <!--引入自定义的样式-->
    <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <!--引入 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 文件中的数据

Vue 框架之键盘事件、健值修饰符、双向数据绑定

源代码 html 文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>VueLearn-cnblogs/xpwi</title>
    <!--引入自定义的样式-->
    <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <!--引入 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 (二)

上面数据绑定是在按下 输入回车键的时候,来回的同步数据,下面介绍另一种方式,实现双向数据绑定

Vue 框架之键盘事件、健值修饰符、双向数据绑定

双向数据绑定第二种方法:

 源代码 html 文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>VueLearn-cnblogs/xpwi</title>
    <!--引入自定义的样式-->
    <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
    <!--引入 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 框架之键盘事件、健值修饰符、双向数据绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
微信小程序日历效果
Dec 29 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
Vue源码探究之状态初始化
Nov 14 #Javascript
vue使用laydate时间插件的方法
Nov 14 #Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 #Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 #Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 #Javascript
React和Vue中监听变量变化的方法
Nov 14 #Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
form自动提交实例讲解
2017/07/10 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python常用算法学习基础教程
2017/04/13 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python实现停车管理系统
2018/11/30 Python
Python3标准库总结
2019/02/19 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
《穷人》教学反思
2014/04/08 职场文书
企业宣传工作方案
2014/06/02 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
python 命令行传参方法总结
2021/05/25 Python
Python制作春联的示例代码
2022/01/22 Python