基本语法:

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. ionic更改端口号

    —— 重新指定端口号为8888 serve [options] ............................... 启动本地服务器进行开发测试 dev/testing [--console ...

  2. 【hdu6186】CS Course(前缀后缀异或)

    2017ACM/ICPC广西邀请赛 重现赛1005CS Course 题意 给一个数列a,每次询问去掉第p个的与和.或和,异或和. 题解 预处理前缀和.后缀和即可. 但是当时想都没想就写了个线段树.线 ...

  3. 自学华为IoT物联网_06 智慧家庭物联网常见问题及解决方案

    点击返回自学华为IoT物流网 自学华为IoT物联网_06 智慧家庭物联网常见问题及解决方案 1. 家庭中遇到的问题 2.1 华为智慧家庭概念的发展历程 2.2 华为智慧家庭的解决方案架构 智慧家庭主要 ...

  4. ⌈洛谷5058⌋⌈ZJOI2004⌋嗅探器【Tarjan】

    题目连接 [洛谷传送门] [LOJ传送门] 题目描述 某军搞信息对抗实战演习,红军成功地侵入了蓝军的内部网络,蓝军共有两个信息中心,红军计划在某台中间服务器上安装一个嗅探器,从而能够侦听到两个信息中心 ...

  5. 诶西,JavaScript学习记录。。。。。。

    由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧...... 开始咯,就按照C语言学习那样的方法来吧! ===================== ...

  6. 20165223《JAVA程序设计》第一周学习总结

    20165223 <JAVA程序设计>第一周学习总结 教材学习内容总结 通过网站JAVA第一章视频教程.教材.老师所给的教程及网上查询进行学习 第一章要点 JAVA地位和特点 地位:网络. ...

  7. 牛客寒假算法基础集训营3处女座和小姐姐(三) (数位dp)

    链接:https://ac.nowcoder.com/acm/contest/329/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  8. Ocean的礼物(线段树单点修改)

    题目链接:http://oj.ismdeep.com/contest/Problem?id=1284&pid=0 A: Ocean的礼物 Time Limit: 5 s      Memory ...

  9. Anaconda For Linux (附C#交互式编程的引入)

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai Jupyter美化: https://www.cnblogs.com/dotnetcra ...

  10. Python中何时使用断言 assert

    使用断言的最佳时机偶尔会被提起,通常是因为有人误用,因此我觉得有必要写一篇文章来阐述一下什么时候应该用断言,为什么应该用,什么时候不该用. 对那些没有意识到用断言的最佳时机的人来说,Python的断言 ...