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. 模板一般是由 ...
随机推荐
- Convert Binary Search Tree to Doubly Linked List
Convert a binary search tree to doubly linked list with in-order traversal. Example Given a binary s ...
- c语言:开平方根sqrt程序01
#include <stdio.h> int sqrt01(int x); void main(void){ int x=49,y; y=sqrt01(x); if(y<0) pri ...
- 分布式系统定时任务,保证只有一个服务执行了改任务--采用redis分布式锁来实现(文章摘自:https://www.cnblogs.com/0201zcr/p/5942748.html)
文章摘自:https://www.cnblogs.com/0201zcr/p/5942748.html package com.abtc.server.mine.common.utils; impor ...
- linux系统转换root权限
有时候我们用普通用户的权限没办法完成有关权限,这时候我们就需要拿到root权限才可以,拿到root权限有两种方式 方式一: su - 或者su 此时就会提示你输入密码,输入密码成功以后就能以root权 ...
- .NET并行计算和并发8-QueueUserWorkItem异步
QueueUserWorkItem方法将非常简单的任务排入队列 下面这个简单的代码,涉及到资源竞争问题,如果主线程先争取到资源,如果没有等待 一段时间,那么QueueUserWorkItem申请的 ...
- 第一篇,java学习之旅
在java的这座殿堂中,我才刚刚推开了大门,就像是在岔路口找到了一条,走向前进java大门的路. 下面是一些java算法的问题 第一题: package project.model; import j ...
- jQuery-1.样式篇---选择器
jQuery选择器之id选择器 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处 ...
- 2java判断素数
package com.test; import java.math.*;import java.util.Scanner; public class test222 { /** * @param a ...
- s21day11 python笔记
s21day11 python笔记 一.函数小高级 函数名可以当作变量来使用 #示例一: def func(): print(123) func_list = [func, func, func] # ...
- Java第一次作业——Java语言基础
<Java技术>第一次作业 学习总结 1.Scanner类实现基本数据输入方法 Scanner input=new Scanner(System.in); int num = input. ...