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 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
随机推荐
- 【java编程】格式化字符串
String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重载形式. form ...
- LG3978 【[TJOI2015]概率论】
前置:卡特兰数 记\(C_n\)为\(n\)个节点的二叉树的个数,\(C_0=1\),对于\(n \geq 1\),取一个根节点,枚举其左子树大小,有 \[C_n=\sum_{i=0}^{n-1}C_ ...
- Centos7提示swap交换空间不足解决方法
一张图就能解决的问题,就不多bb了
- linux服务器的日志管理
消息紧急程度排行 emerg:该系统不可用 alert:需要立即修改 crit:紧急情况 err:错误信息 warning:预警信息 notice:具有重要性的普通条件 info:提供信息的消息 de ...
- 使用k8s && minio 进行 postgres 数据库自动备份
通过k8s 的定时任务job,我们可以方便的进行定时任务应用的开发,通过minio s3 兼容的cloud native 存储 我们可以方便的通过http 请求进行数据文件的备份,以下简单演示下如 ...
- Spring中时间格式注解@DateTimeFormat
在SpringMVC中Controller中方法参数为Date类型想要限定请求传入时间格式时,可以通过@DateTimeFormat来指定,但请求传入参数与指定格式不符时,会返回400错误. 如果在B ...
- JDK8中的时间API
在Java 1.0中,对日期和时间的支持只能依赖java.util.Date类.正如类名所表达的,这个类无法表示日期,只能以毫秒的精度表示时间.更糟糕的是它的易用性,由于某些原因未知的设计决策,这个类 ...
- preload 与 prefetch 的区别
Preload 浏览器会在遇到如下link标签时,立刻开始下载main.js(不阻塞parser),并放在内存中,但不会执行其中的JS语句. 只有当遇到script标签加载的也是main.js的时候, ...
- Fixed-point multiplication (C166 A*B/B)
I want to multiply two fixed point numbers. After the multiplication I have to shift the result so t ...
- str.replace()和re.sub()/calendar.month_abbr/re.subn()/upper和lower和capitalize/贪婪匹配和费贪婪匹配/re.S和re.DOTALL 笔记
str.replace()可以进行简单的替换 >>> a = 'one.txt, index.py, index.php, index.html, index.js' >> ...