内容简介:本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山工具就让你出发了;Vue就像母亲,在你登山之前为你准备好了所有东西,唠唠叨叨了一波,规划了路线,给了你厚厚的导航指南,才让你出发。有一定的React开发经验,正在并行使用Vue的开发者JSX表达式用{}包裹,vue模板表达式用{{}}包裹,其余一致.
本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山 工具 就让你出发了;Vue就像母亲,在你登山之前为你准备好了所有东西,唠唠叨叨了一波,规划了路线,给了你厚厚的导航指南,才让你出发。
本文目的
- 方便React开发者更快的上手Vue
- 进行更加详尽的React以及Vue的开发体验比较
目标人群
有一定的React开发经验,正在并行使用Vue的开发者
问题
- Vue的模板跟React中使用的jsx有什么区别?
- 如何在React中实现Vue模板上带有的功能?
vue模板与JSX比较
1. 表达式(expressions)
JSX表达式用{}包裹,vue模板表达式用{{}}包裹,其余一致.
vue模板表达式:
代码比较:
<!--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模板指令:
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模板:记住了,有以下事件处理
JSX:跟js事件名称一致,直接放置在对应的节点进行事件绑定就好
<!--vue--> <template> <button v-on:click="handleBtn">我是一个点击按钮</button> </template> <!--react--> <div> <button onClick={this.handleBtn}>我是一个点击按钮</button> </div> 复制代码
总结
Vue模板与JSX的基本使用比较完了,Vue模板为你考虑了很多优化的东西,你只需要记住其中的规则就好,更大的降低了技术门槛。而JSX将更大的控制权留给了代码编写者。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 从全方位为你比较3种数据科学工具的比较:Python、R和SAS(附链接)
- F#序列比较
- (翻译)前端构建工具的比较
- 0615 - 没有比较,就没有伤害
- 精读《如何比较 Object 对象》
- JavaScript 各异步方式比较
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。