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