模板书写对比

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

后面待续。。。