example 06 vuejs Intro (angular-reactjs-vuejs-quickstart-comparison)

by hasandag

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <app-username v-bind:username="'Chris'"     
  v-on:usrclicked="userWasClicked($event)"></app-username>
  <app-username v-bind:username="'Anna'"></app-username>
  <app-username></app-username>
  <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">New 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 VueJS Instance
  </p>
  <input type="text" v-model="message">
  <p>
    {{ message}}
  </p>
</div>

CSS

.updated {
  color: white;
  background-color: yellow;
}

JavaScript

Vue.component('app-username', {
  props: ['username'],
  data: function() {
    return {
      // username: 'Chris'
    }
  },
  template: '<p v-on:click="usernameClicked">{{ username }}</p>',
  methods: {
    usernameClicked() {
      this.$emit('usrclicked', this.username);
    }
  }
});

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

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