<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import jsx from './index' const {use, bind, create, p, span, input, textarea} = jsx var TestBind = { render (h) { use(h) return span({style_color: 'red'}, 'test bind') } } var TestInput = { model: { prop: 'testValue', event: 'testInput', }, props: { testValue: String, }, render (h) {window._h1 = h console.log('test input render begin') use(h) const me = this const $node = input({ domProps_value: this.testValue, on_input (e) { me.$emit('testInput', e.target.value) me.$emit('testEvent', e.target.value) } }) console.log('test input render end') return $node } } var HelloWorld = { props: { msg: String }, data () { return { inputVal: '123', flag: false, flagValue: 1, } }, components: { TestBind, TestInput, }, render (h) {window._h2 = h console.log('hello world render begin') use(h) if (this.flag){ console.log(this.flagValue) } const Test = bind('test-bind') const TestInput = bind('test-input') const $pnode = p({ style_color: 'red', }, this.msg) const $node = create('div', {classes: 'hello world'}, this.msg, $pnode, Test(), input({ domProps_type: 'password', vmodel: [this, 'inputVal'], }), // textarea({ // vif: false, // vmodel: [this, 'inputVal'] // }), // TestInput({ // vmodel: [this, 'inputVal', 'testValue', 'testInput'], // 'on_testEvent' (value) { // console.log(value) // } // }) ) console.log('hello world render end', this.inputVal) return $node } } export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .hello{ font-size: 30px; } </style>