浅谈Vue的单向绑定和双向绑定

╰半夏微凉° 2022-06-16 08:26 214阅读 0赞

1、单向绑定

单向数据绑定的实现思路：

①　所有数据只有一份

②　一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)

③　若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。

<!DOCTYPE html>
    <html>
    <head></head>
    <body>
      	<div id="app">
        	{
       {message}}
      	</div>
      	<script>
        	var app = new Vue({
          		el: '#app',
          		data: {
            		message: ''
          		}
        	});
      	</script>
    </body>
    </html>

2、双向绑定

数据的双向绑定是vue实现的一大功能。

使用v-model指令，实现视图和数据的双向绑定。

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

v-model主要用在表单的input输入框，完成视图和数据的双向绑定。

v-model只能用在<input>、<select>、<textarea>这些表单元素上。

双向绑定的缺点：不知道data什么时候变了，也不知道是谁变了，变化后也不会通知，当然可以watch来监听data的变化，但这复杂，还不如单向绑定。

<!DOCTYPE html>
    <html>
    <head></head>
    <body>
      	<div id="app">
        	<input type="text" v-model="message">
        	<p>{
       {message}}</p>
      	</div>
      	<script>
        	var app = new Vue({
          		el: '#app',
          		data: {
            		message: ''
          		}
        	});
      	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 124 阅读

相关 GuLi商城-前端基础Vue指令-单向绑定&双向绑定

什么是指令? 指令 (Directives) 是带有 \`v-\` 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是，当表达式的值

女爷i/ 2024年03月22日 23:15/ 0 赞/ 81 阅读

相关 Vue--双向绑定

原文网址：[Vue--双向绑定\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [父子组件prop值的双向绑定][prop] 简

忘是亡心i/ 2022年12月21日 06:24/ 0 赞/ 241 阅读

相关 Vue双向绑定

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发

清疚/ 2022年11月27日 10:21/ 0 赞/ 215 阅读

相关 VUE双向绑定

1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义： > 对象有两种属性：（1）数据属性，

r囧r小猫/ 2022年11月07日 13:16/ 0 赞/ 12 阅读

相关浅谈Vue的单向绑定和双向绑定

1、单向绑定单向数据绑定的实现思路： ①　所有数据只有一份 ②　一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data) ③　若用户在页面上做

╰半夏微凉°/ 2022年06月16日 08:26/ 0 赞/ 215 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 345 阅读

相关 Vue之属性绑定和双向数据绑定

属性绑定：v-bind:title，简写为：:title 双向数据绑定:v-model绑定content的值，也可以改变content的值 <div id="ro

妖狐艹你老母/ 2022年04月22日 10:24/ 0 赞/ 305 阅读

相关浅谈VUE响应式双向绑定

区别于公司产品的老项目前端部分大量运用Jquery框架，使用现代主流前端框架开发产品均使用数据驱动视图的方式，隐藏了如JQ的DOM操作改变视图的方式，即现代前端框架采用声明式编

╰+哭是因爲堅強的太久メ/ 2022年03月16日 13:37/ 0 赞/ 223 阅读

相关 Vue的属性绑定和双向绑定

目录一点睛二代码三效果 -------------------- 一点睛 v-model：将标签的value值和Vue实例中的data属性值进行绑

冷不防/ 2021年07月24日 18:06/ 0 赞/ 569 阅读