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> < ...
随机推荐
- 微信硬件平台（八） 1 esp8266从自己的服务器获取token
从txt获取token #include <ESP8266WiFi.h> #define host_token "www.dongvdong.top" #define ...
- Kali-linux使用Metasploit基础
Metasploit是一款开源的安全漏洞检测工具.它可以帮助用户识别安全问题,验证漏洞的缓解措施,并对某些软件进行安全性评估,提供真正的安全风险情报.当用户第一次接触Metasploit渗透测试框架软 ...
- Linux 任务计划 crontab 配置概要与常见问题
Linux 可以利用 crontab 来实现定时任务,自动化操作.本文对此进行简要说明. crontab 操作示例 列出定时任务 crontab -l #列出所有的定时任务,如果没有定时任务,返回 ...
- Golang 爬虫-广度优先（获取html文档中的超链接）
package main import( "fmt" "net/http" "io/ioutil" "regexp" & ...
- 学号 20175329 2018-2019-3《Java程序设计》第四周学习总结
学号 20175329 2018-2019-3<Java程序设计>第四周学习总结 教材学习内容总结 第五章 上周学习的第四章是体现了数据的封装,本章第五章主要是体现出对象的另外两个方面的重 ...
- mysql存储引擎之MyISAM 和 InnoDB的比较
一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...
- Redis学习之字典源码分析
字典,又叫映射,是一种用于保存键值对的抽象数据结构 划重点:抽象数据结构 Redisd字典使用哈希表作为底层实现,一个哈希表里面可以有多个哈希表结点,而每个哈希表结点就保存了字典中的一个键值对 一.哈 ...
- Windows安裝PHP環境
Windows安裝PHP環境的準備工作:httpd-2.2+php-5.4+mysql-5.5 第一步是安裝相對應的三個軟件,只要略懂一些英文單詞,安裝是沒有問題的,所以此處略過三個文件的安裝過程,直 ...
- ML.NET 示例：回归之价格预测
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- .NET Core Community 第二个千星项目诞生：Util
本文所有打赏将全数捐赠于 NCC(NCC 的资金目前由 倾竹大人 负责管理),请注明捐赠于 NCC.捐赠情况将由倾竹大人另行公示. 项目简介 作为一款旨在提升小型团队开发输出能力.提高团队效率.降低项 ...