首页 > Web开发 > 详细

AngularJs学习笔记-数据绑定、管道

时间:2019-02-12 12:51:19      阅读:321      评论:0      收藏:0      [点我收藏+]

数据绑定、管道

(1)数据绑定(Angular中默认是单向绑定)

[]方括号可以用于子组件传值

技术分享图片

还可以用于绑定元素的css类

技术分享图片

用于绑定路由导航的路径

技术分享图片

以下两种形式通用

技术分享图片

技术分享图片

 

 

 

(2)事件绑定

技术分享图片

等号右侧的表达式可以不是函数调用,可以是属性赋值

技术分享图片

被绑定的事件也可以是自定义事件

 

 

(3)HTML属性和DOM属性的区别

HTML属性是保持不变的,表示初始值,DOM属性表示当前的值,可以改变,HTML属性初始化DOM属性

技术分享图片

技术分享图片

对于disabled的HTML属性,无论是true还是false,只要设置了disabled属性,该元素就被禁用,

所以可以通过DOM属性启用

技术分享图片

总结

技术分享图片

技术分享图片

 

Angular中的插值表达式是DOM属性绑定

技术分享图片

1、插值表达式绑定的是DOM属性

2、插值表达式不会绑定HTML属性

3、插值表达式绑定DOM属性后,浏览器会将绑定的DOM属性渲染出来

4、DOM属性改变不会影响HTML属性改变

5、当用户在元素中输入值时不会改变HTML属性

 

 

(4)HTML属性绑定,一般优先使用DOM属性绑定,当元素没有DOM属性时,比如table中的colspan、rowspan,使用HTML属性绑定

技术分享图片

HTML属性绑定过程

技术分享图片

1、通过[attr.value]Angular会将属性绑定到HTML属性中

2、Angular不会改变DOM属性

3、HTML属性会改变DOM属性,但这是浏览器行为,而非Angular

4、浏览器会将DOM属性和浏览器的UI进行同步

 

 

(5)CSS属性绑定,其中第一种形式,somExpression将会替换掉"aaa bbb"

技术分享图片

 

 

 

(6)样式绑定

技术分享图片

可以跟上单位

技术分享图片

 

 

(7)双向绑定

事件绑定和属性绑定是单向绑定

事件绑定:从模板到控制器

属性绑定:从控制器到模板

技术分享图片

技术分享图片

双向绑定,使用[(ngModel)],

当ngModel用在不同的标签上,触发的事件也不同,由Angular决定,在input标签触发input事件

ngModel通常用于表单元素和属性同步

技术分享图片

 

 

 

(8)模板本地变量

技术分享图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

AngularJs学习笔记-数据绑定、管道

原文:https://www.cnblogs.com/arul/p/10364177.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!