如果你只会用Vue或者React，那么这篇文章适合你。本文不深入探讨原理，只是比较基本功能的使用。首先看下面的数据，百度搜索指数。很明显，Vue的搜索指数明显高于React和Angular。向简单的学习是可以的。你认为技术路径是什么？其实你是这样想的。除了Vue，你还有什么？写这篇文章的目的是让大家了解框架的使用方法和技巧。下面截取了react和vue的官方文档目录。常用的基本功能包括至少9个数据绑定模板条件列表。至于细节，如何在不手动操作DOM的情况下实现以上七个功能呢？三大框架都采用了MVVM的思想，其优势在于摆脱了手动操作DOM和获取节点数据带来的低效。往下看，MVVMMVVM旨在利用数据绑定功能，通过ViewModal自动更新DOM的状态，然后从view层去掉几乎所有的GUI代码。既然大家都是被VM的思想启发了，基本功能也大致差不多，下面就来一一比较Vue和React的基本功能Databindingvue双向绑定，react单向绑定，代码对比//vue//这个对象被添加到一个Vue实例中varvm=newVue({data:{a:1},created:function(){this.a=2;},});//reactvardata={a:1};classHelloWorldextendsReact.Component{constructor(props){super(props);this.state={a:1};}componentDidMount(){//必须由方法this.setState({a:2,})触发；}render(){return(
Hello,world!
{{name}}{{name+'abc'}}{{`${name}abc`}}{{isShow?'abc':'efg'}}{{()=>{return'abc'})}}
//反应{name}{name+'abc'}{`${name}abc`}{isShow?'abc':'efg'}{()=>{return'abc'})}
指令vue指令v-if,v-else-if,v-else,v-show,v-modalreact没有说明的代码比较//vue{isA?大魔王来了()=>{this.setState({inputText:val})}value={this.state.inputText}/>
我是A
:是B吗？我是B
:我是C
}- {list.map((item,i)=>