WP254
diff --git a/‎14 -- Vue - Intro to Components/css/style.css
+6 b/‎14 -- Vue - Intro to Components/css/style.css
+6
diff --git a/‎14 -- Vue - Intro to Components/img/logo.png
6.69 KB b/‎14 -- Vue - Intro to Components/img/logo.png
6.69 KB
diff --git a/‎14 -- Vue - Intro to Components/index.html
+22 b/‎14 -- Vue - Intro to Components/index.html
+22
diff --git a/‎14 -- Vue - Intro to Components/js/main.js
+31 b/‎14 -- Vue - Intro to Components/js/main.js
+31
@@ -0,0 +1,6 @@
+body{
+	text-align: center;
+}
+p{
+	text-transform: capitalize;
+}
@@ -0,0 +1,22 @@
+<!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-one">
+		<h2> 1<sup>st</sup> Components with Vue JS</h2>
+		
+		<greeting></greeting>
+	</div>
+
+	<div id="vue-app-two">
+		<h2>2<sup>nd</sup> Component</h2>
+		<greeting></greeting>
+	</div>
+
+	<script src="js/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,31 @@
+Vue.component('greeting',{
+
+	template:'<p>Hey there? this is a reusable {{name}} . <button @click="changeName">Change Name</button></p>',
+	data: function(){
+		return {
+			name: 'mie'
+		}
+	},
+
+	methods:{
+
+		changeName: function(){
+			this.name = 'messa'
+		}
+	}
+	
+});
+
+
+var vm = new Vue({
+
+	el: "#vue-app-one"
+
+});
+
+
+var vm = new Vue({
+
+	el: "#vue-app-two"
+
+});
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +body{
 +	text-align: center;
 +}
 +p{
 +	text-transform: capitalize;
 +}