Vue jsx全面指南

通常开发vue我们使用的是模板语法，独有的SFC在我们开发组件的时候非常方便，将script，template，style三者在同一个文件里面实现，大大提升了组件的可以移植性。

但是模板语法写多了也非常恶心，对于复杂动态渲染场景，模板都处理的很吃力，所以vue在2.0之后也增加了对jsx的支持，为了学习jsx，顺带可以理解下react

官方文档中关于jsx的使用介绍还是太少了，一开始写起来真的很不顺手，经过一个项目的使用，我把遇到的绝大多数情况总结下，希望可以帮到大家

官方例子
这里比较详细我就不赘述了，按照官方配置，一般场景是可以覆盖的，我下面将官方例子中未说明的情况情况罗列下。

1. v-model

---

    
   
   //
   
    this.inputValue = val}/>
    
  
   
      

2. v-for

---

    
    {{item.name}}
    
    
    // 
    
    {
        this.content.map((item, index) => {
            return (
                
                {item.name}
                
            )
        })
    }

3. 事件 & 按键修饰符

---

    

    //
    
     arg.keyCode === 13 &&    this.fetch()}
            prefix-icon="el-icon-search"
            placeholder="关键字搜索"
          />

4. 预置参数

---

    

    //
    
    

5. scopedSlots 作用域插槽敲黑板

---

    
        
    

    // 
    
     {
                return (
                编辑
            )
        }
        }
        }}
    />

6. scopedSlots 值传递敲黑板

---

    
    
    // 
    
    {this.$scopedSlots.default({
       isAdvancedPanelShow: this.isAdvancedPanelShow
    })}

官方文档在配上以上的总结，我已经像是在写react项目了，写起来还是蛮爽的。重点还是要对各种directives了解清楚，知道其实现原理，在转成jsx应该就没啥压力的。vue和react真是越来越像了。