程序员经验分享-hwhale

Angular4--【数据绑定】

2023-10-30

数据绑定

事件绑定

这里写图片描述

属性绑定

很多人对于DOM属性还是HTML属性易混，那我们首先来区分一下HTML和DOM；

  • 少量的HTML和DOM属性之前存在着1:1的映射，比如id;
  • 有些HTML属性没有对应的DOM属性；
  • 有些DOM属性没有对应的HTML属性，比如textComtent;
  • 即使是名字相同，HTML属性和DOM属性也不是同一个东西；
  • HTML属性的值制定了初始值；DOM属性的值表示当前值。DOM属性的值可以改变；HTML属性的值不能改变；
  • 摸板绑定是通过DOM属性和事件来工作的，而不是HTML属性；

DOM绑定

接下来，介绍一下具体的属性绑定是如何实现的：

  1. 组件中的greeting改变的时候，然后触发DOM的inputElement.value值改变；
  2. 此时HTML中的值不会改变；
  3. 浏览器会保持DOM和HTML的同步，所以DOM更改，然后新的value会渲染到页面上；
  4. DOM的改变不会改变HTML属性
  5. 当用户在text输入东西的时候，浏览器不会同步UI和HTML属性，我们看到的值是来自DOM，而不是HTML；

这里写图片描述

HTML属性绑定

1.基于HTML属性绑定

这里写图片描述

2.CSS类绑定

这里写图片描述

3.样式绑定

这里写图片描述

具体HTML绑定的可以参考下面的图片：
这里写图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Anguluar

angular

Angular4--【数据绑定】 的相关文章

随机推荐

  • 洛谷 P1914 小书童——凯撒密码

    题目链接 https www luogu com cn problem P1914 include

  • 全局变量和局部变量在堆和栈的区别

    全局变量和局部变量在堆和栈的区别主要体现在它们的存储位置和生命周期上 存储位置 全局变量存储在静态存储区 也就是程序的全局数据区或者称为全局内存 这个区域在程序运行期间一直存在 并且在整个程序中都可以被访问到 局部变量存储在栈 stack

  • asp and javascript: sql server export data to csv and to xls

  • SnailApp---数据流的控制（一）

    SnailApp 数据流的控制 一 一 简介 搭建Flux框架及其辅助框架 二 技术应用 1 Flux 插件安装 npm install flux save homepage https github com facebook flux 作

  • android中服务的生命周期示例

    如何在android中建立一个服务 使用androidstudio新建一个继承自Service的MyService类 并在Android manifest xml文件中注册 在MyService类中需要实现onBind这个类 但是启动一个服

  • 如何更改vue项目窗口的标题title和图标icon

    Vue CLI创建的项目窗口的标题默认是打包后的项目名称 默认图标是Vue的图标favicon ico 解决方法 修改图标 直接将新图标导入public文件夹 然后将favicon ico替换为新图标的名字即可 此处可以不用ico文件 但是

  • 重排序架构行人重识别代码复现

    参考教程 https blog csdn net Layumi1993 article details 84849506 https zhuanlan zhihu com p 50387521 一 需要安装的软件包 1 Python 3 6

  • 看门狗电路 通俗理解

    视频讲解 李想STM32初级教程 哔哩哔哩 bilibili 看门狗通俗理解 转自 STC89C5X单片机 看门狗 原理详解 电子工程世界 很多人初次接触不太理解怎么用 书上也讲的含含糊糊 故意说的很复杂很玄妙 可能是现在写书人的通病 生怕

  • MindManager2022Mac版本支持导入XMind、FreeMind文件格式

    Mindjet MindManager 2022 Win macOS版 思维导图软件 由coco玛吉多整理 MindManager 是一个强大的思维导图软件 它可以让你定制 发现隐藏的潜力 与人合并信息 释放生产力 更快地完成好工作 它作为

  • Spring的控制反转与依赖注入

    学习过Spring的都知道Spring有三大核心的概念 分别是控制反转 IOC 依赖注入 DI 和面向切面编程 AOP 今天就来聊聊我对控制反转和依赖注入的了解 至于面向切面编程放到后面讲解 一 控制反转 Ioc 控制反转 Inversio

  • 分别用Eigen和C++(OpenCV)实现图像(矩阵)转置

    1 标量 scalar 一个标量就是一个单独的数 2 向量 vector 一个向量是一列数 这些数是有序排列的 通过次序中的索引 可以确定每个单独的数 3 矩阵 matrix 矩阵是一个二维数组 其中的每一个元素被两个索引而非一个所确定 4

  • statmodels库分解时间序列（趋势、周期性、季节性、残差）

    import pandas as pd import matplotlib pyplot as plt from statsmodels tsa seasonal import STL df pd read csv time series

  • em算法长文

    https blog csdn net u010834867 article details 90762296 em算法长文 mark

  • 如何在VSCode配置PHP开发环境（详细版）

    这篇博文是当初笔者上课需要配置XAMPP 整理出来配置方法 错漏之处没有认真核对 给造成麻烦的同学道个歉 以下有两场修正之处 第一处 XAMPP国内下载地址改成了XAMPP中文网最新版本下载链接 给之前误下p2p的同学再次道个歉 第二处 下

  • px、em、rem

    px em rem简介 px像素 Pixel 相对长度单位 相对于显示屏幕分辨率 em 相对长度单位 相对于父元素设置的font size 页面层级越深 em的换算就越复杂 rem 相对长度单位 相对于HTML根元素设置的font size

  • 重装系统（安装版）——磁盘分区——Windows启动过程——\\.\PhysicalDrive1的操作失败

    搜罗整理自csdn博客 百度百科 远景论坛 无忧论坛等 1 PhysicalDrive1的操作失败 这是由于U盘既作磁盘 添加磁盘时使用U盘作为磁盘即PhysicalDrive1 又作USB连接设备即真正的U盘 当虚拟机启动时 就会检测到这

  • [Python从零到壹] 四十七.图像增强及运算篇之腐蚀和膨胀详解

    欢迎大家来到 Python从零到壹 在这里我将分享约200篇Python系列文章 带大家一起去学习和玩耍 看看Python这个有趣的世界 所有文章都将结合案例 代码和作者的经验讲解 真心想把自己近十年的编程经验分享给大家 希望对您有所帮助

  • bootstraptable 删除指定多行_Python Pandas处理Excel多列到多行转换

    Excel能够实现的功能 目前Pandas都能够实现 倘若你已经能够熟练运用Pandas的 宽转长 wide to long 和透视表pivot table 函数 建议您直接跳过本文 需求说明 需求是将材料变更的多列记录数据转成多行 演示数

  • C++复习笔记--STL的基本概念和使用

    目录 1 STL基本概念 2 STL六大组件 2 1 容器的基本概念 2 2 算法的基本概念 2 3 迭代器的基本概念 3 代码实例 3 1 vector容器的使用 3 2 使用vector容器存储自定义类型 3 3 容器嵌套容器 1 ST

  • Angular4--【数据绑定】

    数据绑定 事件绑定 属性绑定 很多人对于DOM属性还是HTML属性易混 那我们首先来区分一下HTML和DOM 少量的HTML和DOM属性之前存在着1 1的映射 比如id 有些HTML属性没有对应的DOM属性 有些DOM属性没有对应的HTML

热门标签