angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据

基本语法:

1、插值表达式:

vue:{{}}

react:{}

angular:{{}}

2、渲染数据

vue

js:
export default{
  data(){
    return{
    msg:"我是数据"
        }
    }  
}

html:
<p>{{msg}}</p>

react

js:
this.state={
  msg:"我是数据"  
}

html:
<p>{this.state.msg}</p>

angular

ts:
export class AppComponent{
    msg='我是数据';
}

html:
<p>{{msg}}<p>

3、响应式数据

vue

js:
export default{
  data(){
    return{
    msg:"我是数据"
        }
    }  
}

html:
<p>{{msg}}<p>
//更改:
handlechange(){
this.msg="响应一下";
}

react

js:
this.state={
  msg:"我是数据"  
}

html:
<p>{this.state.msg}</p>

//更改

this.setState({
    msg:"响应一下"
})

angular

ts:
export class AppComponent{
    msg='我是数据';
}

html:
<p>{{msg}}<p>

//更改

export class AppComponent{
    construtor(){
        setTimeout(()=>{
           this.msg="响应一下"; 
        },2000)
    }
}