数据绑定

Angular有四种数据绑定形式:

    <div>
        <div>{{hero.name}}</div>                                 //第一种

        <hero-detail [hero]="selectedHero"></hero-detail>        //第二种

        <input type="text"  [(ngModel)]="username" />             //第三种

        <input type="password" [(ngModel)]="password" />        //第三种

        <button (click)="onClick()">Login</button>               //第四种
    </div>

第一种:显示组件的hero.name属性的值。 第二种:属性绑定把负组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。 第三种:它使用ngModel指令组合了属性绑定和事件绑定的功能。 ** [(ngModel)]="username" 这个看起来很别扭,稍微解释一下,方括号 [ ] 的作用是说把等号后面当成表达式来解析而不是当成字符串,如果我们去掉方括号那就等于说是直接给这个ngModel赋值成“username”这个字符串了。 方括号的含义是单向绑定**,就是说我们在组件中给model赋的值会设置到HTML的input控件中。 这里粗略的了解一下,日后深入。 第四种:事件绑定在用户点击它的时候调用组件的onClick方法。


<h6 align = "right">sivona</h6>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网开发者交流社区

JS总结

1574
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

943
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

2856
来自专栏不止是前端

Vue:Vue中操作DOM方法

5899
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

3076
来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

8654
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4059
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

22710
来自专栏柠檬先生

jquery事件绑定

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventOb...

2107
来自专栏Ryan Miao

java变量的加载顺序

学习编程思想 1 package com.test.java.classs; 2 3 /** 4 * Created by Administrato...

2529

扫码关注云+社区

领取腾讯云代金券