React与Vue模板使用比较(一、vue模板与React JSX比较)

栏目: 编程语言 · 发布时间: 5年前

内容简介:本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山工具就让你出发了;Vue就像母亲,在你登山之前为你准备好了所有东西,唠唠叨叨了一波,规划了路线,给了你厚厚的导航指南,才让你出发。有一定的React开发经验,正在并行使用Vue的开发者JSX表达式用{}包裹,vue模板表达式用{{}}包裹,其余一致.

本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山 工具 就让你出发了;Vue就像母亲,在你登山之前为你准备好了所有东西,唠唠叨叨了一波,规划了路线,给了你厚厚的导航指南,才让你出发。

本文目的

  • 方便React开发者更快的上手Vue
  • 进行更加详尽的React以及Vue的开发体验比较

目标人群

有一定的React开发经验,正在并行使用Vue的开发者

问题

  1. Vue的模板跟React中使用的jsx有什么区别?
  2. 如何在React中实现Vue模板上带有的功能?

vue模板与JSX比较

1. 表达式(expressions)

JSX表达式用{}包裹,vue模板表达式用{{}}包裹,其余一致.

vue模板表达式:

React与Vue模板使用比较(一、vue模板与React JSX比较)

代码比较:

<!--vue-->
<template>
    <div>
      <p>I have a {{ product }}</p>
      <p>{{ product + 's' }}</p>
      <p>{{ isWorking ? 'YES' : 'NO' }}</p>
      <p>{{ product.getSalePrice() }}</p>
    </div>
</template>

<!--react-->
<div>
    <p>I have a { product }</p>
    <p>{ product + 's' }</p>
    <p>{ isWorking ? 'YES' : 'NO' }</p>
    <p>{ product.getSalePrice() }</p>
</div>
复制代码

2.指令(directives)

Vue模板:小伙子,用你的头发记好了,有如下指令:

Vue模板指令:

React与Vue模板使用比较(一、vue模板与React JSX比较)

JSX:啥啥啥,你自己实现不就好了吗。。。

  • v-if, v-else-if, v-else JSX直接用万能的三元表达式
  • v-show JSX在dom上添加如下代码,实现一样的功能
style={{ display: ifShow ? 'block' : 'none' }}
复制代码
  • v-model JSX在对应的dom上绑定事件,事件里面自己爱怎么处理怎么处理

代码比较:

<!--vue指令-->
  <template>
    <div>
      <p v-if="container1">你现在看到container1了</p>
      <p v-else-if="container2">你现在看到container2了</p>
      <p v-else>你现在看到default了</p>
      <p v-show="ifShow">影响显示的p</p>
      <input type="text" v-model="inputText"/>
    </div>
  </template>
  
  <!--react指令-->
  <div>
    {
      container1 ?
        <p>你现在看到container1了</p> :
        container2 ?
          <p>你现在看到container2了</p> :
        <p>你现在看到default了</p>
    }
    <p style={{display: ifShow ? 'block' : 'none'}}></p>
    <input type="text" onChange={val => () => {this.setState{inputText:val}}} 
           value={this.state.inputText}/>
  </div>
复制代码

3. 列表渲染(list rendering)

Vue模板列表渲染:v-for JSX: 直接在dom中插入map函数,里面直接用js来处理参数

<!--vue-->
  <template>
    <ul>
      <li v-for="(item, i) in list" :key="item.id">{{item.text}}</li>
    </ul>
  </template>
  
  <!--react-->
  <div>
    <ul>
      {
        list.map((item, i) => <li key={item.id}>{item.text}</li>)
      }
    </ul>
  </div>
复制代码

4. 事件处理(actions/events)

Vue模板:记住了,有以下事件处理

React与Vue模板使用比较(一、vue模板与React JSX比较)

JSX:跟js事件名称一致,直接放置在对应的节点进行事件绑定就好

<!--vue-->
  <template>
    <button v-on:click="handleBtn">我是一个点击按钮</button>
  </template>
  
  <!--react-->
  <div>
    <button onClick={this.handleBtn}>我是一个点击按钮</button>
  </div>
复制代码

总结

Vue模板与JSX的基本使用比较完了,Vue模板为你考虑了很多优化的东西,你只需要记住其中的规则就好,更大的降低了技术门槛。而JSX将更大的控制权留给了代码编写者。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R语言编程艺术

R语言编程艺术

(美)Norman Matloff / 陈堰平、邱怡轩、潘岚锋 等 / 机械工业出版社 / 2013-5 / 69.00

【编辑推荐】 这本书涵盖了R语言编程的诸多方面,尤其在面向对象编程、程序调试、提升程序运行速度以及并行计算等方面,填补了同类图书的空白。关于程序调试的章节更是作者多年经验的总结。不管是初学者还是有一定编程经验的读者,阅读这本书都会有所收获。 ——统计之都 【内容简介】 R语言是世界上最流行的用于数据处理和统计分析的脚本语言。考古学家用它来跟踪古代文明的传播,医药公司用它来探......一起来看看 《R语言编程艺术》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试