Vue - Snippets

Basics

• Data Option / Function
• Methods Option / Object
• Outputting Data mit
  • Interpolation {{}}
  • Bindings v-bind:property="myVal"
  • Methods
  • JavaScript Objects
• this

// 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...)
      myVar2: 'Master Vue<, 
      myHTML: '<h3>HTML Code</h3>', // use v-html to output html code
      myLink: 'https://viewjs.org'
    }; 
  }
  // METHODS OBJECT HOLDS FUNCTIONS
  methods: {
    outputGoal(){
      const randomNumber = Math.random();
      if (randomNumber < 0.5) {return 'Learn Vue';}
      else {return this.myVar2} // 'this' works because vue merges all data and methods in a global vue object
    }
  }
});

<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 -->
<p v-html="myHTML"></p>
</div>

Events

Beispiel

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
    };
  },
  methods:{
    plus(n){ this.counter = this.counter + n },
    minus(n){ this.counter = this.counter - n },
    updateName(event){
      this.name = event.target.value
    }
  }
});

app.mount('#events');

<section id="events">
  <h2>Events in Action</h2>
  <p> We can use expression in v-on:click or use a function from our methods object</p>
  <!-- CLICK EVENT -->
  <button v-on:click="plus(5)">Add 5</button>
  <button v-on:click="minus(5)">Substract 5</button>
  <p>Result: {{ counter }}</p>
  <!-- INPUT EVENT -->
  <input type="text" v-on:input="updateName">
  <p>Hello {{ name }}</p>

</section>