Vue Js All I need to know

VueJs appears to have combined the best parts of AngularJs and React. I’m gonna love Vue Js until I fucking hate it. Until that time, I’ll try to write a cheat sheet.

Lazily include vue.js into your project

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Super simple example

In this framework, you write actual html, {{ mustaches }} can hook into the javascript and data of your components.

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">{{ message }}</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Template Shit

v-if v-else v-for v-on v-on:click

That in action…

<div id="app-3">
  <button v-on:click="seen = !seen">Toggle</button>
  <transition name="fade">
    <p v-if="seen">Now you see me</p>
  </transition>
</div>
<script>
var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})
</script>

<div id="app-4">
<ol>
  <li v-for="todo in todos">{{ todo.text}}</li>
</ol>
</div>
<script>
var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: 'Learn Javascript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
    }
})
</script>

Computed Properties, Filters and Methods

I once knew which one was what. They’re all similar.

Filters are for simple string manipulations. Methods are used when you’re watching. Computed Properties are used for everything else.

Below is an example of reversing the message using methods, filters and computed properties.

<div id="app5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
    el: '#app5',
    data: {
        message: 'Hello Vue.js'
    },
    methods: {
        reverseMessage: function() {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

<div id="computed-properties-example">
    <p>Original message: "{{ message}}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Filter reversed message: "{{ message | reversedMessage }}"</p>
</div>
var computedPropertyExample = new Vue({
    el: '#computed-properties-example',
    data: {
        message: 'Hello'
    },
    filters: {
        reversedMessage: function(value) {
            return value.split('').reverse().join('')
        }
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('')
        }
    }
})

Post Content