文档章节

angular2 学习二 (event) - 监听事件

王福林
 王福林
发布于 2016/12/01 11:38
字数 234
阅读 146
收藏 0

(event) - 监听事件

在模板中为元素添加事件监听很简单,使用一对小括号包裹事件名称,并绑定 到表达式即可:

event-bind

上面的代码实例为DOM对象h1click事件添加监听函数onClick()

另一种等效的书写方法是在事件名称前加on-前缀:

 
  1. @View({template : `<h1 on-click="onClick()">HELLO</h1>`})

修改示例代码,点击EzApp组件的h1标题时,自动变换名称!

HTMl

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>template - bind propery</title>
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
	<ez-app></ez-app>
    
    <script type="module">
    	import {Component,View,bootstrap} from "angular2/angular2";

        @Component({selector:"ez-app"})
        @View({
			template:`	
            	<h1>Your turn! <b>{{sb}}</b></h1>
            	<button (click)="roulette()">ROULETTE</button>
           	`
		})
        class EzApp{
        	constructor(){
            	this.names = ["Jason","Mary","Linda","Lincoln","Albert","Jimmy"];
                this.roulette();
            }
            //轮盘赌
            roulette(){
            	var idx = parseInt(Math.random()*this.names.length);
                this.sb = this.names[idx];
            }
        }
                
        bootstrap(EzApp);

    </script>
</body>
</html>

 

CSS

button{width:100%;padding:10px;}b{color:red}

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
探索angular源码--启动(1)

前言 angular2.0已经出来了,本来应该是研究最新的angular源码,但毕竟用了angular1这么久了,一直对其源码实现十分好奇,再加上研究源码主要目的是学习,版本不是特别重要,因此就1.3版源码...

烽穹寒渊
2015/08/01
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海
2015/02/06
0
0
Angularjs的$apply及其优化使用

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply(),然后就惊喜...

北辰狼月
07/01
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 提速:每天为你省下一杯喝咖啡的时间

摘要: ### 前言 作为一名 Android 开发同学,当你的工程和代码达到一定规模的时候,相信你一定遇到过编译速度过慢的问题。比如: ![](https://user-gold-cdn.xitu.io/2018/11/6/166e7021c0...

阿里云官方博客
6分钟前
0
0
在 PHPStorm 中如何对远程服务使用 xdebug 进行断点调试

1. 安装 xdebug 1.1. 下载、安装 ➜ ~ wget https://xdebug.org/files/xdebug-2.4.1.tgz➜ ~ tar zxf xdebug-2.4.1.tgz➜ ~ cd xdebug-2.4.1➜ ~ phpize➜ ~ ./configure --with-ph......

whoru
8分钟前
0
0
看完这篇文章还不懂Python装饰器?

1、必备 2.需求来了 初创公司有N个业务部门,1个基础平台部门,基础平台负责提供底层的功能,如:数据库操作、redis调用、监控API等功能。业务部门使用基础功能时,只需调用基础平台提供的功...

糖宝lsh
14分钟前
1
0
Bytom合约预编译

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在开发合约的过程中你们有没有遇到一些问题呢?比如编译合约的过程中不能...

比原链Bytom
15分钟前
1
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部