All Useful Properties when Initializing Vue

Struggling to copy/paste all useful properties when initializing Vue? Looking to see what else Vue can do for you? Here’s the answer.

We have seen how Vue can be used from CDN. Initializing Vue is simple enough -

1
2
3
4
5


//  main.js
new Vue({
  el: "#app"
  }
});

The above code block will initialize Vue and load it to element with id app.

As we have seen previously, we can use a bunch of properties during initialization and make Vue super useful.

1
2
3
4
5
6
7
8


new Vue({
  el: "#app",
  data() {
    return {
      name: "World!"
    };
  }
});

data is used to store the static variable values / states of the component in Vue. Similar to data there are a host of other properties that you can use.

Consider the below rundown a cheat-sheet if you will.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


new Vue({
  el: "#app",
  data: {
    name: "world",
    nums: Number
  }, // state
  // props: [], // input parameters
  props: {
    // input parameters for component - object
    awesomeProp: {
      type: String,
      default: "user"
    }
  },
  computed: {
    // computed values :)
    sum() {
      return 0;
    }
  },
  methods: {
    sayHello() {
      console.log("hello");
    }
  },
  watch: { a(val, oldVal) {} },

  template: "<template></template>",

  // lifecycle events
  mounted() {
    console.log("i mount, i saw, i conquered");
    this.sayHello();
  }, // every time component mounts

  created() {}, // loaded only once
  ready() {}, // first time
  attached() {},
  detached() {},
  beforeDestroy() {}, // component unload - before
  destroyed() {}, // component unload - before

  // rest of the options
  components: {}, // don't foget to include!
  filters: {},
  directives: {},
  partials: {},
  transitions: {}
});

All Useful Properties when Initializing Vue

See Also