Instances Vue & basics

by JuanMa Garrido

HTML

<div id="app">
  <p v-bind:class="{ updated: name !== 'Max'}">{{ name }}</p>
  <p v-if="name !== 'Max'">Name updated!</p>
  <button v-on:click="changeName">Change Name</button>
  <button v-on:click="addElement">Add Element</button>
  <ul>
    <li 
      v-for="element in elements"
      v-bind:id="'el' + element"
      v-bind:style="{ backgroundColor: getColor(element)}"
     >Element {{ element }}</li>
  </ul>
</div>

<div id="app2">
  <p>Second Vue Instance</p>
  <p>{{ message }}</p>
</div>

<div class="username">{{ username }}</div>
<div class="username">{{ username }}</div>

SCSS

body {
  padding: 20px;
  font-family: Helvetica; 
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.updated {
  background-color: yellow;
}

Vue

new Vue({
  el: "#app",
  data: {
    name: 'Max',
    elements: []
  },
  methods: {
  	changeName: function() {
    	this.name = 'Anna'
    },
    addElement: function() {
    	this.elements.push(this.elements.length+1)
    },
    getColor: function(number) {
    	return number % 2 == 0 ? 'green' : 'red'
    }
  }
})

new Vue({
  el: "#app2",
  data: {
  	message: 'Hello there'
  }
})

new Vue({
  el: ".username",
  data: {
  	username: 'JuanMa'
  }
})