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. 学习笔记-AngularJs(十)

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  2. Python—集合的操作、文件的操作

    1.集合的操作 2.文件的操作 1.集合的操作 定义: 1.不同元素组成,自动去重 2.无序 3.集合中的元素必须是不可变类型 1.集合的定义: >>> s1 = set('abcd ...

  3. php7安装 event扩展

    1 下载地址:http://pecl.php.net/package/event 2 安装支持库libevent,需要编译高版本(这里以最新版本release-2.1.8-stable为例) http ...

  4. java通过StringToKenizer获取字符串中的单词根据空格分离-详情版

    public class DaXie { public static void main(String[] args) { String strin = "Hello Java World! ...

  5. 扯淡设计模式2:java,模板模式,

    模板模式: package com.dayuanit.service; public abstract class UserService { public void login(String use ...

  6. Unable to load DLL 'api-ms-win-core-localization-l1-2-0.dll': 找不到指定的模块

    asp.net mvc 4.6 发布到WinServer2008R2 SP1 提示 错误 Unable to load DLL 'api-ms-win-core-localization-l1-2-0 ...

  7. JavaScript之Math

    1. Math Math是js的内置函数,无需创建,把Math作为对象使用就可以调用其属性和方法. 2.Date    2.1 日期对象创建 var now = new Date ( ); 含参数时表 ...

  8. 2019-04-17-day034-线程与数据共享

    内容回顾 锁 互斥锁 能够保护数据的安全性 保证对于数据的修改操作同一时刻多个进程只有一个进程执行 进程数据不安全 : 同时修改文件/数据库/其他共享资源的数据 ###队列 -- 实现了进程之间的通信 ...

  9. Java面试通关秘籍汇总集

    一.基础篇 1.1.Java基础 面向对象的特征:继承.封装和多态 final, finally, finalize 的区别 Exception.Error.运行时异常与一般异常有何异同 请写出5种常 ...

  10. alpha冲刺(3/10)

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 制定计划 问题困扰: 前后端的交互沟通有点缺失,以至后端进度很慢,需 ...