applications/notemaster/index.html

<!DOCTYPE html>
<html>
<head>
<title>Add Note</title>
<script src='https://unpkg.com/vue'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://davidtkatz.com/public_css/noteMaster.css">
</head>
<body>
<div id="app">
	<h3>{{title}}</h3>
	<!-- Note form -->
	<div class="form">
	<div class='form-group'>
		<div class='form-group'>
			<label> Note Title</label>
			<input class='form-control' type='text' v-model='note.title'>
		</div>
		<div class='form-group'>
			<label> Note Text</label>
			<textarea class='form-control' v-model='note.text'></textarea>
		</div>
	</div>
	<button class='btn btn-primary' @click='addNote'> Add note</button>
	</div>
	
	<!-- display note -->
	<div class='col-sm-12'>
	<!-- v-for directive can take 2 parameters - the value and index to loop -->
		<div class='col-sm-4 note' v-for='(note,index) in notes'>
			<div class='card'>
				<div class='card-block'>
				<button class='close' @click='removeNote(index)'>&times</button>
					<h4 class='card-title'>{{note.title}}</h4>
					<h6 class='card-subtitle mb-2 text-muted'>{{note.date}}</h6>
					<p class='card-text'>{{note.text}}</p>
				</div>
				
			</div>
		</div>
	</div>
	
</div>
<script>
	//Vue instance
	var app = new Vue({
	//html element that we target
		el: '#app',
		data: {
			title: 'Note Master',
			note: {
				title: '',
				text: ''
			},
			notes: [
				{   //sample note
					title: 'Note 1',
					text: 'Complete this',
					date: new Date(Date.now()).toLocaleString()
				}
			]
		},
		methods: {
			addNote() {
				let { text, title } = this.note //Destructuring assignment - ES6 feature
				this.notes.push({
					text, 
					title, 
					date: new Date(Date.now()).toLocaleString() 
					})
			},
			removeNote(index) {
				this.notes.splice(index,1); //remove 1 element starting from index in the notes array
			}
		}
		})
</script>
</body>
</html>