vuejs

1// Basic VueJS Example Template
2
3<template>
4  <div class="myClass" ref>
5    <slot></slot>
6  </div>
7</template>
8
9<script>
10export default {
11  data() {
12    return {
13      myData: "Hello World!"
14    }
15  },
16  mounted() {
17    this.myMethod();
18  },
19  methods: {
20    myMethod() {
21      console.log(this.myData);
22    }
23  }
24}
25</script>
26
27<style scoped>
28.myClass {
29  padding: 1em
30}
31<style>

1<div id="app">
2  {{ message }}
3</div>

1<!-- development version, includes helpful console warnings -->
2<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1var app2 = new Vue({
2  el: '#app-2',
3  data: {
4    message: 'You loaded this page on ' + new Date().toLocaleString()
5  }
6})

1// file name: index.vue
2// structure for vue 2
3<template>
4  // HTML code 
5  // within one element for vue2
6</template>
7<script>
8// js code
9export default {
10	components: {
11      // vue component to use in html
12    },
13    data () {
14      return{
15        // all global variables should be declear here
16        // this.varName to access variable
17        randomVar: 12,
18        randomVar2: "Suman"
19      }
20    },
21    computed:{
22      // act as variable
23      // syntex will be same as function
24      // return value will be stored 
25    },
26    methods: {
27      // all global function should be declear here
28      // you can use all js syntex here
29    },
30    mounted (){
31      // all other js code to be execuated here (my suggestion)
32      // this is a part of "vue-lifecycle"
33      // for more details: 
34      // https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
35    }
36}
37</script>
38<style scoped>
39// css code
40// scoped will enclose all css code within this vue file
41</style>

1const CounterApp = {
2  data() {
3    return {
4      counter: 0
5    }
6  },
7  mounted() {
8    setInterval(() => {
9      this.counter++
10    }, 1000)
11  }
12}
13

1Best front framework ! :)

1<div id="app-2">
2  <span v-bind:title="message">
3    Hover your mouse over me for a few seconds
4    to see my dynamically bound title!
5  </span>
6</div>