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 组件名