不要着急，这些指令只是黑魔法，用js很容易实现。
v-if
render(){
return (
<div>
{this.show?'你帅':'你丑'}
</div>
)
}
写三元表达式只能写简单的，那么复杂的还得用if/else
render(){
let ifText
if(this.show){
ifText=<p>你帅</p>
}else{
ifText=<p>你丑</p>
}
return (
<div>
{ifText}
</div>
)
}
v-for
data(){
return{
show:false,
list:[1,2,3,4] }
},
render(){
return (
<div>
{this.list.map((v)=>{
return <p>{v}</p>
})}
</div>
)
}
在jsx中｛｝中间是没办法写if/for语句的只能写表达式，所以就用map来当循环，用三元表达式来当判断了
v-model
最近在帮公司面试招人发现v-model很多人都不知道语法糖是什么？然后有些人说我可以用原生js实现，但是他们竟然不知道在vue中怎么实现，好吧，两个点：传值和监听事件改变值。
<script>
export default {
name: "item",
data(){
return{
show:false,
list:[1,2,3,4],
text:'',
}
},
methods:{
input(e){
this.text=e.target.value
}
},
render(){
return (
<div>
<input type="text" value={this.text} onInput={this.input}/>
<p>{this.text}</p>
</div>
)
}
}
</script>
怎么用自定义组件？
很简单，只需要导入进来，不用再在components属性声明了，直接写在jsx中比如
<script>
import HelloWolrd from './HelloWorld'
export default {
name: "item",
render(){
return (
<HelloWolrd/>
)
}
}
</script>
事件，class,style,ref等等怎么绑定？
来看下面的写法
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
