Vue.js: the basics

To loop through data in an array or object you can use the directive v-for

 data: () => ({
    info_set: [
      'first',
      'second',
      'third'
    ]
  }),

/* and the list */
  <ul>
     <li v-for='element in info_set'>{{element}}</li>
   </ul>

v-on can be triggered with an event such as a click of a button

<button v-on:click="sayhi('hello')">click me</button>

/* and the method */

 methods: {
    sayhi: function(v){
        alert(v);
    }
  },

v-show is a boolean directive, showing the content only if what is passed to it renders true.

  <button @click="message = !message">click me</button>
   <p v-show='message'>New P tag</p>

and the script

 data: () => ({
    message: true,
...

v-if is similar to v-show as it is also a conditional and will display the same result however v-show hides the element with css whereas v-if doesn't render the element if the value is false.  v-if comes with v-else and v-if-else.

V-model works together with the input tag where its value is a placeholder.  The placeholder is a property name for either data or computed.

 <input type="text" v-model='input'>
    <h1>{{input}}</h1>

  data: () => ({
    input: '',

You can use v-model.lazy modifier and the data value will change only when that input is out of focus.

You can use the number modifier to change the data being sent from being a string '123' to being a number 123 with v-model.number

You can use filters for simple alterations to a value.  

    <input type="text" v-model='input'>
    <h1>{{input|capitalize}}</h1> 

  filters: {
    capitalize: function(v){
      return v.toUpperCase();
    }
  },

For more complicated alterations you can use computed.  Computed takes one or more data properties and returns a different property.  

    <input type="text" v-model='input'>
    <h1>{{computed_message}}</h1> 

  computed:{
      computed_message: function(){
        return this.input.split('').reverse().join('');
      }
  },

You can also set up a two way communication between input values by using a getter and setter.

      <p>First name: <input type="text" v-model='first'></p>  
      <p>Last Name<input type="text" v-model='last'></p> 
      <p>Full Name<input type="text" v-model='full'></p> 

  computed:{
     full:{
       get: function(){
         return this.first + ' ' + this.last
       },
       set: function(v){
         var array = v.split(' ');
         this.first = array[0];
         this.last = array[array.length-1];
       }
     }
  },

So you can alter the full name with the first and/or last name and visa versa.  

With Vue.js you can bind a placeholder, an array or a json object.  

  <h1 v-bind:class='class_name'>This is class bound</h1>

 data: () => ({
    class_name: 'red_font', 
  }),
...
<style scoped>
.red_font{
  color: red
}

An array:

<h1 v-bind:class=[class_one,class_two]>This is class bound</h1>

  data: () => ({
    class_one: 'red_font', 
    class_two: 'blue_background'
  }),
...
<style scoped>
.red_font{
  color: red
}
.blue_background{
  background-color: blue;
}

A Json Object: 

<h1 v-bind:class={red_font:true,blue_background:true}>This is class bound</h1>

A Json object allows us to conditionally bind styles based on a data property or computed property.

Rather than writing it inline you can refer to a data property object.

 <h1 v-bind:class='class_object'>This is class bound</h1>

 data: () => ({
    class_object:{red_font:true,blue_background:true}
  }),

And in computed: 

 computed:{
    class_object:function(){
      return {red_font:true,blue_background:true}
      }
  },

You can also bind styles dynamically.

   <h1 v-bind:style='{color: colour_choice, background: bg_colour}'>This is class bound</h1>

  data: () => ({
    colour_choice: 'pink',
    bg_colour: 'lightblue'
  }),

Or just use a style object

  <h1 v-bind:style='style_object'>This is class bound</h1>

  data: () => ({
    style_object: {
      color: 'pink',
      background: 'lightblue'
    }
  }),