react vue 对比

模板书写对比

react jsx 写法

  render() {    return (      <div>        <h3>TODO</h3>        <TodoList items={this.state.items} />        <form onSubmit={this.handleSubmit}>          <input onChange={this.handleChange} value={this.state.text} />          <button>{'Add #' + (this.state.items.length + 1)}</button>        </form>

vue 写法

<div>  <h3>TODO</h3>  <TodoList :items="items"/>  <form @submit="handleSubmit">    <input v-model="text"/>    <button>add # {{items.length+1}}</button>  </form></div>

vue 模板绑定更加简洁，表现在以下几点：

• :属性名=”xxx”，不用 属性名={xxx}，完全的html合法语法
• @事件名=”handler”，不用onXxx={xxx}，完全的html合法语法
• xxx="xxx" 不用 xxx={this.props.xxx} 或 xxx={this.state.xxx}，vue 引用写法更短，不用添加 this，也不用 props. 和 state.
• 表单录入控件直接使用 v-model 搞定，vue 由于有了 directive，更加方便

direct 带来的方便性

• v-if, v-else, v-for 比 react 直接集成 js 代码要简洁清晰
• v-if 的方便性 react 不具备
• v-show 非常实用
• @event.xxx 系列非常方便
  
  • .prevent
  • .key

后面待续。。。