web前端工程化之数据绑定

最新推荐文章于 2024-07-30 05:21:53 发布

mayfla

最新推荐文章于 2024-07-30 05:21:53 发布

阅读量1.5k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/mayfla/article/details/78942567

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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

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

数据绑定--插值法

在angular中，使用 {{}} 插值语法实现数据绑定。

绑定普通文本

page.ts

import { Component } from '@angular/core'; 

export class AppComponent  {
  name = 'Angular'; 
}

page.html

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
    <div>Hello,{{name}}</div>
</body>

</html>

绑定对象属性

page.ts

import { Component } from '@angular/core'; 

export class AppComponent {
  name = 'xlb';
  address = {
    province: '北京',
    city: '廊坊' }
}

page.html

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
    <h2>大家好，我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
</body>

</html>

属性绑定

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

page.html

<p>2.属性绑定:</p>
<img src="{{src}}"/>
<p>3.属性绑定:</p>
<img [src]="src"/>

page.ts

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

或者

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'a-comp',
  template: `
      <b-comp [textContent]="AText"></b-comp>
      <span [textContent]="AText"></span>
  `
})
export class AComponent {
  AText = 'some';
}