Approachable

Versatile

Performant

Who uses Vue.js?

Alibaba
Baidu
Chess.com
Behance & Adobe Portfolio
Codeship
GitLab
Nintendo
Tencent

Demo

https://cdn.jsdelivr.net/npm/vue

id & Vue instantiation

{{ double moustache }}

v-model <input> binding

v-if and v-else

v-on:click or @click

<html>
  <body>
    <div id="app">
      <h1>{{ appName }}</h1>

      <input type="text" v-model="attendee" />

      <button @click="addNewAttendee">Add</button>

      <div v-if="attendee">Adding {{ attendee }} to the list</div>
      <div v-else>Who is at the door?</div>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue'></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          'appName': 'Web Dev Meetup',
          'attendee': ''
        },
        methods: {
          addNewAttendee () {
            alert(this.attendee + ' is in the house!');
            this.attendee = '';
          }
        }
      });
    </script>
  </body>
</html>

Fig. 1

v-html

@keyup.enter

mounted () life cycle hook

Vue.component

v-bind: or :

computed

<html>
  <body>
    <div id="app">
      <h1>{{ appName }}</h1>

      <input type="text" v-model="attendee" @keyup.enter="addNewAttendee" />

      <button @click="addNewAttendee">Add</button>

      <div v-if="attendee">Adding {{ attendee }} to the list</div>
      <div v-else>Who is at the door?</div>

      <div>No of attendees: {{ noOfAttendees }}</div>
      
      <attendee-list v-bind:attendees="attendees"></attendee-list>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue'></script>
    <script>
      Vue.component('attendee-list', {
        template: `
          <div style="margin-top:20px;">
            <ol>
              <li v-for="attendee in attendees" v-html="attendee" />
            </ol>
          </div>
        `,
        props: ['attendees']
      });

      new Vue({
        el: '#app',
        data: {
          'appName': 'Web Dev Meetup',
          'attendee': '',
          'attendees': []
        },
        computed: {
          noOfAttendees () {
            return this.attendees.length;
          }
        },
        methods: {
          addNewAttendee () {
            if (!this.attendee) return;
            this.attendees.push(this.attendee);
            this.attendee = '';
          }
        },
        mounted () {
          this.attendees = ['Paul', 'Eugen', 'Ivan'];
        }
      });
    </script>
  </body>
</html>

Fig. 2

Bonus

transition

<style>
  .v-enter-active, .v-leave-active {
    transition: all 1s ease;
  }

  .v-enter, .v-leave-to {
    transform: translateY(100px);
    opacity: 0;
  }
</style>

<script>
  Vue.component('attendee-name', {
    template: `
      <transition>
        <li v-html="name"></li>
      </transition>
    `,
    props: ['name']
  });

  Vue.component('attendee-list', {
    template: `
      <div style="margin-top:20px;">
        <ol>
          <attendee-name v-for="attendee in attendees" :name="attendee"></attendee-name>
        </ol>
      </div>
    `,
    props: ['attendees']
  });
</script>

Fig. 3