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节点的更多相关文章

  1. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  2. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  3. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  4. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  5. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  6. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

  7. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  8. vue 双向数据绑定的实现学习(一)

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  9. Vue双向数据绑定原理分析(转)

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

随机推荐

  1. 特殊场景Sql优化

    一.大表的大数据量修改 问题: 1.大量的行级锁,长时间阻塞   2.主从延时,大批数据不一致 解决方法: 分批次修改 二.大表的表结构修改 问题:长时间锁表 解决方法: 1.从库修改,主从切换,主库 ...

  2. centos7 操作防火墙

    原文:https://blog.csdn.net/u012498149/article/details/78772058 1.firewalld的基本使用 启动: systemctl start fi ...

  3. git安装及基本用法

    安装: 1先安装客户端,选择默认路径,直接下一步就可以了 2安装图形化客户端,选择默认路径安装完成 基本用法: 1同步coding上的文件 在桌面上点击鼠标右键,并选择Git Clone... 打开下 ...

  4. 获取当前时间并格式化,CTime类

    CTime类,此类应该不是C++标准类库,属于windows封装的关于时间的类库,使用环境应该为 Win32程序,MFC程序,VC++程序 CTime tm = CTime::GetCurrentTi ...

  5. Vxlan基础理解

    一 . 为什么需要Vxlan   1. vlan的数量限制    4096个vlan远不能满足大规模云计算数据中心的需求   2. 物理网络基础设施的限制    基于IP子网的区域划分限制了需要二层网 ...

  6. vue Axios 封装与配置项

    import axios from "axios"; import qs from "qs"; import { Message } from "el ...

  7. C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送

    前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:ht ...

  8. Mac + PyCharm 安装 Opencv3 + python2.7

    本文地址:http://www.cnblogs.com/QingHuan/p/7354074.html 转载请注明本文地址,方便读者查看本文更新,谢谢! 今天要在Mac上安装OpenCV,过程非常曲折 ...

  9. Gym - 101201E:Enclosure (点到凸包的切线)

    题意:给点N棵树,前K棵是已经拥有的,现在可以再拥有一棵树,问形成的最大凸包面积. 思路:先求K棵树的凸包C,然后对于后面的N-K棵树,我们先判断是否在凸包内,如果不在,我们要求两个切线. 这里分类讨 ...

  10. Linux 文件类型笔记

    在UNIX中一切都是文件https://ph7spot.com/musings/in-unix-everything-is-a-file在UNIX中,一切都是字节流 ==== linux系统的文件类型 ...