Erste Schritte mit Vue.js

public/home.js

@@ -0,0 +1,60 @@
+/* First try of vue-componetn -> does not work
+Vue.component('home', {
+  data: function () {
+    return {
+    }
+  },
+  template:
+	`<div id="sample">
+		<div v-for="msgs in private.messages">
+    		<div  class="om-card card" v-for="elements in msgs.message">
+				<h6 class="msg-head">
+					<b>{{elements.subject}}</b>
+					<img src="favicon.ico" width=20px height=20px>
+				</h6>
+				<p>{{elements.msg}}<br>
+				<a href="#">{{elements.tags}}</a></p>
+				<div class="om-user-line">
+					<i class="material-icons">account_circle</i>
+					Erstellt von {{elements.user}}
+				</div>
+			</div>
+    	</div>
+	</div>`
+})
+
+
+new Vue({
+  el: '#sample',
+  data: {
+    private: {
+      messages : [
+      {
+         	message : [
+          	{subject : 'Betreff_1'},
+            { msg : 'Nachricht_1' },
+            { tags : '#tag_1' },
+            { user : 'user_1' }
+          ]
+        },
+        {
+          message : [
+          	{subject : 'Betreff_2'},
+            { msg : 'Nachricht_2' },
+            { tags : '#tag_2' },
+            { user : 'user_2' }
+          ]
+        },
+        {
+          message : [
+          	{subject : 'Betreff_3'},
+            { msg : 'Nachricht_3' },
+            { tags : '#tag_3' },
+            { user : 'user_3' }
+          ]
+        }
+      ]
+    }
+  }
+})
+*/

public/index.html

@@ -18,6 +18,7 @@
 
 	<!-- CSS_Custom Design -->
 	<link rel="stylesheet" type="text/css" href="style.css">
+	<script src=home.js></script>
 
 	<title>OMApp</title>
 </head>
@@ -33,7 +34,29 @@
 		</div>
 	</div>
 
+	<!--first try of vue.js data-binding
 	<div class="om-content">
+		<div id="sample">
+		<div class="om-card card" v-for="msgs in private.messages">
+    		<div v-for="elements in msgs.message">
+				<h6 class="msg-head">
+					<b>{{elements.subject}}</b>
+					<img src="favicon.ico" width=20px height=20px>
+				</h6>
+				<p>{{elements.msg}}<br>
+				<a href="#">{{elements.tags}}</a></p>
+				<div class="om-user-line">
+					<i class="material-icons">account_circle</i>
+					Erstellt von {{elements.user}}
+				</div>
+			</div>
+    	</div>
+	</div>
+	-->
+
+
+	<!--HTML Mockup
+
 		<div class="om-card card">
 			<h6 class="msg-head">
 				<b>Betreff</b>
@@ -100,11 +123,6 @@
 		</div>
 
 	</div>
-
-	<!--
-<button type="button" class="btn btn-secondary bmd-btn-fab add-msg-button">
-    <i class="material-icons">add</i>
-</button>
 -->
 
 	<nav class="nav nav-tabs nav-justified om-nav ">
@@ -128,6 +146,41 @@
 	<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
 	<!-- NOTE: Call main.js -->
 	<script src="main.js"></script>
+	<script>
+	new Vue({
+  el: '#sample',
+  data: {
+    private: {
+      messages : [
+      {
+         	message : [
+          	{subject : 'Betreff_1'},
+            { msg : 'Nachricht_1' },
+            { tags : '#tag_1' },
+            { user : 'user_1' }
+          ]
+        },
+        {
+          message : [
+          	{subject : 'Betreff_2'},
+            { msg : 'Nachricht_2' },
+            { tags : '#tag_2' },
+            { user : 'user_2' }
+          ]
+        },
+        {
+          message : [
+          	{subject : 'Betreff_3'},
+            { msg : 'Nachricht_3' },
+            { tags : '#tag_3' },
+            { user : 'user_3' }
+          ]
+        }
+      ]
+    }
+  }
+})
+	</script>
 
 </body>