vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="text" v-model='msg' /> <button v-on:click="getMsg()">获取表单里面的数据get</button> <button v-on:click="setMsg()">设置表单的数据set</button> <br>
<br>
<hr> <br>
<br>
<input type="text" ref="userinfo" />
<br>
<br>
<div ref="box">我是一个box</div> <br>
<br>
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button> </div>
</template> <script> /*
双向数据绑定 MVVM vue就是一个MVVM的框架。 M model V view MVVM: model改变会影响视图view,view视图改变反过来影响model 双向数据绑定必须在表单里面使用。 */ export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
}
},methods:{ /*放方法的地方*/ getMsg(){ // alert('vue方法执行了'); //方法里面获取data里面的数据 alert(this.msg); },
setMsg(){
this.msg="我是改变后的数据"; }, getInputValue(){ //获取ref定义的dom节点
console.log(this.$refs.userinfo); this.$refs.box.style.background='red'; alert(this.$refs.userinfo.value); } } }
</script> <style lang="scss"> </style>
vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点的更多相关文章
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04
<template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...
- Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
随机推荐
- LG1861 星之器
题意 题目背景 Magic Land 上的时间又过了若干世纪„„ 现在, 人们谈论着一个传说:从前,他们的祖先来到了一个位于东方的岛屿, 那里简直就是另外一个世界.善于分析与构造的 Magic Lan ...
- 开发工具idea背景及字体设置
背景设置: 按两下shift,在搜索框里输入set Background Image,选择set Background Image,如图所示: 设置图片的路径和透明度,如图所示: ★ 注意:idea ...
- MySQL Disk--SSD和HDD的性能
========================================================= 机械硬盘的性能 7200转/分的STAT硬盘平均物理寻道时间是9ms 10000转/ ...
- Python中字典get方法的使用
Python中字典get方法的使用 说起来,这个功能是否需要学习还真是有待于讨论.其实,知道了字典这种数据结构以后,通过最基本的Python功能也能够实现一个类似的功能.不过,既然内置了这个功能那么我 ...
- 怎样优化app,看Facebook怎样做
周四,Facebook Engineering blog 发表了一篇名为<Improving Facebook on Android>博文.博文从四个方面(Performance,Data ...
- MQ介绍 & 实例
阅读目录 定义 优秀MQ特点 产品比较 实例(简单的实战) 关于消息队列与分布式的那些事 定义: 消息队列(MQ)是一种应用程序对应用程序的通信方法,应用程序通过队列进行通信,而不是通过直接调用彼此来 ...
- 如何在linux服务器上使用hanlp
关于如何在linux服务器上使用hanlp也有分享过一篇,但分享的内容与湘笑的这篇还是不同的.此处分享一下湘笑的这篇hanlp在linux服务器上使用的文章,供新手朋友学习之用. 本文主要工作是在li ...
- VS2015和SVN合作
SVN就是版本控制管理工具. 插件这里,还是遇到了一些问题,我知道有插件了,但是忽略了开始的版本问题,按时插件安装过程中没有出现意外,故以为“插件安装成功”,岂不知此“成功”非彼“成功”.由于我用的是 ...
- 免费SMTP邮件服务:Mandrill,Sendgrid,Mailjet,Postmarkapp,MailChimp
免费的SMTP发邮件服务平常几乎都没有怎么关注,Wordpress发邮件几乎用普通的邮箱的SMTP服务就可以完成任务,但是自从用了Discourse.Ghost博客后,发现找到一个合适的.免费配额大的 ...
- SDRAM的初始化与刷新操作---看时序图写代码
SDRAM的初始化与刷新操作---看时序图写代码 1.SDRAM的常见操作 2.初始化就是配置SDRAM 3.SDRAM初始化时序 时序解释如下: 4.刷新操作