1. 数据渲染

vue是使用template模板进行渲染,react使用的是jsx语法,对组件进行渲染

  vue模板中使用{{ this.data }} 双括号包着变量,代表变量表示的值。外面那层表示需要通过js进行解析,里面那层表示一个对象,即变量是通过对象形式定义的。

   <h1>site : {{site}}</h1>

  接下来我们看看如何定义数据对象。

  data 用于定义属性,实例中有三个属性分别为:site、url、alexa。

  methods 用于定义的函数,可以通过 return 来返回函数值。

  {{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

  react渲染的值是通过单大括号{ this.data }表示的。本来就是js语法进行渲染的,所以直接包着一层表示变量(对象形式)进行渲染。

  <Menu.Item key="setting:1">你好 - {this.props.user.userName}</Menu.Item>

2.vue中

因为变量是在data中定义的或者是从父组件通过props传递过来的

2.方法绑定

vue中绑定的方法通过    模板中@click="methodName",在methods中进行定义。

<HeadBar @toggleMenu="toggleMenu"></HeadBar>
    methods: {
        toggleMenu() {
            this.setNavCollapsed(!this.navCollapsed)
    }

react中绑定的方法通过  组件中onClick={this.methodName}.若使用extends方法创建的组件,并且使用es6的箭头语法则不需要绑定this上下文,如果是普通方法定义,则需要bind绑定this的上下文

  如使用createClass创建组件的话也不需要绑定this

   <span onClick={this.logout}>退出登录</span>
  screenFull = () => {
  if (screenfull.enabled) {
  screenfull.request();
    }
        };
 
3.改变渲染的方法
vue 是根据data的里面的值,当data中定义的变量代表的值或者从父组件传递过来的值props改变的时候,组件会重新的被渲染
react是根据state中的值,当state中定义的变量代表的值或者从父组件中传递过来的值props,或者从管理数据的redux传递给组件state的值(相当于state的值)发生改变的时候,组件会重新被渲染
 
4.组件渲染方法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

react使用的是jsx语法

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。

5.值传递

vue父组件传递给子组件的值,在子组件props[]中定义获取,在模板中直接使用即可。

子组件想要改变父组件的值,需要通过父组件绑定方法

  • 父组件---使用 $on(eventName) 监听事件
  • 子组件---使用 $emit(eventName) 触发事件
  • 子组件template
    <span v-if="item.IsEnable && biddingType === 2" class="success" @click="confim(item)">确定中标</span>
    子组件方法
    methods: {
    confim(item) {
    this.$emit('confimBid', 'bid', item)
    }
    } 父组件template
    <biddingStaff @confimBid="showDialog" :biddingType="biddingDetailObj.BiddingType"></biddingStaff> 父子间方法
    showDialog(type, item) {
    this.optype = type
    if (item) {
    this.confirmInfo = item
    } else {
    this.confirmInfo = this.biddingDetailObj
    }
    this.showConfimDialog = true
    },

react父组件传递给子组件的是,在子组件中通过this.props.data使用

子组件传递给父组件的值也是在子组件通过绑定一个方法,在父组件中直接使用

6.生命周期

vue 在created(不能操作DOM   el还没有被挂在)     /     mounted 请求数据

react在 componentMounted 请求数据

6.管理数据

vue是通过vuex管理数据的。 https://www.cnblogs.com/first-time/p/6815036.html

各个类型的 API各司其职,mutation 只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管;Getter 我只管取,我不改的。 action放在了 methods 里面,说明我们应该把它当成函数来用(讲道理,钩子函数也应该可以的) mutation是写在store里面的,这说明,它就是个半成品,中间量,我们不应该在外面去操作它。getter写在了 computed 里面,这说明虽然 getter我们写的是函数,但是我们应该把它当成计算属性来用。

state

mutation

action

getter

react是通过redux管理数据的。https://www.cnblogs.com/xianyulaodi/p/5621959.html

state

action :actionType   actions

reducer

容器组件通过

const mapStateToProps = (state) => {
return {
...state.taskTplReducer
};
} const mapDispatchToProps = (dispatch) =>{
return { actions: bindActionCreators(actions, dispatch) };
} export default connect(mapStateToProps, mapDispatchToProps)(TaskTplView);

redux的执行过程: 定义actionType,action,reducer,组件

action中请求数据的方法,请求之后通过type值传递给reducer,在reducer中通过type拿到值,通过state传递到容器组件或者组件的state。容器组件通过mapStateToProps,将redux的state值传递给组件的props。通mapDispatchToProps映射到组件中,在组件中直接通过this.props.action.methodName()调用,this.props.data进行使用。

如果是想要修改redux中props的值,只能通过action定义方法对其进行修改。

vue和react的更多相关文章

  1. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  2. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  3. Vue和React对比

    Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...

  4. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  5. VUE PK REACT(1)

    一.浏览器兼容性 vue: ie9+ react: ie8+ 二.安装使用 vue:1.直接引入  <script src="https://cdn.jsdelivr.net/npm/ ...

  6. Vue-起步篇:Vue与React、 Angular的区别

    毋庸置疑,Vue.React. Angular这三个是现在比较火的前端框架.这几个框架都各有所长,选择学习哪种就得看个人喜好或者实际项目了.相比之下, Vue 是轻量级且容易学习掌握的. 1.Vue和 ...

  7. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  8. vue和react的介绍

    这几年前端框架发展的不错,出了不少框架,像微软自己的knockoutjs,angular,vue和最近比较火的react等,之前我有写过前两者的相关文章,今天主要说一下后两者. 介绍 是一个用于构建用 ...

  9. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

  10. Vue与React的异同

    众所周知,前端现在最火的两个框架是Vue和React了.通过一段时间的学习与项目上的实践,我想通过比较他们之间的异同点来发现以后在项目的技术选型中知道怎么抉择用哪个.有一点说明的是他们各自有自己的优势 ...

随机推荐

  1. 20145216史婧瑶《Java程序设计》第一次实验报告

    实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...

  2. 聊一聊HTML <!--…-->标签

    定义 注释标签用于在html源代码中插入注释.注释不会在浏览器上显示. 用法 根据定义的基本用法,代码如下 <!-- 这是一段注释,我不会显示在页面上 --> 浏览器的支持情况 所有浏览器 ...

  3. 搭建ODS的几套解决方案对比

    公司业务,想要搭建一个医院的ODS服务器:将医院不同厂家的不同数据库版本数据库类型整到一台服务器中,最初想要是同步数据库原生同步机制,最理想的是sqlserver发布订阅,但是后来发现发布订阅不能发布 ...

  4. Putting Apache Kafka To Use: A Practical Guide to Building a Stream Data Platform-part 2

    转自: http://confluent.io/blog/stream-data-platform-2          http://www.infoq.com/cn/news/2015/03/ap ...

  5. Java单链表反转 详细过程

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/guyuealian/article/details/51119499 Java单链表反转 Java实 ...

  6. STL map用法总结(multimap)

    2017-08-19 10:58:52 writer;pprp #include <map> #include <string> #include <iostream&g ...

  7. grafana二次开发

    grafana官方地址: https://github.com/grafana/grafana 开发文档:http://docs.grafana.org/project/building_from_s ...

  8. Dockerfile 设置语言包

    最近使用Hangfire的Dashboard, 在本地调试时,显示的是中文,但是通过docker在kubernetes上运行时,就显示成英文了, 怀疑是docker运行环境中没有设计默认的语言包: 我 ...

  9. ubuntu mac terminal install software

    http-server // ubuntu sudo npm install http-server -g npm node.js yarn

  10. gitlab 去除代码保护