tiny-v
a toy that simulates the syntax of vue 2.x but works xd
features
- list rendering
not not works with multiple nested objects, only one level objects
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
new V({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})more examples:
v-for with a Range
<div>
<span v-for="n in 10">{{ n }} </span>
</div>Interpolation
<span>Message: {{ msg }}</span>also support interpolation with expressions
<span>{{ 'node'.split('').reverse().join('') }}</span>Computed Properties
as in vue the computed have access to the data object through this['...']
<div id="example">
<p>{{ deno }}</p>
</div>
new V({
el: '#example',
data: {
message: 'node'
},
computed: {
deno() {
return this.message.split('').reverse().join('')
}
}
})Method Event Handlers
<div id="example-2">
<button v-click="greet">Greet</button>
</div>
new V({
el: '#example-2',
data: {
name: 'tiny V'
},
methods: {
greet(event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})