Commit e6083c73 authored by Adam Procter's avatar Adam Procter

initial commit

sorting out my vue projects into gitlab.
parents
<!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
This diff is collapsed.
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
This diff is collapsed.
This diff is collapsed.
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
<!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
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!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
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment