1const app = Vue.createApp( {
2
3 template: "<p>Hello From Vue.createApp</p>", // Custom template for the element the vue app is mounted on
4
5 data() { // Items in data are accessible in other functions by using the 'this' keyword
6 return {
7 someData = "Hello World",
8 someObject = { // Can easily access object's values in html template
9 // with someObject._valueName_
10 title : "Hi There",
11 count : 1,
12 info : "Hola"
13 }
14 }
15 },
16
17 mounted() { // Called the first time the Vue app is mounted
18 console.log(this.someData);
19 this.someFunc(); // defined in methods::
20 // can also create a function with 'this' keyword anywhere to make it
21 //accessible to every other function in the vue app
22 null;
23 },
24
25 methods: { // Custom functions available to other functions in the vue app by using the 'this' keyword
26 // Also available to other html elements with some vue specific attributes such as v-on (or @)
27 someFunc() {
28 null;
29 },
30 someFunc2() {
31 null;
32 }
33 },
34
35 computed: { // Functions in the 'computed' property return values that usually depend on the 'data' values
36 // They are called (in the HTML template) in the same way as the 'data' values
37 changedData() {
38 return this.someData + " !";
39 }
40 }
41
42});
43
1const app = Vue.createApp({
2 data() {
3 return { count: 4 }
4 }
5})
6
7const vm = app.mount('#app')
8
9console.log(vm.count) // => 4