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. gdb pretty printer for STL debug in Linux

    Check your gcc version. If it is less than 4.7, you need use another printer.py file. Get the file f ...

  2. html盒子铺满全屏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Visual Basic 2017 操作Excel和word【1】持续更新……

    我坚持在VB的路上走到黑…………  清单1.1  从应用程序对象导航到Excel中的工作表  Dim myWorkbooks As Excel.Workbooks = app.Workbooks ) ...

  4. 网络知识梳理--OSI七层网络与TCP/IP五层网络架构及二层/三层网络(转)

     reference:https://www.cnblogs.com/kevingrace/p/5909719.html https://www.cnblogs.com/awkflf11/p/9190 ...

  5. Java容器解析系列(4) ArrayList Vector Stack 详解

    ArrayList 这里关于ArrayList本来都读了一遍源码,并且写了一些了,突然在原来的笔记里面发现了收藏的有相关博客,大致看了一下,这些就是我要写的(╹▽╹),而且估计我还写不到博主的水平,这 ...

  6. Jmeter处理返回结果的值

    接口测试中,获取返回结果的值可以用插件JSON Path Extractor 此插件可以直接处理json,通过key来取值. 该插件下载地址为:http://jmeter-plugins.org/wi ...

  7. Java语法基础学习DayEighteen(常用类)

    一.String类 1.特点 String代表不可变的字符序列,底层用char[]存放. String是final的. 2.内存解析 3.常用方法 int length() char charAt(i ...

  8. sqlx使用说明

    sqlx使用指南 参考链接: http://jmoiron.github.io/sqlx/ sqlx是一个go语言包,在内置database/sql包之上增加了很多扩展,简化数据库操作代码的书写 资源 ...

  9. java面向对象编程(五)--四大特征之抽象、封装

    1.抽象 我们在前面去定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模版).这种研究问题的方法称为抽象. 2.封装 封装就是把抽象出来的数据和对数据的操作封装在一起 ...

  10. Python 基于时间的进程通信

    import time from multiprocessing import Process,Event def f1(e): time.sleep(2) n = 100 print("子 ...