angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法:
动态属性:
vue:
v-bind:attr="msg" :attr="msg"
react:
attr={msg}
angular
[attr]="msg"
事件绑定:
vue:
v-on:click="handleChange($event)" @click="handleChange"
react
//第一种方法
constructor(){
this.handleChange=this.handleChange.bind(this); //改指向
} onClick={this.handleChange} //第二种方法 onClick={(ev)=>this.handleChange(ev)} //当使用箭头函数传参时,不需要改指向
angular
(click)="hangleChange($event)"
ref(获取dom元素)
vue
<div ref="divElem">aaaaaaaa</div> js:
console.log(this.$refs.divElem)
react
<div ref="divElem">aaaaaaaa</div> js:
console.log(this.refs.divElem)
angular
<div (click)="handleChange($event,divElem)" ref-divElem>aaaaaaaa</div> js:
handleChange(ev,elem){
console.log(elem)
}
angular组件创建:在命令提示符里输入ng g component 组件名

angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式的更多相关文章
- angular,vue,react的基本语法—样式处理
基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- angular,vue,react的父子通信
父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...
- 前端三大框架(Angular Vue React)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- angular vue react web前端三大主流框架的对比
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...
随机推荐
- ElasticHD Windows环境下安装
ElasticHD Linux环境下安装教程 ElasticHD windows环境下安装教程 习惯了T-SQL 查询,Elasticsearch的DSL查询语法简直就是反人类呀,一 ...
- Iroha and a Grid AtCoder - 1974(思维水题)
就是一个组合数水题 偷个图 去掉阴影部分 把整个图看成上下两个矩形 对于上面的矩形求出起点到每个绿点的方案 对于下面的矩形 求出每个绿点到终点的方案 上下两个绿点的方案相乘后相加 就是了 想想为什么 ...
- 【XSY2332】Randomized Binary Search Tree 概率DP FFT
题目描述 \(\forall 0\leq i<n\),求有多少棵\(n\)个点,权值和优先级完全随机的treap的树高为\(i\). \(n\leq 30000\) 题解 设\(f_{i,j}\ ...
- JXOI2017颜色
题面 loj 分析 这道题非常妙啊 对于可保留区间[l, r] 枚举右端点r 考虑l的取值范围有两重约数 记颜色i出现的最右侧位置是\(max_i\) 最左侧位置是\(min_i\) r前最后一次出现 ...
- 自学Python3.3-函数分类(内置函数补充)
自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...
- 【Linux命令】linux一次性解压多个.gz或者.tar.gz文件
原文:linux一次性解压多个.gz或者.tar.gz文件 解压多个压缩包 对于解压多个.gz文件的,用此命令: for gz in *.gz; do gunzip $gz; done 对于解压多个. ...
- 【BZOJ4890】[TJOI2017]城市(动态规划)
[BZOJ4890][TJOI2017]城市(动态规划) 题面 BZOJ 洛谷 题解 数据范围都这样了,显然可以暴力枚举断开哪条边. 然后求出两侧直径,暴力在直径上面找到一个点,使得其距离直径两端点的 ...
- spring-boot-starter-redis配置详解
spring-boot-starter-redis配置详解 spring-boot-starter-redis主要是通过配置RedisConnectionFactory中的相关参数去实现连接red ...
- Jupyter Notebook添加Ruby支持
安装步骤 gem install iruby iruby register --force 参考资料:http://devopspy.com/linux/ruby-kernel-jupyter-not ...
- 解题:NOI2018 你的名字(68pts暴力)
题面 rt,如果省选没退役就补 SAM的优势:简单明了 先建S的SAM并标记所有节点,之后每次询问直接把T按广义SAM的方法插上去,统计新加的节点到根的状态代表的本质不同子串数,减掉被标记的部分就是T ...