Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架
M model
V view
MVVM model改变会影响视图view,view改变会影响model
双向数据绑定必须在表单里面使用
//我发现在谷歌浏览器翻译后的网页中vue的双向数据绑定不好用,暂时还没有解决方法
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
在视图层中input框改变时会引起model中msg的变化,从而影响h2中所绑定的msg
定义方法、执行方法
v-on:click="方法"绑定事件或者简写成@click,方法在methods:{里面放方法} 中定义 //methods与data平级用,隔开
也可以通过点击事件去改变model影响view
ref dom节点
<input type="text" ref="userinof" />
<buttom v-on:click="getInputValue()">获取dom节点中的数据</buttom>
getInputValue(){
alert(this.$refs.userinof.value);//获取dom节点
}
获取dom节点通过原生操作dom节点
methods
Vue 双向数据绑定、事件介绍以及ref获取dom节点的更多相关文章
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
- 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 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
随机推荐
- coursera-斯坦福-机器学习-吴恩达-笔记week1
1 Introduction 1.1 概念:一个程序被认为能从经验E中学习,解决任务 T,达到性能度量值P,当且仅当, 有了经验E后,经过P评判, 程序在处理 T 时的性能有所提升. 1.2 机器学习 ...
- CCF关于NOIP复赛网络申诉问题的公告
CCF NOI竞赛委员会将NOIP复赛网络申诉的有关情况公告如下.凡属于以下情况的申诉,均不予受理 1.非公示期限内提出的申诉,不予受理: 2.与个人名次.他人成绩和他人名次有关的申诉,不予受理: 3 ...
- python全栈开发笔记---------数据类型-----字典dict
字典 #dict #1.基本结构 info= { "k1" : "v1", #键值对 "k2" : "v2" } ### ...
- inode 与black 特点与简介
inodo为索引节点, 存放文件属性的信息(实际文件位置与容量信息 /black文件属性) 作用在格式化文件系统时候产生 创建一个文件就占用一个inode 数字相同为硬链接 black为实际数据/内容 ...
- Java容器解析系列(0) 开篇
最近刚好学习完成数据结构与算法相关内容: Data-Structures-and-Algorithm-Analysis 想结合Java中的容器类加深一下理解,因为之前对Java的容器类理解不是很深刻, ...
- Jsの练习-数组常用方法 -slice()
slice() 返回从原数组指定开始下标到结束下标之间的项组成的新数组. slice()方法可以接收一个或两个参数,即要返回项的起始和结束位置. 在只有一个参数的情况下,slice()方法返回从该参数 ...
- Python 自动发送邮件
简单邮件传输协议(SMTP)是一种协议,用于在邮件服务器之间发送电子邮件和路由电子邮件.Python提供smtplib模块,该模块定义了一个SMTP客户端会话对象,可用于使用SMTP或ESMTP侦听器 ...
- 一分钟学会ConstraintLayout(转载)
原文地址:https://www.v2ex.com/t/287863 最近更新了Android Studio,突然发现xml中的布局已经变成了ConstraintLayout,于是搜了一篇文章看一下 ...
- asp.net mvc + dapper(ORM框架) + easyui框架简洁的信息管理项目
1.目录结构: 2.效果图: 3.IndexController控制器: using System; using System.Collections; using System.Collection ...
- 7--Python入门--条件和循环
5.1 条件语句 条件语句基本框架如下:if 判断语句1: 执行语句块1elif 判断语句2: 执行语句块2else: 执行语句块3 a = 10 if a%2 == 0 : #这里使用了取余函数% ...