It's a Vuetiful World

WTF is Vue?

WTF is progressive?

Not a monolith

Progressive?

"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

<!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!

Thanks for listening!