基本语法:

动态属性:

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组件创建方式的更多相关文章

  1. angular,vue,react的基本语法—样式处理

    基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...

  2. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  3. angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

  4. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  5. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  6. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  7. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  8. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  9. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

随机推荐

  1. 【XSY1762】染色问题 网络流

    题目描述 给定一张\(n\)个点\(m\)条边的无向图.每个顶点有一个颜色,要么是黑,要么是白.我们想进行一些操作,使得最终每一条边的两个端点都是不同的颜色.每一次操作,你可以将一条边的两个端点交换颜 ...

  2. 【cf789C】Functions again(最大子序列和)

    C.Functions again 题意 给你一个数组a[1..n].有一个函数\(f(l,r)=\sum_{i=l}^{r-1}\left| a[i]-a[i+1]\right| (-1)^{l-i ...

  3. Hdoj 2109.Fighting for HDU 题解

    Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何,都没关系,下面我继续向大家讲解海东集团的发展情况: 在最初的两年里,HDU发展非常迅速,综合 ...

  4. 【Luogu3731】[HAOI2017]新型城市化(网络流,Tarjan)

    [Luogu3731][HAOI2017]新型城市化(网络流,Tarjan) 题面 洛谷 给定一张反图,保证原图能分成不超过两个团,问有多少种加上一条边的方法,使得最大团的个数至少加上\(1\). 题 ...

  5. Paint the Wall ZOJ - 2747

    点数很多,坐标值很大,然后离散化一下用一个点表示一小块的面积对应的颜色,然后更新的时候一块一块更新,查询的时候一块一块查询 #include<map> #include<set> ...

  6. urls 管理

    问题阐述:如何管理多个app下的路由分发,使得管理更加清晰? 1. 在app下创建urls.py文件 from django.conf.urls import url from django.urls ...

  7. shell中定义变量用双引号和单引号以及不用引号的区别

    1. 单引号 使用单引号的情况下,不管里面的是否有变量或者其他的表达是都是原样子输出 2. 双引号 如果其定义变量的时候使用双引号的话,则里面的变量或者函数会通过解析,解析完成后再输出内容,而不是把双 ...

  8. 借网站日记分析~普及一下Pandas基础

      对网站日记分析其实比较常见,今天模拟演示一下一些应用场景,也顺便说说Pandas,图示部分也简单分析了下 1.数据清洗¶ 一般数据都不可能直接拿来用的,或多或少都得清理一下,我这边就模拟一下清洗完 ...

  9. HDU/HDOJ 1867 A + B for you again

    仔细了解KMP之后再看这题就会发现是裸题. 因为kmp我们可以求出s的f数组,表示能与p的多少前缀匹配.那么我们只需取f[s.size() - 1]即可. #include <cstdio> ...

  10. 同一台机器安装多个zabbix-agentd

    先来看一zabbix-agentd rpm包安装生成的文件   有的机器之前安装过老版本的,我这边就直接将这些配置文件打包到一个文件夹,然后上传到对应的机器上解压一下修改配置文件就ok啦 改一下启动脚 ...