VUE+JSX的简单使用

vue template语法简单明了，数据操作与视图分离，开发体验友好。但是在某些特定场合中，会限制一些功能的扩展，如动态使用过滤器、解析字符串类型的模板文件、动态渲染机器人交互等。以上功能的实现可以借助vue的render语法，render语法比template更偏底层，允许在HTML中使用js语法，可以极大的扩展HTML的能力。

注意：vue+jsx 的写法，需要 摒弃 vue的部分特性

Props传参
/views/about.vue子组件

<script>
export default {
     
  name: 'Home',
  props:['msg','changeInput'],  //接收父组件传递的值、事件等
  render(){
     
    return(
      <div id='wrap'>
	      <div class='children'>我是子组件</div>
	      <div class='title'>这是父组件传递过来的数据：{
     this.msg}</div>
	      <input placeholder='请输入姓名' value={
     this.msg} onInput={
     this.changeInput}/>
      </div> 
    )
  }
}
</script>
<style lang="less" scoped>
.children{
     
  color: blue
}
</style>

props:子组件接收父组件传递的数据
使用onInput监听输入框变化实现数据双向绑定，把输入框事件操作交给父组件，子组件动态监听输入框数据

/views/home.vue父组件
组件引用后直接在函数中使用，无需使用components

<script>
import About from './About.vue'
export default {
     
  name: 'Home',
  data(){
     
    return{
     
      msg:'这是父组件，使用JSX渲染'
    }
  },
  methods:{
     
    changeInput(e){
     
      this.msg = e.target.value
      console.log(this.msg);
    }
  },
  render(){
     
    return(
      <div id='wrap'>
	      <p class='title'>我是父组件</p>
	      //引用子组件，把父组件的数据、方法传给子组件
	      <About msg={
     this.msg} changeInput={
     this.changeInput}></About>
      </div>
    )
  }
}
</script>
<style lang="less" scoped>
.title{
     
  color: red
}
</style>

运行项目后，如下图：

试着修改输入框的值：

事件

举例：点击事件

注：vue中绑定点击事件直接是@click='fn'，在JSX中需要改为onClick={fn}

/views/Fn.vue

<script>
export default {
     
  name: 'Home',
  data(){
     
    return{
     

    }
  },
  methods:{
     
    alert(){
     
      alert("你点了我，这是JSX写法的弹出事件")
    }
  },
  render(){
     
    return(
      <div id='wrap'>
        <p onClick={
     this.alert}>点击我出现弹框</p>
      </div>
    )
  }
}
</script>

运行后如下图：

其他事件类似，具体自研。。。。

判断语句

举例 v-if && v-else

注：在JSX中判断语句需要更换为三目表达式

/views/if.vue

<script>
export default {
     
  name: "Home",
  data() {
     
    return {
     
      flag: 0
    };
  },
  methods: {
     
    flag1() {
     
      this.flag = 1;
    },
    flag0() {
     
      this.flag = 0;
    }
  },
  render() {
     
    return (
      <div id="wrap">
        {
     this.flag === 1 ? <span>flag=1显示</span> : <span>flag=0显示</span>}
        <p>
          <button value="1" onClick={
     this.flag1}>1</button>
          <button value="0" onClick={
     this.flag0}>0</button>
        </p>
      </div>
    );
  }
};
</script>

持续更新。。。