基本语法:

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. 大学jsp实验4include,forword

    一.实验目的与要求 1.掌握常用JSP动作标记的使用. 二.实验内容 1.include动作标记的使用 编写一个名为shiyan4_1.jsp的JSP页面,页面内容自定,但要求使用include动作标 ...

  2. Spring02-注入和注解方式操作

    一. 依赖注入 测试类:Person.java 创建配置文件:applicationContext-injection.xml 创建测试代码:InjectionTest.java 1. set方法注入 ...

  3. 【CF633D】Fibonacci-ish

    题目描述 小y最近迷上了fibonacci数列,他定义了一种数列叫类fibonacci数列: 1.这个数列包含至少\(2\)个元素 2.\(f_0\)和\(f_1\)是任意选取的 3.\(f_{n+2 ...

  4. BZOJ 4833: [Lydsy1704月赛]最小公倍佩尔数(数论 + 最值反演)

    题面 令 \({(1+\sqrt 2)}^n=e(n)+f(n)*\sqrt2\) ,其中 \(e(n),f(n)\) 都是整数,显然有 \({(1-\sqrt 2)}^n=e(n)-f(n)*\sq ...

  5. android 通过修改图片像素实现CircleImageView

    CircleImageView实现方法有很多种,各有优缺点,因此需要按照不同的场景使用.我们今天使用修改图片像素的方法实现CircleImageView,主要知识点无非是勾股定理和点到圆形的距离. 素 ...

  6. linux test条件测试

    语法 test EXPRESSION [ EXPRESSION ] [[ EXPRESSION ]] 1.数值测试 -eq 是否等于 -ne 是否不等 -gt 是否大于 -ge 是否大于等于 -lt ...

  7. 用Nifi 从web api 取数据到HDFS

    1. 全景图   2. 用ExecuteScript生成动态日期参数   为了只生成一个flowfile:       Groovy 代码: import org.apache.commons.io. ...

  8. pycharm 中的 全局搜索(ctrl+shift+f) 功能无法使用的原因

    全局搜索的时候Ctrl+Shift+F按键失灵,有的时候可以,有时又不行了,百思不得其解. 在網上搜索很多人說是搜狗输入法的快捷键冲突了,但是我的电脑用的是微软自带的输入法 后来打开微软的输入法设置发 ...

  9. DNA Consensus String

    题目(中英对照): DNA (Deoxyribonucleic Acid) is the molecule which contains the genetic instructions. It co ...

  10. 我眼中的 Docker(二)Image

    Docker 安装 如何安装 docker 详见官网: installation 或者 中文指南. 不过 linux 上我推荐用 curl 安装,因为 apt-get 中源要么没有 docker,要么 ...