web前端工程化之数据绑定

       这篇博客我放了好久都没有来补充了&＃xff0c;是因为那时候做前端&＃xff0c;有很多东西很迷糊&＃xff0c;这些名词都是新的&＃xff0c;经过这么长时间 的沉淀&＃xff0c;这些名词就不再是不熟悉的&＃xff0c;而是每个页面都在使用的。

      先来了解一下前端基本结构包括&＃xff1a;page.html、page.scss、page.ts

我们的页面就是写在html中&＃xff0c;页面样式写在scss中&＃xff0c;函数方法写在ts中。这个和js很像&＃xff0c;其实ts就是封装的js

数据绑定--插值法

在angular中&＃xff0c;使用 {{}} 插值语法实现数据绑定。

绑定普通文本

page.ts

import { Component } from &＃39;&＃64;angular/core&＃39;; export class AppComponent {name &＃61; &＃39;Angular&＃39;;
}

page.html

绑定对象属性

 page.ts

import { Component } from &＃39;&＃64;angular/core&＃39;; export class AppComponent {name &＃61; &＃39;xlb&＃39;;address &＃61; {province: &＃39;北京&＃39;,city: &＃39;廊坊&＃39; }
}

page.html

大家好&＃xff0c;我是{{name}}

我来自{{address.province}}省,{{address.city}}市

属性绑定

使用[属性]&＃61;“值”进行属性绑定(属性如果不加[],那么就直接是传统的赋值&＃xff0c;加上[]就是angular中属性绑定)

page.html

2.属性绑定:

3.属性绑定:

page.ts

src:string &＃61; "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";

 或者

import { Component } from &＃39;&＃64;angular/core&＃39;;&＃64;Component({moduleId: module.id,selector: &＃39;a-comp&＃39;,template: &＃96;&＃96;
})
export class AComponent {AText &＃61; &＃39;some&＃39;;
}

事件绑定

 事件绑定基础语法&＃xff1a;

(click)&＃61;"onSelect(hero)"

双向绑定

这个是事件和属性绑定结合&＃xff0c;在标签上使用&＃xff1a;[(ngModel)]&＃61;&＃39;teacher.content&＃39;

循环和判断

循环

*ngFor&＃61;"let itemTicket of ticketItems"

判断

*ngIf&＃61;"borrowStatus&＃61;&＃61;&＃39;1&＃39;"

总结

前端初接触是angular&＃xff0c;现在接触的是ionic&＃xff0c;会用angular&＃xff0c;再使用ionic会比较容易&＃xff0c;因为两者有前后&＃xff0c;ionic的基础是源于angular&＃xff0c;除了路由这个地方简化了很多&＃xff0c;写法会特别相似。