基本语法:

动态属性:

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. Windows服务一直“正在启动”怎么杀

    转载:https://blog.csdn.net/huanglong8/article/details/71156848 PS:cmd 记得使用 管理员身份运行 这里需要通过控制台 命令行来查询PID ...

  2. Android学习第7天

    这次大都是广播案例,在笔记中不予展示注: a.做开机启动时,在广播类中用到Intent需要这三行代码 Intent intent1 = new Intent(context, MainActivity ...

  3. vim 高级编辑技巧

    建议参考IBM官方文档https://www.ibm.com/developerworks/cn/linux/l-cn-tip-vim/ 重新输入以前输入过的某条命令Ctrl + r 全局替换格式:& ...

  4. 【比赛】NOIP2018 保卫王国

    DDP模板题 #include<bits/stdc++.h> #define ui unsigned int #define ll long long #define db double ...

  5. LOJ #2537. 「PKUWC 2018」Minimax (线段树合并 优化dp)

    题意 小 \(C\) 有一棵 \(n\) 个结点的有根树,根是 \(1\) 号结点,且每个结点最多有两个子结点. 定义结点 \(x\) 的权值为: 1.若 \(x\) 没有子结点,那么它的权值会在输入 ...

  6. 「洛谷2495」「BZOJ3052」「SDOI2001」消耗战【虚树+树形动态规划】

    题目大意 给你\(k\)个点,让这一些点和一号节点断开,删去某一些边,求最小的删去边权之和. 做题的心路历程 做了\(HG\)昨天的模拟赛,深深感觉到了窝的菜,所以为了\(A\)掉T1这一道毒瘤,窝就 ...

  7. 8、16、32-BIT系列单片机区别与特点

    一.8位单片机 8031/8051/8751是Intel公司早期的产品 1.8031的特点 8031片内不带程序存储器ROM,使用时用户需外接程序存储器和一片逻辑电路373,外接的程序存储器多为EPR ...

  8. 两数之和 II - 输入有序数组

    题目描述 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返 ...

  9. Nginx实现负载均衡的几种方式

    负载均衡的几种常用方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. upstream backserver { server 192.168 ...

  10. 微信小程序框架——wepy使后感

    更新:2018年1月10日15:32:22 在ios8及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix. 解决方案见链接:wepy-less-autoprefix 另外 ...