基本语法:

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. 前端 -- HTML内容

    HTML介绍 Wed服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...

  2. 洛谷P1983车站分级题解

    题目 这个题非常毒瘤,只要还是体现在其思维难度上,因为要停留的车站的等级一定要大于不停留的车站的等级,因此我们可以从不停留的车站向停留的车站进行连边,然后从入度为0的点即不停留的点全都入队,然后拓扑排 ...

  3. ueditor 编辑器常用方法

    官方文档http://fex.baidu.com/ueditor/ 简单实现工具栏调用: //实现方法 ue.getDialog("工具名称"); //工具名称可以参考如下: to ...

  4. 「AtCoder Grand018A」Getting Difference(GCD)

    题目链接A - Getting Difference 题意 有n(1~\(10^5\))个数\(A_i\) (1~\(10^9\)),每次选两个数,将它们的差的绝对值加入这堆数.问k(1~\(10^9 ...

  5. 【题解】 bzoj1135: [POI2009]Lyz (线段树+霍尔定理)

    题面戳我 Solution 二分图是显然的,用二分图匹配显然在这个范围会炸的很惨,我们考虑用霍尔定理. 我们任意选取穿\(l,r\)的号码鞋子的人,那么这些人可以穿的鞋子的范围是\(l,r+d\),这 ...

  6. BZOJ 3514: Codechef MARCH14 GERALD07加强版(LCT + 主席树)

    题意 \(N\) 个点 \(M\) 条边的无向图,询问保留图中编号在 \([l,r]\) 的边的时候图中的联通块个数. \(K\) 次询问强制在线. \(1\le N,M,K \le 200,000\ ...

  7. urllib的实现---cookie处理

    Cookie的使用 用 Python 来登录网站, 用Cookies记录登录信息, 然后就可以抓取登录之后才能看到的信息. 什么是cookies? Cookie,指某些网站为了辨别用户身份.进行ses ...

  8. 对于rqy今天讲座的一些理解和看法吧

    其实我本来以为今天晚上要学高数的,但是听到任大佬要来讲课,我自然是很开心. 其实真正接触到他和照片给我的感觉完全不一样,rqy是一个非常单一的,没有在意其他过多的事情的人,包括从他的讲座来看,大佬把自 ...

  9. twitter api

    1,twurl安装 1.1,安装软件管理包工具,在管理员身份打开的cmd中执行: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powersh ...

  10. 洛谷P2261 余数求和

    整除分块的小应用. 考虑到 k % x = k - (k / x) * x 所以把 x = 1...n 加起来就是 k * n - (k / i) * i i = 1...k(注意这里是k) 对于这个 ...