컴포넌트와 자식들 렌더링하기

컴포넌트와 자식들 렌더링하기

by SUNG BIN CHO

HTML

<div id="app"></div>

JavaScript

new Vue({
	el: '#app',
  render: h => h(
  	'div',
    [
    	h('h1', 'The plumber club page'),
      h({
    		render: function (h) {
      		const self = this
        	return h('div', 
          	[
        			'Your name is ',
          		h('input', {
          			domProps: {
            			value: self.name
            		},
            		on: {
            			input(event) {
              			self.name = event.target.value
              		}
            		}
          		}),
          		h(
          			'p',
            		'Hello ' + self.name +
            			(self.exclamation ? '!' : '')
          		)
        		])
      	},
      	data() { return {name:''} },
      	props: ['exclamation']
    	},
    	{
    		props: {
      		exclamation: true
      	}
    	}),
      'Here you will find', 
      h('i', 'a flood '),
      'of plumbers'
    ]
	)
})