文档章节

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

王福林
 王福林
发布于 2016/12/01 11:38
字数 234
阅读 163
收藏 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的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
《AngularJS学习整理》系列分享专栏

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

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

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

武文海
2015/02/06
0
0
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2

没有更多内容

加载失败,请刷新页面

加载更多

Amino——框架层

框架层 目录 框架层... 1 Amino. 2 (一)、首页(TAB1)... 2 (二)、聊天(TAB2)... 3 (三)、我的社区(TAB3)... 5 (四)、探索(TAB4)... 6 (五)、钱包... 7 兴趣部落... 8 (一...

铸剑为犁413
20分钟前
0
0
k8s-dashboard

Kubernetes Dashboard 是一个管理Kubernetes集群的全功能Web界面,旨在以UI的方式完全替代命令行工具(kubectl 等) kubectl apply -f http://mirror.faasx.com/kubernetes/dashboard/master...

ZH-JSON
26分钟前
1
0
python如何安装库命令

python3 -m pip install 库名称

怪咖先生forever
27分钟前
1
0
如何将Collection应用到实际开发当中

//举个例子 //Student类 public class Student { public String name; public String age; public Student(String name, String age) {this.name = name;this.age = age; } public S......

南桥北木
31分钟前
2
0
聊聊flink的ProcessFunction

序 本文主要研究一下flink的ProcessFunction 实例 import org.apache.flink.api.common.state.ValueState;import org.apache.flink.api.common.state.ValueStateDescriptor;import org.apa......

go4it
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部