Notes

1
2
3
4
5
v-on:click="myFunc"
@click="myFunc"
v-bind:title="myString"
:title="myString"
  • data
  • methods
  • computed
  • props
  • You can chain filters in Vue templates.
  • watch While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. (e.g. debounce)
    1
    2
    watch: {
      myInput: _.debounce(function(){ this.buttonText = this.myInput !== '' ? "Add " + this.myInput : "Add Dinosaur" }, 250)

API:

  • v-on: v-on:click or @click
  • v-bind: v-bind:class or :class. We can use conditionally it with a boolean value as well like: :class="{ 'loading': isLoading }". You can combine multiple checks with an array <button class="[sizeToggle ? 'large' : '', {'rounded': isRounded}]" You can pass a style object, containing css styling key, value pairs.
  • v-text for writing text to a html element <li v-text="task.description"></li>
  • v-model
  • v-for for iterating v-for="task in tasks", you can also pass index <li v-for="(item, index) in items">
  • v-if=”“ for conditional rendering v-if="task.completed
  • v-else
  • v-show=”“
  • inline-template <progress-view inline-template>......</progress-view> converts html to template for component
  • v-html <div v-html="htmlToAdd"></div> you can insert HTML inside an element
  • v-pre <h1 v-pre></h1>
  • v-one <p v-one>...</p> Renders only one time, won’t re-render if data changes
  • v-cloak <div v-cloak></div> Won’t render until vue intiliazed and view is ready (you need to add to your css [v-cloak] { display: none; })
  • $emit: Emits events for parent component, you can use it as this.$emit methods or inline in template <button @click="$emit('toggle') and at parent component <todo @toggle="toggleTodo(todo)"></todo>
  • $on: For listening to events in components/instances
  • $event
  • $refs
  • $children
  • $data: this.$data for whole data object

  • event.eventmodifier: <form @submit.prevent="onSubmit"></form> .prevent == preventDefault()

  • <transition> is a component wraping your elements/components in order to add animation. You can also specify transition modes.

    1
    2
    3
    4
    5
    6
    7
    8
    <transition name="fade" mode="out-in">
      <div class="fade"></div>
    </transition>
    <style>
      fade {transition: opacity .5s ease;}
      fade-enter, fade-leave-acitve {opacity: 0;}
    </style>

Vue Router

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: App },
    { path: '/post/:id', component: Post }
  ]
})
  • VueRouter will render component inside <router-view></router-view> tag.
  • By default VueRouter uses /#/ mode. To use history mode add mode: 'history', if history mode is not supperted (IE9) it will fallback to hash mode.
  • To navigate between routes you need <router-link to="/post/1"> tag. It’ll add an <a> tag.