基本语法:

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)
}
}

angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据的更多相关文章

  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的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  4. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  5. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  6. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  7. Vue基础之用插值表达式在视图区显示数据

    Vue基础之用插值表达式在视图区显示数据 第一步:当然就是你要引入Vue.js这个脚本文件啦! <script src="https://cdn.jsdelivr.net/npm/vu ...

  8. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  9. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

随机推荐

  1. windows 环境下通过运行快速启动程序

    在windows环境下,我们可以使用一些系统内置的快捷键来快速启动我们想要的应用程序,我这里举例几个我经常使用的,比如: 快捷键 功能说明 services.msc  查看系统服务 gpedit.ms ...

  2. Python中xlwt解析

    1.导入模块 import xlwt 2.构造excel表 workbook = xlwt.Workbook()                      #返回一个工作簿对象 3.构造sheet w ...

  3. Goldbach's Conjecture POJ - 2262 线性欧拉筛水题 哥德巴赫猜想

    题意 哥德巴赫猜想:任一大于2的数都可以分为两个质数之和 给一个n 分成两个质数之和 线行筛打表即可 可以拿一个数组当桶标记一下a[i]  i这个数是不是素数  在线性筛后面加个装桶循环即可 #inc ...

  4. 对strom的理解

    1.什么是strom: storm是一个分布式实时计算系统,用户只需要提供自己的插件(例如一个jar包,其中编写用户自己的逻辑代码),然后将它部署到storm服务器上,storm的master服务器就 ...

  5. 【BZOJ5302】[HAOI2018]奇怪的背包(动态规划,容斥原理)

    [BZOJ5302][HAOI2018]奇怪的背包(动态规划,容斥原理) 题面 BZOJ 洛谷 题解 为啥泥萌做法和我都不一样啊 一个重量为\(V_i\)的物品,可以放出所有\(gcd(V_i,P)\ ...

  6. 使用matplotlib.pylab绘制分段函数

    1.安装matplotlib pip3 install matplotlib sudo apt install python3-tk 2.分段函数 from pylab import * x = li ...

  7. 微信支付退款(PHP后端)

    应用场景 当交易发生之后一段时间内,由于买家或者卖家的原因需要退款时,卖家可以通过退款接口将支付款退还给买家,微信支付将在收到退款请求并且验证成功之后,按照退款规则将支付款按原路退到买家帐号上. 微信 ...

  8. eureka集群基于DNS配置方式

    https://www.cnblogs.com/relinson/p/eureka_ha_use_dns.html   最近在研究spring cloud eureka集群配置的时候碰到问题:多台eu ...

  9. Django(十五)Form组件

    参考博客: https://www.cnblogs.com/haiyan123/p/7778888.html http://www.cnblogs.com/wupeiqi/articles/61441 ...

  10. mybatis 的批量更新操作sql

    转: mybatis 的批量更新操作sql 2018年07月23日 10:38:19 海力布 阅读数:1689   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...