基本语法:

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. Redis 5种数据结构

    转载:https://baijiahao.baidu.com/s?id=1593806211408070879&wfr=spider&for=pc Redis数据类型 Redis支持五 ...

  2. Git的搭建

    Git的搭建 第1步:官网下载安装git 第2步:github官网注册账号 第3步:配置git 第4步:github这是秘钥 第5步:上传本地工程到git 主要参考的博客(这三篇博客能让你顺利上传至g ...

  3. git 出现stderr: error: bad signature fatal: index file corrupt

    命令执行依次: $ rm -f .git/index $ git reset 重启即可

  4. Eslint检测出的问题如何自动修复

    1. sublime 插件 eslintAutoFix 目前只试了windows下 真是大坑!如果你用了这个插件但不能自动修复,那就不要再用这个了!全网无解! 提示系统找不到指定的文件,各种路径加入系 ...

  5. python学习日记(迭代器、生成器)-乱七八糟

    迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退 ...

  6. extern C小结

    名词解释 1.extern extern翻译为外部的,用在变量或函数之前,使其可见范围拓宽,这就是为啥叫extern吧.那它是用来干嘛的呢?当用在变量或函数之前,提示编译器到其他模块寻找其定义. 举个 ...

  7. Python3 与 C# 面向对象之~异常相关

      周末多码文,昨天晚上一篇,今天再来一篇: 在线编程:https://mybinder.org/v2/gh/lotapp/BaseCode/master 在线预览:http://github.les ...

  8. Manjaro下安装VirtualBox

    安装前需要知道 你需要知道你当前的内核版本 uname -r,比如输出了4.14.20-2-MANJARO那么你的内核版本为414 安装VirtualBox sudo pacman -S virtua ...

  9. 【SDOI2008】仪仗队

    //裸的欧拉函数//y=kx//求不同的k有多少#include<bits/stdc++.h> #define ll long long #define N 40010 using nam ...

  10. poj2259 Team Queue

    吼哇,又是水题. 我本来准备开1010个queue的,但是STL容器里好像只有vector滋磁开组,于是只好数组模拟... 然后模拟过了...... #include <cstdio> # ...