WP254
diff --git a/‎15 -- Vue - Refs/css/style.css
+6 b/‎15 -- Vue - Refs/css/style.css
+6
diff --git a/‎15 -- Vue - Refs/img/logo.png
6.69 KB b/‎15 -- Vue - Refs/img/logo.png
6.69 KB
diff --git a/‎15 -- Vue - Refs/index.html
+24 b/‎15 -- Vue - Refs/index.html
+24
diff --git a/‎15 -- Vue - Refs/js/main.js
+14 b/‎15 -- Vue - Refs/js/main.js
+14
@@ -0,0 +1,6 @@
+body{
+	text-align: center;
+}
+p{
+	text-transform: capitalize;
+}
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Vue Tutorials</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+	<script src="js/vue.js"></script>
+</head>
+<body>
+	<div id="vue-app">
+		<h2>Refs</h2>
+		<input type="text" ref="input">
+		<button @click="readRefs"> Submit </button>
+
+		<p>Your Fav Food: {{output}}</p>
+
+		<div ref='test'>
+			hello
+		</div>
+
+	</div>
+
+	<script src="js/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,14 @@
+var vm = new Vue({
+
+	el: "#vue-app",
+	data:{
+		output: 'Your Fav Food',
+	},
+	methods:{
+		readRefs: function(){
+			console.log(this.$refs.innerText);
+			this.output = this.$refs.input.value
+		}
+	}
+
+});
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +body{
 +	text-align: center;
 +}
 +p{
 +	text-transform: capitalize;
 +}