基本语法:

动态属性:

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. 安卓Android基础—第一天

    1.1G-4G的介绍 1G 大哥大 2G 小灵通 采用gsm标准(美国军方标准民用化) 发短信 3G 沃 72M/s 4G lte 100M/s 5G 华为 10G/s 小公司卖茶品大公司卖版权(标准 ...

  2. jenkins运行脚本生成HTML报告时遇到的问题

    1.jenkins生成HTML报告 1)安装插件:HTML Publisher plugin 2)系统管理->插件管理->安装HTMLHTML Publisher plugin 2.job ...

  3. 在VS中安装nuget离线包nupkg文件

    1.下载 nupkg文件 2.打开VS,工具,选项,如下图,复制右侧圈圈地址,把下载文件复制丢进去 3.管理当前解决方案的nuget包 n 4.左侧选择你下载的包名,在右侧选择需要安装在哪一层项目,点 ...

  4. 洛谷AT2046 Namori(思维,基环树,树形DP)

    洛谷题目传送门 神仙思维题还是要写点东西才好. 树 每次操作把相邻且同色的点反色,直接这样思考会发现状态有很强的后效性,没办法考虑转移. 因为树是二分图,所以我们转化模型:在树的奇数层的所有点上都有一 ...

  5. 每天一个Linux命令(03):du命令

    du命令 今天找开发定位问题,看到他使用了这个命令,查看文件,之前知道df,所以今天的每天系列把这命令 du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空 ...

  6. 【原创】线段树query模板对比! 新手线段树的一个容易出错的问题!!因为我就糊涂了一整天.......

    我们解决问题的最好方法就是拿实例来举例子 我们来看tyvj1038或计蒜客 “管家的忠诚” 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管 ...

  7. Shiro中的Rememberme后出现浏览器500错误

    问题详述:在Shiro中添加Remember me功能后,只要勾选Remember me选项为true的时候,浏览器就会跳转到一个不可达页面,并且在Chrome中显示HTTP 500错误. 问题追踪: ...

  8. Wannafly挑战赛29-A御坂美琴 (dfs+map)

    链接:https://ac.nowcoder.com/acm/contest/271/A来源:牛客网 御坂美琴 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言 ...

  9. Linux网络那点事(CentOS、Ubuntu、Kali)

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在Ubuntu18.04中,传统的配置/etc/network/interfa ...

  10. Ubuntu18.04 下的Gif录制工具

    正文: 开源地址:https://github.com/phw/peek Linux包相关的知识如果不知道可以看以前讲的:https://www.cnblogs.com/dunitian/p/9095 ...