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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP中的self关键字详解
2019/06/23 PHP
基于jquery的滑动样例代码
2010/11/20 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python实现词法分析器
2019/01/31 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
年终工作总结范文2014
2014/11/27 职场文书