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

2024-11-30 10:40:40

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

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 文件中的数据

源代码 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 （二）

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

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

源代码 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 框架之键盘事件、健值修饰符、双向数据绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门双向绑定的思想双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是
vue实现的双向数据绑定操作示例

本文实例讲述了vue实现的双向数据绑定操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script> &
轻松理解vue的双向数据绑定问题

Vue介绍 Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的.因为它提供了简洁易于理解的api,使得我们很容易上手. Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步. 双向绑定主流双向数据绑定实现原理脏值检测 : 这是AngularJS实现双向数据绑定的方式.
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

1.使用Vue.js实现双向表单数据绑定,例子  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r
Vue实现双向数据绑定

Vue实现双向数据绑定的方式,具体内容如下 Vue是如何实现双向数据绑定的呢?答案是前端数据劫持.其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值. 实现对象属性变化绑定到UI 大概的思路是: 1. 确定绑定的数据,使用Object.defineProperty()对其数据变化进行监听(对应defineGetAndSet) 2. 一旦数据发生改动,会触发setter函数.
vue 双向数据绑定的实现学习之监听器的实现方法

提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持和发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现. 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥? 上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和实例化调用了 compile 方法. 到这里我们就明白了,实例化一个Myvue后,我们要做的就是监听数据变化和编译模板 . 上面O
vue双向数据绑定知识点总结

1.原理 vue的双向数据绑定的原理相信大家都十分了解:主要是通过ES5的Object对象的defineProperty属性:重写data的set和get函数来实现的所以接下来不使用ES6进行实际的代码开发:过程中如果函数使用父级this的情况:还是使用显示缓存中间变量和闭包来处理:原因是箭头函数没有独立的执行上下文this:所以箭头函数内部出现this对象会直接访问父级:所以也能看出箭头函数是无法完全替代function的使用场景的:比如我们需要独立的this或者argument的时候 1.
通过源码分析Vue的双向数据绑定详解

前言虽然工作中一直使用Vue作为基础库,但是对于其实现机理仅限于道听途说,这样对长期的技术发展很不利.所以最近攻读了其源码的一部分,先把双向数据绑定这一块的内容给整理一下,也算是一种学习的反刍. 本篇文章的Vue源码版本为v2.2.0开发版. Vue源码的整体架构无非是初始化Vue对象,挂载数据data/props等,在不同的时期触发不同的事件钩子,如created() / mounted() / update()等,后面专门整理各个模块的文章.这里先讲双向数据绑定的部分,也是最主要的部分.
使用Vue如何写一个双向数据绑定(面试常见)

1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充. 添加网上的一张图 2.实现页面结构很简单,如下 <div id="app"> <form> <input
详解Vue双向数据绑定原理解析

基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调. 思路整理要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数: 3.实现

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

相关推荐

随机推荐