vue学习(七) v-model 双向数据绑定

//html
<div id="app">
    <input type="text"v-model="msg" style="width:100%">
</div>

//script
<script>
  var vm = new Vue({
    el:‘app‘,
    data:{
      msg:‘点击一下‘
    }
  })
</script>

说明:

v-bind只能实现数据的单向绑定 从model 自动绑定到 view中,无法实现数据的双向绑定

v-model指令可以实现 表单元素和model中数据的双向绑定 v-model只能运用在表单元素中,即除了能够实现数据从model渲染到到view,也能实现从view中道model中去

效果:

页面渲染完成之后,会有一个点击一下 和一个input,input的内容是点击一下   修改input中的值,页面上的点击一下 会随着input内容的变化而变化

原文地址:https://www.cnblogs.com/xuchao0506/p/10805269.html

时间: 2024-08-30 16:43:24

vue学习(七) v-model 双向数据绑定的相关文章

Vue学习(三):数据绑定语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定语法</title> </head> <body> <!--1.插值--> <!--文本插值--> <h3 id="example1">{{ message }}<

Vuex(实现加减操作,Vue.set解决自定义属性没有双向数据绑定)

一.前言 二.主要内容 1.效果 2.分析: 1)点击按钮进行加减操作,肯定要注册一个点击事件,可以给这个点击事件传入一个标识,让他区别什么时候加,什么时候减 2)现在是将加减这一部分单独提取出来的一个公共主键,所以还需要区分每一个主键 3)父组件中在遍历的时候,(food, index) in goods  可以用food来区分每一项 4)从父组件哪里传进来一个food属性(:food="food"), 5)子组件接收到这个food属性, 6)我们用vuex来管理我们的数据状态,所以

Vue双向数据绑定简易实现

一.vue中的双向数据绑定主要使用到了Object.defineProperty(新版的使用Proxy实现的)对Model层的数据进行getter和setter进行劫持,修改Model层数据的时候,在setter中可以知道对那个属性进行修改了,然后修改View的数据. 二.简易版双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

深入vue源码,了解vue的双向数据绑定原理

大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 1 <div> 2 <input type="text" name="" id="text"> 3 <span id="show"></span> 4 </div> 5 6 <script>

vue 双向数据绑定的实现学习(二)- 监听器的实现

废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现. 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥? 上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compil

Vue学习之vue属性绑定和双向数据绑定

··· <!DOCTYPE html> vue <!-- vue中的属性绑定和双向数据绑定 属性绑定: v-bind:title="title" 或 :title="title" 双向数据绑定: v-model --> <div id="root"> <div :title="title">hi man</div> <input v-model="co

vue的双向数据绑定

这篇文章我会仿照vue写一个双向绑定的实例,主要实v-model  ,  v-bind  ,  v-click 1.原理 Vue的双向数据绑定的原理大家可能或多或少了解一点,主要是通过 Object 对象的 defineProperty 属性,重写data的 set 和 get 函数来实现的. 2.页面结构 包含了 一个input,使用v-model指令 一个button,使用v-click指令 一个h3,使用v-bind指令. 我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们

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

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性

Vue高级特性 一.自定义v-model实现Vue的双向数据绑定 父组件中 <p>{{name}}</p> <custormModel v-model="name" /> data() { return { // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定 name: '颜色' } }, components: { custormModel } 组件custormModel <input type=&