Vue - Snippets

Basics

// create App
const app = Vue.createApp();
// mount a html region
// app.mount('cssSelector');
app.mount('#myId'); // Vue controls now this id in the DOM


const app = Vue.createApp({
  // DATA FUNCTION can hold key val pairs
  data() { //or data: function(){...}
    return{ // data always returns an object
      myVar: 'Learn Vue',// can store keys with vals of every type(bool, object, string...)
        myLink: 'https://viewjs.org'
      }; 
    }
    // METHODS OBJECT HOLDS FUNCTIONS
    methods: {
      outputGoal(){
        const randomNumber = Math.random();
        if (randomNumber < 0.5) {return 'Learn Vue';}
        else {return 'Master Vue'}
     }
  }
});

<div id="myId">
<h3>Interpolation</h3>
<p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" -->
<h3>Binding</h3>
<p>Use bindings to set attributes. I.e. set the href attribute. {{myLink}} wouldn't work inside of tags.</p>
<p>Learn more <a v-bind:href="myLink">about Vue</a></p>
<p>{{ outputGoal() }}</p><!-- functions or simple js expresseions like 1+1 work to -->
</div>