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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
vue实现树状表格效果
Dec 29 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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初学入门
2006/11/19 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python类继承用法实例分析
2014/10/10 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
教师开学感言
2014/02/14 职场文书
初中学校军训方案
2014/05/09 职场文书
文明班级建设方案
2014/05/15 职场文书
七夕情人节促销方案
2014/06/07 职场文书
博士生导师推荐信
2014/07/08 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
asyncio异步编程之Task对象详解
2022/03/13 Python