angular2模版语法

https://angular.cn/docs/ts/latest/guide/template-syntax.html#!#html

模板中的HTML

HTML 是 Angular 模板的语言。几乎所有的HTML语法都是有效的模板语法。 但值得注意的例外是<script>
元素,它被禁用了,以阻止脚本注入攻击的风险。(实际上,<script>
只是被忽略了。) 参见安全页了解详情。
有些合法的 HTML 被用在模板中是没有意义的。<html>
、<body>
和<base>
元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。
可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM(文档对象模型)的值。
我们首先看看数据绑定的第一种形式 —— 插值表达式,它展示了模板的 HTML 可以有多丰富。

模板表达式

模板表达式产生一个值。 Angular 执行这个表达式,并把它赋值给绑定目标的属性,这个绑定目标可能是 HTML 元素、组件或指令。
{{1 + 1}}
中所包含的模板表达式是1 + 1
。 在属性绑定中会再次看到模板表达式,它出现在=
右侧的引号中,看起来像这样:[property]="expression"

编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式,但不是全部。
JavaScript 中那些具有或可能引发副作用的表达式是被禁止的,包括:
赋值 (=, +=, -=, ...)
new运算符使用;或,的链式表达式
自增或自减操作符 (++和--)
和 JavaScript语 法的其它显著不同包括:
不支持位运算|和&具有新的模板表达式运算符,比如|和?.

绑定语法:概览

数据绑定是一种机制,用来协调用户所见和应用数据。 虽然我们能往 HTML 推送值或者从 HTML 拉取值, 但如果把这些琐事交给数据绑定框架处理, 应用会更容易编写、阅读和维护。 只要简单地在绑定源和目标 HTML 元素之间声明绑定,框架就会完成这项工作。

Angular 提供了各种各样的数据绑定,本章将逐一讨论。 不过我们要先从高层视角来看看 Angular 数据绑定及其语法。

绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

image.png

HTML attribute 与 DOM property 的对比

要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute 和 DOM property 之间的区别。
attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
少量 HTML attribute 和 property 之间有着 1:1 的映射,如id。
有些 HTML attribute 没有对应的 property,如colspan。
有些 DOM property 没有对应的 attribute,如textContent。
大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样!
最后一类尤其让人困惑…… 除非我们能理解这个普遍原则:
That last category is confusing until you grasp this general rule:
attribute 初始化 DOM property,然后它们的任务就完成了。property 的值可以改变;attribute 的值不能改变。
例如,当浏览器渲染<input type="text" value="Bob">时,它将创建相应 DOM 节点, 其value property 被初始化为 “Bob”。
当用户在输入框中输入 “Sally” 时,DOM 元素的value property 变成了 “Sally”。 但是这个 HTML value attribute 保持不变。如果我们读取 input 元素的 attribute,就会发现确实没变: input.getAttribute('value') // 返回 "Bob"。
HTML attribute value指定了初始值;DOM value property 是当前值。
disabled attribute 是另一个古怪的例子。按钮的disabled property 是false,因为默认情况下按钮是可用的。 当我们添加disabled attribute 时,只要它出现了按钮的disabled property 就初始化为true,于是按钮就被禁用了。
添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要,这就是我们为什么没法通过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。
设置按钮的disabled property(如,通过 Angular 绑定)可以禁用或启用这个按钮。 这就是 property 的价值。
就算名字相同,HTML attribute 和 DOM property 也不是同一样东西。
这句话值得再强调一次:

模板绑定是通过 property 和事件来工作的,而不是 attribute。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 9,236评论 0 3
  • 一、起项目 根据官方教程,执行以下: 然后要把下面文件略微改一下(官方没有写),否则编译出的js和ts混在一起,很...
    Angeladaddy阅读 5,040评论 0 4
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,566评论 0 3
  • 二十几岁的年纪,如果不结婚,没有对象,总是会被人问起“为什么单身”。 相比回他们一句“关你什么事”,我更想问“为什...
    蜥蜴盎阅读 2,563评论 0 0
  • 周五收到华大的短信说低风险,1800买了个心安,周日明星兄考试,这周莫名又开始干呕,虽然不是很严重,但已经很久没干...
    携子之阅读 3,935评论 0 0