首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

简单实现Vue的双向绑定

作者：小白 | 来源：互联网 | 2023-08-24 15:19
文章目录前言一、双向绑定是什么？二、实现双向绑定简易Demo1.编写Demo1.html2.编写Demo2.html前言学习完Vue.js的特性,双向绑定是在开发中

文章目录

  • 前言
  • 一、双向绑定是什么&＃xff1f;
  • 二、实现双向绑定简易Demo
    • 1.编写Demo1.html
    • 2.编写Demo2.html



前言

学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定的理解.


一、双向绑定是什么&＃xff1f;
要说起双向绑定, 必须先谈一下单向绑定。所谓的单向绑定就是&＃xff0c;
把Model绑定到View&＃xff0c;就是我们之前MVC实现的方式。当Model更新时&＃xff0c;View也会自动更新。
那么双向绑定的意思就是&＃xff0c;把Model绑定到View的同时&＃xff0c;也将View绑定到Model上&＃xff0c;程序员用代码更新Model时&＃xff0c;View就会自动更新&＃xff0c;反之&＃xff0c;浏览器的用户更新了View&＃xff0c;Model的数据也自动被更新了。

这样说起来&＃xff0c;可能还不是很理解&＃xff0c;看以下这个简易的Demo以及它的运行结果&＃xff0c;就可以初步了解什么是双向绑定了。

二、实现双向绑定简易Demo

1.编写Demo1.html

代码如下&＃xff1a;


<html lang&＃61;"en" xmlns:v-on&＃61;"http://www.w3.org/1999/xhtml">
<head><meta charset&＃61;"UTF-8"><title>Titletitle>
head>
<body>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue&＃64;2.5.21/dist/vue.min.js">script><div id&＃61;"lubenwei">输入的文本: <input type&＃61;"text" v-model&＃61;"message"> {{message}}div><script>var vm &＃61; new Vue({el:"#lubenwei",data: {message: "卢本伟牛比"}});
script>
body>
html>

看上面的代码。代码构成非常简单&＃xff0c;引入Vue.js之后&＃xff0c;只有两步。
一是id为“lubenwei”的

标签&＃xff0c; 一个是
对应的Script标签。
下图是代码运行后的结果
在这里插入图片描述

① 文本输入一些东西, 后面就跟着显示一些东西。这代表了&＃xff1a;
(浏览器的用户更新了View&＃xff0c;Model的数据也自动被更新了, 不信你看一下控制台&＃xff0c;输入vm.message, 发现Model的数据确实被更新了&＃xff09;
② 同时你在浏览器的控制台改动后面显示的东西, 输入框里面的东西也会变。这代表了&＃xff1a;
&＃xff08;当程序猿用代码更新了Model时&＃xff0c;View也会自动更新&＃xff09;
在这里插入图片描述
有点感觉了吗&＃xff0c;这就是最简单的双向绑定的事例。
下面再写一个稍微复杂一点的。

2.编写Demo2.html

代码如下&＃xff1a;


<html lang&＃61;"en" xmlns:v-on&＃61;"http://www.w3.org/1999/xhtml">
<head><meta charset&＃61;"UTF-8"><title>Titletitle>
head>
<body>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue&＃64;2.5.21/dist/vue.min.js">script>
<div id&＃61;"lubenwei2">下拉框:<select v-model&＃61;"selected"><option>Aoption><option>Boption><option>Coption>select><span>{{selected}}span>
div>
<script>var vm2 &＃61; new Vue({el:"#lubenwei2",data: {selected:&＃39;默认值&＃39;}});script>
body>
html>

这个代码和Demo1的实现场景差不多&＃xff0c; 只不过是从文本框变成了下拉框。

看到这里是不是有点蒙 vue是怎么知道应该绑定option里面的值呢 还有上文的type&＃61;“text”, vue是怎么判断的呢&＃xff1f;
其实是自动的:

你可以用v-model 指令在表单 、

推荐阅读
  • post

    php更新数据库字段的函数是,php更新数据库字段的函数是

    php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • select

    IOS Run loop详解

    IOS Run loop详解
    为什么80%的码农都做不了架构师？转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • post

    利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

    本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • select

    计算当前记录与下一条记录之间的天数差异

    计算当前记录与下一条记录之间的天数差异
    本文介绍如何使用SQL查询来计算当前记录与其下一条记录之间的天数差异，通过创建测试视图并使用分析函数LEAD和LAG来实现。 ... [详细]
  • controller

    Java代码分层详解及其应用场景

    本文详细介绍了Java代码分层的基本概念和常见分层模式，特别是MVC模式。同时探讨了不同项目需求下的分层策略，帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • hash

    ECharts 饼图动态数据加载与展示

    ECharts 官方提供了丰富的图表示例，但实际项目中往往需要从后端动态获取数据。本文将详细介绍如何从后端获取数据并将其转换为 ECharts 所需的 JSON 格式，以实现动态饼图的展示。 ... [详细]
  • ip

    Python 数据可视化实战指南

    Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • ip

    使用jqTransform插件美化表单

    使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件，专用于美化表单元素，操作简便，能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • python

    Pythonmysql数据库

    importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • grid

    Ext JS MVC系列一：环境搭建与框架概览

    Ext JS MVC系列一：环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架，并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • config

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧

    深入解析Struts、Spring与Hibernate三大框架的面试要点与技巧 ... [详细]
  • config

    在 .NET Core MVC 中，某页面使用 IIS Express 和 IIS 调试均正常，但发布后出现 500 错误

    在 .NET Core MVC 应用中，某页面在使用 IIS Express 和 IIS 进行调试时均能正常运行，但在发布后出现了 500 内部服务器错误。尽管在代码中添加了异常处理逻辑，但在 `return View(department)` 时并未捕获到任何异常，仅显示 500 错误，且没有任何其他详细的错误信息。这可能与发布环境的配置或依赖项有关，建议检查日志文件和配置设置以进一步诊断问题。 ... [详细]
  • ip

    Web开发框架概览：Java与JavaScript技术及框架综述

    Web开发框架概览：Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ... [详细]
  • post

    深入解析：Django框架中的MVT设计模式终于被讲得明明白白！

    本文深入解析了Django框架中的MVT（Model-View-Template）设计模式，详细阐述了其工作原理和应用流程。通过分析URL模式、视图、模型和模板等关键组件，读者将全面理解Django应用程序的架构体系，掌握如何高效地构建和管理Web应用。 ... [详细]
  • select

    Java分层设计模式：详解与应用

    在Java分层设计模式中，典型的三层架构（3-tier application）将业务应用细分为表现层（UI）、业务逻辑层（BLL）和数据访问层（DAL）。这种分层结构不仅有助于提高代码的可维护性和可扩展性，还能有效分离关注点，使各层职责更加明确。通过合理的设计和实现，三层架构能够显著提升系统的整体性能和稳定性。 ... [详细]
author-avatar
小白
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有