Vue之双向数据绑定
demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue-双向数据绑定</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<div id="app">
<div>
<div>
<!--双向数据绑定: 输入的值显示输出在页面上-->
<h3>双向数据绑定 input / select / textarea</h3>
<label>姓名:</label>
<input ref="name" type="text" v-on:keyup="logName"/>
<span>{{name}}</span>
<label>年龄:</label>
<input ref="age" type="text" v-on:keyup.enter="logAge"/>
<span>{{age}}</span>
</div>
</div> <hr>
<!--双向数据绑定: 使用model方式实现-->
<div>
<h3>双向数据绑定(v-model方式实现)</h3>
<label>姓名:</label>
<input type="text" v-model="name2"/>
<span>{{name2}}</span>
<label>年龄:</label>
<input type="text" v-model="age2"/>
<span>{{age2}}</span>
</div> </div>
<script src="app.js"></script> </body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
name: "",
age: "",
name2: "",
age2: "", },
methods: {
logName: function () {
console.log("正在输入名字!")
this.name = this.$refs.name.value;
},
logAge: function () {
console.log("正在输入年龄!")
this.age = this.$refs.age.value;
}
},
})
截图:
Vue之双向数据绑定的更多相关文章
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- Vue原理--双向数据绑定
MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态 ...
- vue的双向数据绑定原理
原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...
- 深入vue源码,了解vue的双向数据绑定原理
大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> < ...
随机推荐
- go标准库的学习-os
参考https://studygolang.com/pkgdoc 导入方式: import "os" os包提供了操作系统函数的不依赖平台的接口 一开始简单举个例子: packag ...
- SSH远程SOLARIS11时被拒绝
在虚拟机中新安装的solaris11,安装过程中配置了静态IP地址用以方便ssh连接,使用root用户ssh连接时,密码没有错,但总是提示密码被拒绝,连接established 代表是通的,telne ...
- Could not get a resource from the pool 错误解决
错误关键信息:Could not get a resource from the pool 通常原因是因为远程服务器上的redis没有配置好. 解决方案如下:(1)将redis.conf中的bind: ...
- Generative Adversarial Nets[AAE]
本文来自<Adversarial Autoencoders>,时间线为2015年11月.是大神Goodfellow的作品.本文还有些部分未能理解完全,不过代码在AAE_LabelInfo, ...
- Jenkins-配置LDAP认证
Jenkins-配置LDAP认证 参考文档: LDAP添加用户详见我的博文 Linux分类 中的< LDAP2-创建OU和用户>博文. 1.LDAP配置 1.准备一个adminDN账号用 ...
- HTML5学习总结-番外05 http 状态码
所有状态码汇总: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其 ...
- HBuilder使用夜神模拟器调试Android应用
由于HBuilder的扫描机制无法直接连上夜神模拟器.我搞了好久终于找到办法了,分享给大家. 首先,启动HBuilder和夜神模拟器 然后打开cmd命令提示符 cd进入夜神模拟器bin目录 执行以下命 ...
- 如何选择分布式事务形态(TCC,SAGA,2PC,补偿,基于消息最终一致性等等)
各种形态的分布式事务 分布式事务有多种主流形态,包括: 基于消息实现的分布式事务 基于补偿实现的分布式事务(gts/fescar自动补偿的形式) 基于TCC实现的分布式事务 基于SAGA实现的分布式事 ...
- IDEA安装Lombok插件失败的解决方案
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. Lombok简介 Lombok是Java语言的实用工具,确切的说,应 ...
- iOS开发——无网占位图的实现
https://www.jianshu.com/p/d537393fe247 https://github.com/wyzxc/CQPlaceholderViewhttps://github.com/ ...