It's a Vuetiful World

WTF is Vue?

Vue is ❤️️
Progressive framework for building user interfaces
Build SPA's + have UI change according to data
https://github.com/beatobongco/vuetiful-world

WTF is progressive?

Not a monolith

Progressive?

designed to be incrementally adoptable.
vue - view layer
vuex - centralized state manager
vue-router
...and so many more!
```
https://github.com/vuejs/awesome-vue 
```

"Another framework? Who cares?" or why I personally think you should use Vue

You just wanna get started. So let's do this!

Fire up your code editors

Import vue

https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js

<!DOCTYPE html>
<html>
<head>
  <title>It's a Vuetiful World!</title>
</head>
<body>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</body>
</html>

Hello, world!

...
  <div id="app">
    <p>It's a {{ message }} world!</p>
  </div>
...
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        message: "It's a Vuetiful World!"
      }
    })
  </script>

Try changing app.message in console!

Directives

...  
  <div id="app">
    <p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
  </div>
...

v- prefixed, apply special reactive behavior to DOM

Conditionals

...
  <div id="app">
    <p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
    <p v-if="message === 'Vuetiful'">Yes it is!</p>
  </div>
...

Loops

...
  <div id="app">
    <div v-for="message in messages">
      <p>It's a <span v-bind:title="message">{{ message }}</span> world!</p>
      <p v-if="message === 'Vuetiful'">Yes it is!</p>
    </div>
  </div>
...
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        messages: ['beautiful', 'Vuetiful', 'sexy']
      }
    })
  </script>
...

app.messages.push('Vuetiful')

Try this in your console....

Handling events, defining methods

...
  <div id="app">
    <div v-for="message in messages">
      ...
    </div>
    <input type="text" v-model="newMessage" v-on:keyup.enter="addMessage">
    <button v-on:click="addMessage">Add message</button>
  </div>
...
  <script type="text/javascript">
    ...
      methods: {
        addMessage: function () {
          this.messages.push(this.newMessage)
        }
      }
    ...
  </script>
...

Check out v-model! Two-way binding made EZ.

Computed Properties + Watchers

  ...
    <p>
      <small v-if="isTyping">{{now}} You were typing '{{newMessage}}' weren't you?</small>
    </p>
  ...
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        ...
        isTyping: false,
        msgTimeout: null,
      },
      ...
      computed: {
        now: function () {
          return new Date().toString().split(' ').slice(0, 4).join(' ') + ':'
        }
      },
      watch: {
        newMessage: function (m) {
          this.isTyping = true
          clearTimeout(this.msgTimeout)
          this.msgTimeout = setTimeout(function () {
            app.isTyping = false
          }, 1500)
        }
      }
    })
  </script>
</body>
</html>

Class bindings

...
<head>
  ...
  <style type="text/css">
    .active {
      outline: none;
      border: 2px solid tomato;
    }
  </style>
</head>
<body>
  ...
    <input type="text" ... v-bind:class="{ active: isTyping }">
  ...
</body>
...

You can bind style too!

...
  <div id="app">
    ...
    <button v-on:click="addMessage" v-bind:style="styleObject">Add message</button>
    ...
  </div>
...
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        ...
        styleObject: {
          textTransform: 'uppercase',
          fontWeight: '600'
        }
      },
      ...
    })
  </script>
...

It's that simple!

Just learn as you go. Add modules and shit as you need to. Learn about components later on when your app is bigger.

Vue grows with you!