v-dom v0.0.4

Vdom (form html template to virtual dom)

Install

npm install v-dom

dome

html_tpl

<div onclick="{add}">
	<h3 class="{true && 'yellow'}">{ title } 验证class添加表达式</h3>
	<h3>{ title1 }</h3>
	<h3 style="display: none">{ title2 }</h3>
	<h3>{ title3 }</h3>
	<h3>{ title5 }</h3>
	<h3>{ title6 }</h3>
	<h3>{ title7 }</h3>
	<h3>{ title8 }</h3> 
	<h3>{ title9 }</h3>
	<h3 style="display: { display }">{ title3 }</h3>
	<button type="button" onclick="{prevent_bubbly}">阻止事件冒泡</button>
	<button type="button" onclick="{reverse}">反转数组</button>
	<h2 style="color:#fff" class="ccc">{items.length}</h2>
	<ul>
		<li each="{item ,i in items}">
		{item.name + i} - {i} 比较大小{i+1 > i}
		<i>{item.i} - {i}</i>
		<a href="javascript:;" style="color:#fff;padding-left:30px" onclick="{remove}">{item.a} - {i}</a>
		</li>
	</ul>
</div>

vdom(document.getElementById('vdom'),html_tpl,function () {

	this.title = 'zdz_designer'
	this.title1 = 'zdz_designer1'
	this.title2 = 'zdz_designer2'
	this.title3 = 'zdz_designer3'
	this.title4 = 'zdz_designer4'
	this.title5 = 'zdz_designer5'
	this.yellow = 'red'
	this.display = 'none'

	this.items = [
		{
			name:'ssss',
			a:'a-1',
			i:'i-1'
		},
		{
			name:'bbbbbb',
			a:'a-2',
			i:'i-2'
		},
		{
			name:'cccccc',
			a:'a',
			i:'i'
		}
	]

	
	this.prevent_bubbly = function () {
		console.log('阻止添加内容')	
		return true
	}

	this.reverse = function () {
		console.log('反转数组')
		this.items.reverse()
		this.update()
		return true	
	}

	this.remove = function () {
		console.log('remove')	
		console.log(this)
		this.parent.items.splice(this.i,1)
		this.parent.update()
		return true	
	}

	this.add = function (e) {
		// console.log(this)
		this.display = this.display==='none' ? 'block' :'none'
		this.items.push({
			name:'name',
			a:'a',
			i:'i'
		})
		this.update()
		
	}

})

License

MIT