基本语法:

动态属性:

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. BZOJ4818 [SDOI2017] 序列计数 【矩阵快速幂】

    题目分析: 一个很显然的同类项合并.注意到p的大小最大为100,考虑把模p意义下相同的求出来最后所有的减去没有质数的做矩阵快速幂即可. 代码: #include<bits/stdc++.h> ...

  2. atcoder NIKKEI Programming Contest 2019 E - Weights on Vertices and Edges

    题目链接:Weights on Vertices and Edges 题目大意:有一个\(n\)个点\(m\)条边的无向图,点有点权,边有边权,问至少删去多少条边使得对于剩下的每一条边,它所在的联通块 ...

  3. 牛客小白月赛12 H(dfs序+线段树),F(分块思想+bit),J(二分)

    H 华华和月月种树 链接:https://ac.nowcoder.com/acm/contest/392/H 思路:先得到整棵树最终的形态,在这棵树上进行三种操作,用dfs跑下,第二种操作就直接对最终 ...

  4. 739. Daily Temperatures && 单调栈 && Python collections deque

    题目大意 给你接下来每一天的气温,求出对于每一天的气温,下一次出现比它高气温的日期距现在要等多少天 解题思路 利用单调栈,维护一个单调递减的栈 将每一天的下标i入栈,维护一个温度递减的下标 若下一个温 ...

  5. 超详解的LNMP搭建并优化

    环境为Centos7 nginx1.14 mysql5.7 php7一,安装Nginx (yum装,快速) yum install nginx二,优化nginx (方便后期工作,如果纯为测试的话,不用 ...

  6. NOIP2013华容道(BFS+乱搞)

    n<=30 * m<=30 的地图上,0表示墙壁,1表示可以放箱子的空地.q<=500次询问,每次问:当空地上唯一没有放箱子的空格子在(ex,ey)时,把位于(sx,sy)的箱子移动 ...

  7. centos7/RHEL7下快速搭建DNS域名解析服务器

    应用场境:此处搭建的DNS(Domain Name Server)更加偏向于企业内部需要一个域名服务器专门用来解析自己局域网内定义的域名: 比如:app1.company.com, app2.comp ...

  8. 牛客OI周赛7-提高组 B小睿睿的询问(ST打表)

    链接:https://ac.nowcoder.com/acm/contest/371/B来源:牛客网 小睿睿的n个妹纸排成一排,每个妹纸有一个颜值val[i].有m个询问,对于每一个询问,小睿睿想知道 ...

  9. Jupyter Notebook 编辑器美化

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai 2018-10-10新增Linux样式路径: Logo: ~/anaconda3/lib ...

  10. Django(一)自定义web框架

    https://www.cnblogs.com/yuanchenqi/articles/6083427.htm 一 什么是web框架 框架,即framework, 特指为解决一个开放性问题而设计的具有 ...