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 相关文章推荐
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
如何利用node转发请求详解
Sep 17 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
Yii2中事务的使用实例代码详解
2016/09/07 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python实现简单登陆系统
2018/10/18 Python
python实现广度优先搜索过程解析
2019/10/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
百联网上商城:i百联
2017/01/28 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
部队领导证婚词
2014/01/12 职场文书
旷课检讨书3000字
2014/02/04 职场文书
烹调加工管理制度
2014/02/04 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
反邪教警示教育方案
2014/05/13 职场文书
个人总结格式范文
2015/03/09 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书