Magistern · April 10, 2018 22:58
diff --git a/a-simple-vue-app.markdown b/a-simple-vue-app.markdown
diff --git a/index.html b/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
 -->
diff --git a/script.js b/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
 	}
 });
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
diff --git a/style.css b/style.css
 #app { margin-top:20px; text-align:center; font-size:2em; }
 input{ width:4em; font-family:monospace; }
 input[type=number]{ width:2em; }
diff --git a/styles b/styles
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet" />
	<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
	-->
	// The Vue constructor comes from the vue.js file
	var app = new Vue({
	el:'#app',
	data:{
	foo:"hello",
	bar:"world",
	baz:2,
	qux:3
	}
	});
	#app { margin-top:20px; text-align:center; font-size:2em; }
	input{ width:4em; font-family:monospace; }
	input[type=number]{ width:2em; }