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 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
微信小程序sessionid不一致问题解决
Aug 30 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怎样调用MSSQL的存储过程
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JavaScript Split()方法
2015/12/18 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
应届生学校辅导员求职信
2013/11/07 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Java字符串逆序方法详情
2022/03/21 Java/Android