<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>30 Days of Vue - Day 5 -Watching for changes</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<button v-on:click="counter++">
Increase</button>
<button v-on:click="counter--">
Decrease</button>
<p>Counter: {{ counter}}</p>
<p>Result: {{ result() }}</p>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/lilianab/30-days-of-vue-day-5-watching-for-changes-XqOJWK */
::-webkit-input-placeholder {
color: #76FF03;
opacity: 0.3;
}
:-ms-input-placeholder {
color: #76FF03;
opacity: 0.3;
}
::-ms-input-placeholder {
color: #76FF03;
opacity: 0.3;
}
::placeholder {
color: #76FF03;
opacity: 0.3;
}
body {
font-family: 'Inconsolata', sans-serif;
font-size: 16px;
height: 100vh;
}
body #app {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: #000;
flex-direction: column;
padding: 30px;
}
body button {
font-family: 'Inconsolata';
cursor: pointer;
background: black;
border: 1px solid #76FF03;
color: #76FF03;
font-size: 1.5em;
padding: 10px;
margin-bottom: 20px;
}
body button:focus {
outline: none;
}
body p {
color: #76FF03;
font-size: 2em;
display: block;
}
/*Downloaded from https://www.codeseek.co/lilianab/30-days-of-vue-day-5-watching-for-changes-XqOJWK */
new Vue({
el: '#app',
data: {
counter: 0
},
watch: {
counter: function(value) {
var vm = this;
setTimeout(function() {
vm.counter = 0;
}, 2000);
}
},
methods: {
result: function() {
return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
}
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
Normalize
Vue js
