Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/app.js

Created April 21, 2018 17:58
Show Gist options
  • Save oliverbth05/105217ad2804761d64f15381c2e7968c to your computer and use it in GitHub Desktop.
Save oliverbth05/105217ad2804761d64f15381c2e7968c to your computer and use it in GitHub Desktop.
Download ZIP
Simple Counter Component - Vue.js
Raw
app.js
var app = new Vue({
el: "#counterApp",
data: {
count: 0
},
methods:{
increment: function(){
this.count ++;
},
decrement: function(){
this.count--;
}
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
<link rel = "stylesheet" type = "text/css" href = "app.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" >
</head>
<body>
<!-- Vue CDN ------------------------------ -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class = "ui container">
<div class = "ui grid">
<div class = "ui eight wide column" id = "counterApp">
<div class = "ui center aligned container segment">
<h2>{{count}}</h2>
<div class="ui buttons">
<button class="ui positive button" v-on:click = "increment()">+</button>
<div class="or"></div>
<button class="ui negative button" v-on:click = "decrement() ">-</button>
</div>
</div>
</div>
</div>
</div>
<script src = "app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment