A simple vue app

a-simple-vue-app.markdown

A simple vue app

A Pen by Johan Kohlin on CodePen.

License.

index.html

<div id="app">
	<input v-model="foo"> +
	<input v-model="bar"> =
	<span>{{foo}} {{bar}}</span>
	<hr>
	<input v-model.number="baz" type="number"> +
	<input v-model.number="qux" type="number"> =
	<span>{{baz + qux}}</span>
</div>

<!-- 
v-model=baz connects the Vue data property baz to the input's value attribute
v-model.number=baz converts the string to a number before saving it to the Vue data property baz

The moustaches {{ }} are template markers for Vue data. You can add logic and arithmetics as well
-->

script.js

// The Vue constructor comes from the vue.js file
var app = new Vue({
	el:'#app',
	data:{
		foo:"hello",
		bar:"world",
		baz:2,
		qux:3
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.css

#app { margin-top:20px; text-align:center; font-size:2em; }
input{ width:4em; font-family:monospace; }
input[type=number]{ width:2em; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet" />