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>

持續更新。。。