initial commit

sorting out my vue projects into gitlab.

initial commit
sorting out my vue projects into gitlab.
e6083c73 · Adam Procter · e6083c73 · e6083c73 · e6083c73 · e6083c73
Commit e6083c73 authored Oct 28, 2017 by Adam Procter
16 changed files
--- a/vue_one/index.html
+++ b/vue_one/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="vue.js"></script>
+  <script src="marked.js"></script>
+  <script src="lodash.js"></script>
+ <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
+  
+</head>
+<body>
+ <div id="app">
+   <textarea :value="input" @input="update"></textarea>
+   <div v-html="compiledMarkdown"></div>
+ </div>
+
+  <script>
+    var vm = new Vue({
+      el: '#app',
+      data: {
+      	input: '# hello'
+      }    ,
+      computed: {
+        compiledMarkdown: function () {
+          return marked(this.input, { sanitize: true })
+        }
+      },
+      methods: {
+        update: _.debounce(function (e) {
+          this.input = e.target.value
+        }, 300)
+      }
+    })
+    
+  
+  
+  </script>
+ </body>
+</html>
\ No newline at end of file
--- a/vue_one/lodash.js
+++ b/vue_one/lodash.js
--- a/vue_one/main.css
+++ b/vue_one/main.css
+html, body, #app {
+  margin: 0;
+  height: 100%;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  color: #333;
+}
+
+textarea, #app div {
+  display: inline-block;
+  width: 49%;
+  height: 100%;
+  vertical-align: top;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+textarea {
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
\ No newline at end of file
--- a/vue_one/marked.js
+++ b/vue_one/marked.js
--- a/vue_one/vue.js
+++ b/vue_one/vue.js
--- a/vue_three/css/main.css
+++ b/vue_three/css/main.css
+body {
+
+   font-size: 22px;
+   line-height:28px;
+   font-family: "Chaparral W01";
+   font-weight: 400;
+   font-style: normal;
+	color:  rgba(51, 51, 51, 1);
+
+}
+
+h1 {
+   font-family: "Galano Classic W00";
+   font-weight: 700;
+   font-style: bold;
+   font-size: 45px;
+   line-height: 62px;
+}
+
+li{
+	font-family: "Pica 10 Pitch W01";
+	font-weight: 400;
+	font-style: bold;
+	font-size: 16px;
+	line-height: 20px;
+	
+}
\ No newline at end of file
--- a/vue_three/index.html
+++ b/vue_three/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="js/vue.js"></script>
+  <script src="js/marked.js"></script>
+  <script src="js/lodash.js"></script>
+  
+  <script src="js/main.js"></script>
+  
+ <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+	
+	 <script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
+	
+</head>
+<body>
+	
+ <div id="app">
+
+  <h1>{{ title }}</h1>
+ 	<p>{{message}}</p>
+ 	
+ 	<input
+ 	  v-model="mytodos.newTodotext"
+ 	  v-on:keyup.enter="addTodo"
+ 	  placeholder="Add a todo"
+ 	>
+ 	
+ 	<ul>
+ 	
+ 	<li v-for="(item, index) in mytodos.items"
+ 	  v-bind:key="item.id"
+ 	  v-bind:title="item.text">
+ 	
+ 	{{item.text}}<button v-on:click="remove(index)">X</button>
+
+ 	
+ 	</li>
+ 	</ul>
+
+	
+ </div>
+
+<script>
+
+
+// mydata
+var mytodos = {newTodotext: '', items:[{id:1, text: "Item A"},{id:2,text: "Item B"},{id:3,text: "Item C"}], nextTodoid: 4
+	};
+	
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    title: 'Hello Vue.js!', message:'Welcome to the future.', mytodos:mytodos
+    
+//    items: [
+//      { todo: 'Item One' },
+//      { todo: 'Items Two' }
+//    ]
+    
+       
+     },
+   methods: {
+   	addTodo: function(){
+   		mytodos.items.push({
+   			id: mytodos.nextTodoid++,
+   			text: mytodos.newTodotext
+   		})
+   		   mytodos.newTodoText = ''
+   		},
+   		remove(index){
+   		       mytodos.items.splice(index,1);
+   		}
+     }
+   
+   
+})
+</script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/vue_three/js/lodash.js
+++ b/vue_three/js/lodash.js
--- a/vue_three/js/main.js
+++ b/vue_three/js/main.js
--- a/vue_three/js/marked.js
+++ b/vue_three/js/marked.js
--- a/vue_three/js/vue.js
+++ b/vue_three/js/vue.js
--- a/vue_two/index.html
+++ b/vue_two/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="vue.js"></script>
+  <script src="marked.js"></script>
+  <script src="lodash.js"></script>
+ <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
+	</head>
+<body>
+ <div id="app">
+
+  <h1>{{mydata.title}}</h1>
+
+
+
+ <!-- index is used to check with current screen index -->
+  <div v-for="(screen, index) in mydata.screens">
+    <!-- Hide all screen info, show only the one with index === to current screen index -->
+       <div v-show="index === screenIndex">
+       		<h2>{{screen.text}}</h2>
+   
+       	</div>
+
+
+	</div>
+
+
+	<div v-show="screenIndex === mydata.screens.length">
+	   <h2>Finished</h2>
+
+	 </div>
+	 
+	<button v-if="screenIndex > 0" v-on:click="prev">prev</button>
+	<button  v-if="screenIndex < mydata.screens.length" v-on:click="next"> next </button>
+
+	
+	
+ </div>
+
+  <script>
+  	
+  	var mydata = {title: 'Data Set', screens:[{text: "Screen 1"},{text: "Screen 2"}]
+  	};
+
+    var vm = new Vue({
+           el: '#app', 
+                  data: { mydata : mydata, screenIndex: 0,
+                  } ,
+                    // The view will trigger these methods on click
+                    methods: {
+                      // Go to next screen
+                      next: function() {
+                        this.screenIndex++;
+                      },
+                      // Go to previous screen
+                      prev: function() {
+                        this.screenIndex--;
+                      }
+                      
+                  }                 
+                  // 
+                });
+        
+  
+  
+  </script>
+ </body>
+</html>
\ No newline at end of file
--- a/vue_two/lodash.js
+++ b/vue_two/lodash.js
--- a/vue_two/main.css
+++ b/vue_two/main.css
--- a/vue_two/marked.js
+++ b/vue_two/marked.js
--- a/vue_two/vue.js
+++ b/vue_two/vue.js