【Angular4学习】--DOM属性绑定生效过程(2)

标签: Angular dom属性
30人阅读 评论(0) 收藏 举报
分类:

前言

上篇文字我们分析了HTML属性和DOM属性的区别与联系,这篇文章小编将详细分享DOM属性生效的整个过程。

图示过程

这里写图片描述

解析过程


1. 当控制器中的值发生变化时,angular启动单向绑定机制来更新dom,即从控制器的greeting属性到dom的value属性,将dom属性的值改成greeting属性值,即“A value”
2. Angular的dom属性不会更新HTML属性,若HTML元素里面value的值初始值是空的,就会一直是空的。
3. 浏览器会保持dom和UI的同步,angular在更新了dom值后,新的值侯被渲染到页面上,这是我们的input框中会出现“A value”字符串
4. dom value属性的改变不会更新与其相关的input标签的HTML属性
5. 当用户在浏览器的input框输入东西时,也不会同步UI和HTML属性,我们看到的值来自于Dom而不是来自于HTML标签。

查看评论

angular4 结构型指令 属性型指令总结

属性型指令总结             看了几次官网的属性指令文档,对一些关键的东西还是很混淆,学到的都是基于表面的使用,这里是我把一些重要的东西给总结起来,方便自己看:            1...
  • t_xuanfeng123
  • t_xuanfeng123
  • 2017-12-16 19:02:28
  • 257

【Angular4】 HTML属性与DOM属性对比(1)

HTML属性和DOM属性的关系 少量HTML 属性和DOM 属性之间有着1:1的映射,如id. eg:有些HTML 属性没有对应的DOM 属性,如colspan. 有些DOM 属性没有对...
  • YYZZHC999
  • YYZZHC999
  • 2018-03-31 21:44:21
  • 34

Angular4_readonly,disabled,hidden属性动态启用禁用

html中的required  hidden  readonly disabled这些属性,动态启用禁用<div class="form-group" [hidden...
  • qq_36279445
  • qq_36279445
  • 2018-01-04 11:21:20
  • 625

angular4中样式的绑定

angular4中样式的绑定 假如一个样式,你想让他在点击的时候显示,再次点击的时候消失,你就可以用样式绑定 {{choose.duty}} 如上:你可以控制choose.show的true...
  • li00828
  • li00828
  • 2017-10-13 15:20:09
  • 795

在angular4的ts文件中进行类似于dom操作的方法

在angular4的ts文件中进行类似于dom操作的方法 在html页面 你好 在ts页面  var s = document.querySelector('.nihao'); ...
  • li00828
  • li00828
  • 2017-10-13 15:29:40
  • 2053

Angular4-在线竞拍应用-数据绑定

使用插值表达式将一个表达式的值显示在模板上{{productTitle}}使用方括号将HTML标签的一个属性绑定到一个表达式上使用小括号将组件控制器的一个方法绑定为模板上一个事件的处理器商品详情默认的...
  • zsx157326
  • zsx157326
  • 2017-10-31 18:56:52
  • 475

angular中的一些DOM操作

angular中的一些基本DOM操作
  • DADAmiss
  • DADAmiss
  • 2017-08-17 20:10:47
  • 994

Angular4的输入属性

输入属性通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传递...
  • HaiJing1995
  • HaiJing1995
  • 2017-05-11 16:40:22
  • 2512

Angular4学习笔记(二):绑定和分包

绑定:你有我有全都有。
  • catwindboy
  • catwindboy
  • 2017-04-17 12:06:21
  • 8304

angular 中的 DOM 操作

避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素。你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives...
  • yy374864125
  • yy374864125
  • 2014-09-15 10:07:41
  • 42272
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 9万+
    积分: 9641
    排名: 2327
    博客专栏
    最新评论