属性绑定和普通HTML一样的
毕竟class和style可都是html的属性，这点相信大家都知道的。
<input placeholder="我是placeholder" /> <input placeholder={placeholderText} /> {/* 解构N个属性，要啥放啥 */} <div {...attrObj} />
效果：
常用指令
template常用指令：v-html | v-text、v-if、v-for、v-modal等。template的指令在JSX是无法使用的，故需要一些写法，请看下面。
我新建个instructions.js用来示范指令这块。在App.vue中引入。
v-html | v-text
在 JSX 里面，如果要设置 dom 元素的 innerHTML，就用到 domProps。
render() { const { htmlCode } = this return ( <div> <div domPropsInnerHTML={htmlCode}></div> </div> ); }
虽然v-text有domPropsInnerText，但没有用的必要。
v-if
分简单的和复杂的。
简单：
render() { let bool = false return ( <div> { bool ? <button>按钮1</button> : <button>按钮2</button>} </div> ); }
复杂：
render() { let num = 3 if(num === 1){ return( <button>按钮1</button> ) } if(num === 2){ return( <button>按钮2</button> ) } if(num === 3){ return( <button>按钮3</button> ) } }
v-for
就使用 map 方法来实现，在react中也是如此。
render(h) { var list = [1,2,3] return( <div> { list.map(item => <button>按钮{item}</button>) } </div> ) }
v-modal
注意：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用
如果你的项目比较老，也可以安装插件 babel-plugin-jsx-v-model 来进行支持
我可是cli4，我来验证下：
验证结果：（通过）
当然以上两种方式你都不想搞，你也可以手动支持，这就涉及到监听事件了，请向下看。
监听事件及事件修饰符
监听事件想到用 onChange, onClick等。
需要注意的是，传参数不能使用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会自动执行一次方法
应该使用 bind，或者箭头函数来传参
methods: { handleClick(val){ alert(val) } },
<button type="button" onClick={this.handleClick.bind(this, 11)}>点击bind</button> <button type="button" onClick={() => this.handleClick(11)}>点击箭头函数</button>
上面提到的用过监听事件来实现v-modal
<input type="text" value={this.text} onInput={this.input}/>
methods: { input(e){ this.text = e.target.value } },
除此之外，还可以使用对象的方式去监听事件：
render() { return ( <input value={this.content} on={{ focus: this.$_handleFocus, input: this.$_handleInput }} nativeOn={{ click: this.$_handleClick }} ></input> ) }
其他事件的使用同理都是加on。
事件修饰符
和指令一样，除了个别的之外，大部分的事件修饰符都无法在JSX中使用，这时候你肯定已经习惯了，肯定有替代方案的。
.stop ： 阻止事件冒泡，在JSX中使用event.stopPropagation()来代替
.prevent：阻止默认行为，在JSX中使用event.preventDefault() 来代替
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调，使用下面的条件判断进行代替
if (event.target !== event.currentTarget){ return }
.enter与keyCode: 在特定键触发时才触发回调
if(event.keyCode === 13) { // 执行逻辑 }
除了上面这些修饰符之外，尤大大为了照顾我们这群CV仔，还是做了一点优化的,对于.once,.capture,.passive,.capture.once，尤大大提供了前缀语法帮助我们简化代码
render() { return ( <div on={{ // 相当于 :click.capture '!click': this.$_handleClick, // 相当于 :input.once '~input': this.$_handleInput, // 相当于 :mousedown.passive '&mousedown': this.$_handleMouseDown, // 相当于 :mouseup.capture.once '~!mouseup': this.$_handleMouseUp }} ></div> ) }
如果有参数传递给方法，不能直接(参数)，会在页面中立即触发，需要我在下面这种写法：
clickOnce(val) { alert(val); }, <button type="button" on={{ '~click': ()=>this.clickOnce('只能点一次'), }} > 事件修饰符点击一次 </button>
