angularcli 第二篇(数据绑定、属性申明、绑定属性)
1、数据绑定
- 插值绑定: <li>{{ hero.name }} </li> 或 <div class = "{{ demo }}" >...</div>
- 绑定HTML: <div [innerHTML] = "...." > </div>
- 属性绑定: <input [value] = "myData" /> 或 <div [ id ] = "id" [title] = "msg" >...</div>
- 事件绑定: <button (click) = "selectHero(hero)" > </button>
- 双向数据绑定: <input [(ngModule)] = "hero.name"/>
注:涉及input表单时要引入 FormsModule模块: import{ FormsModule } from '@angular/forms';
2、属性声明
数据要先声明,后绑定。
(1)title = '这里是标题';
(2)msg:any; // 注:any为任意类型
this.msg = ' 这是一条msg '; // 先定义类型,后赋初始值
(3)msg: string = ' 这是一条string类型的msg ';
(4)public msg = ' 张三 ';
注:public 公有类,可以在这个类里面使用,也可以在类外面使用
protected 保护类型,只能在当前类和它的子类使用
private 私有类,只能在当前类才能访问这个属性
(5)public msg : string = ' 这是一个string类型的公有类 ';
(6)定义样式选择器 id 的值:
public id = ' 123 ';
绑定属性:HTML通过 <div id = " {{ id }} " >.......</div> 来定义id的值
(7)绑定 title 的值,同时鼠标瞄上去会提示msg的值:
title = ' 这里是标题 ';
msg : string = ' 这里是小提示 ';
绑定属性:HTML里 <div [title] = "msg">......</div>
(8)定义数组,并赋值:
public list = [ ];
this.list = [ '111' , '222' , '333' ];
angularcli 第二篇(数据绑定、属性申明、绑定属性)的更多相关文章
- 第二篇 HTML 常用元素及属性值
常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div>< ...
- React(3) --react绑定属性
react绑定属性 /* react绑定属性注意: class要换成className for要换成 htmlFor style: <div style={{"color": ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
- vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法
vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...
- Java学习第二篇:类,对象,成员属性,成员方法,构造方法,类变量,类方法
一.类的定义 一个全面的类定义是比较复杂的, 定义如下:
- 第二十七篇:SOUI中控件属性查询方法
SOUI项目的SVN根目录下有一个doc目录,下面有一份控件属性表.包含了大部分控件的大部分属性,不过也不一定完全准确.最保险的办法还是查源代码. SOUI对象包含控件及ISkinObj等从SObje ...
- vue.js--基础 v-bind绑定属性使用
背景:因为10月要休产假了,8月的时间我工作很少,因为最开始做平台我一直做的是后端,前端很少接触,所以现在有时间,就学习前端基础,前端使用的vue.js+element,因为没有基础,所以下了一个视频 ...
随机推荐
- 本地jar包上传docker容器
先安装docker的注册服务器: [root@VM_0_7_centos ~]# docker run -d -p : --restart=always --name registry2 regist ...
- python初级(302) 3 easygui简单使用二
一.复习 1.easygui 信息提示对话框 2.easygui 是否对话框 二.easygui其它组件 1.选择对话框:choicebox(msg, title, choices) import e ...
- ios开发 需要注意的地方、注意事项
/* 一.LaunchScreenLaunchScreen产生原因:代替之前的启动图片好处:1.可以展示更多的东西2.可以只需要出一个尺寸的图片. 启动图片的优先级启动图片 < LaunchSc ...
- tp5 Class 'gmars\rbac\Rbac' not found
tp强调的是资源的自动加载,自动加载前提是要配置进去,不管是手工还是系统自动配置. 解决方案:查看autoload_psr4.php文件,如果没有的话,是composer的操作哪里有问题.
- [LeetCode] 264. Ugly Number II 丑陋数 II
Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...
- 安装 gearman
准备:php 对应gearman插件包 https://pecl.php.net/package/gearman 1. 先安装依赖库 [root@VM_27_0_centos /]# yum inst ...
- C/C++ 面试-面向对象的特性
面向对象的三大特性 此文只是简单介绍一下三大特性 详细介绍在: 封装:http://www.cnblogs.com/52why/p/7631381.html 继承:http://www.cnblo ...
- 【LeetCode】最长回文子串【动态规划或中心扩展】
给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: " ...
- linux命令及相关配置
hostname # 查看 hostname vim /etc/hostname # 修改hostname,重启后生效 vim /etc/resolv.conf 写入 nameserver 192.1 ...
- Python基础系列讲解-自动控制windows桌面
原链接:https://zhuanlan.zhihu.com/p/73001806 在使用PC时与PC交互的主要途径是看屏幕显示.听声音,点击鼠标和敲键盘等等.在自动化办公的趋势下,繁琐的工作可以让程 ...