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. vuex-Mutation(同步)

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一 ...

  2. SQL-42 删除emp_no重复的记录,只保留最小的id对应的记录

    题目描述 删除emp_no重复的记录,只保留最小的id对应的记录.CREATE TABLE IF NOT EXISTS titles_test (id int(11) not null primary ...

  3. git 的安装和使用及hithub同步

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址 https://github.com/ ...

  4. talk with gao about qssp

  5. 剑指Offer 16. 合并两个排序的链表 (链表)

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 题目地址 https://www.nowcoder.com/practice/d8b6b4358 ...

  6. 关于IT行业加班的问题

    众所周知,所有行业中,IT行业加班最为严重,国内比较大的IT公司都有加班文化. 为什么要加班?有的时候加班是为了项目上线,因为正在运行的项目,在晚上的时候访问量是最小的,这个时候做系统更新是损失最小的 ...

  7. mysql oracle 数据库备份

    mysql 备份与还原 转载:https://blog.csdn.net/win_turn/article/details/60880990 备份数据库 数据库名叫dddd  mysqldump -u ...

  8. 关于LaTeX公式排版

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/10/05 1.居中括号框住多行公式 \begin{equation*} \left\{\begin{alig ...

  9. Python全栈之路----函数进阶----生成器

    生成器特点: 不能立即产生,取一次创建一次 只能往前走 等到走到最后,就会报错 >>> a = [i for i in range(1000)] >>> a [0, ...

  10. matlab数学实验--第二章

    控制流: 分支语句: if (条件式),语句:end if (条件式1),语句1:elseif (条件式2),语句2:……:else,语句:end iwitch(分支变量) case(值1),语句1: ...