Angular2学习笔记之数据绑定的示例代码


Posted in Javascript onJanuary 03, 2018

简介

使用插值表达式将一个表达式的值显示在模版上

<img src="{{imgUrl}}" alt="">
<h1>{{productTitle}}</h1>

使用方括号将HTML标签的一个属性值绑定到一个表达式上

<img [src]="imgUrl" alt="">

使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上

<button (click)="onClickButton($event)">按钮绑定事件</button>

注意

在开始下面的例子之前,请先确认已经新建了一个工程。如果没有,请查看:Angular2学习笔记之Angular CLI 安装和使用教程

事件绑定

Angular2学习笔记之数据绑定的示例代码

准备工作

了解目的:在模版的界面上面增加一个按钮,然后通过小括号绑定一个事件。

新建一个 bind 组件,使用命令:  ng g c bind

修改 bind.component.html

<!-- 界面增加代码 -->
<button (click)="onClickButton($event)">按钮绑定事件</button>

修改 bind.component.ts

//在 BindComponent 类方法中增加方法体
onClickButton(event: any){
 console.log(event);
}

修改 app.component.html

<!-- 增加 app-bind 组件 -->
<app-bind></app-bind>

图示:

Angular2学习笔记之数据绑定的示例代码

Dom属性绑定

例子一

插值表达式 与 属性绑定 之间的关系

两种方式都可以实现,angular 在实现的逻辑上面是: 在程序加载组件的时候,会先将 "插值表达式" 翻译为 "属性绑定"

修改 bind.component.html

<!-- 界面增加代码 -->

<!-- 属性绑定 -->
<img [src]="imgUrl" alt="">

<!-- 插值表达式绑定 -->
<img src="{{imgUrl}}" alt="">

修改 bind.component.ts

//增加变量
imgUrl: string = http://placehold.it/320x280;

图示:

Angular2学习笔记之数据绑定的示例代码

例子二

dom 属性 与 html 属性的区别

HTML元素的 DOM属性和 HTML 属性是有部分区别的,这点需要明确差异。

修改 bind.component.html

<!-- 增加代码 -->
<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

修改 bind.component.ts

//增加 event事件
onInputEvent(event: any){
 //获取的是 dom 属性,即输入属性
 console.log(event.target.value);

 //获取的是 html 属性,也就是初始化的属性
 console.log(event.target.getAttribute("value"));

}

图示:

Angular2学习笔记之数据绑定的示例代码

总结:

1.少量的 HTML属性和 DOM属性之间有这 1 :1 的映射关系,如 :id
2.有些有 HTML属性,没有DOM 属性, 如:colspan
3.有些有 DOM属性,没有HTML 属性,如:textContent
4.就算名字一样,DOM属性和HTML属性获取的内容可能不一样
5.模版绑定是通过DOM属性绑定的,而不是通过HTML属性
6.HTML属性指定了初始值,DOM属性表示当前值;DOM属性的值可以改变,HTML的值不能改变

例子部分完整代码

bind.component.html

<p>
 bind works!
</p>

<button (click)="onClickButton($event)">按钮绑定事件</button>

<div>
 <!-- 属性绑定 -->
 <img [src]="imgUrl" alt="">

 <!-- 插值表达式绑定 -->
 <img src="{{imgUrl}}" alt="">
</div>

<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

bind.component.ts

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

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

 imgUrl: string = "http://placehold.it/320x280";

 constructor() { }

 ngOnInit() {
 }

 onClickButton(event: any){
  console.log(event);
 }

 onInputEvent(event: any){
  //获取的是 dom 属性,即输入属性
  console.log(event.target.value);

  //获取的是 html 属性,也就是初始化的属性
  console.log(event.target.getAttribute("value"));
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue实现通讯录功能
Jul 14 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
You might like
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
phpStorm2020 注册码
2020/09/17 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
再谈JavaScript线程
2015/07/10 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
如何完美的建立一个python项目
2020/10/09 Python
一个入门级python爬虫教程详解
2021/01/27 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
不假外出检讨书
2014/01/27 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
美食节策划方案
2014/05/26 职场文书
同事去世追悼词
2015/06/23 职场文书