Vue.js 2 Cheatsheet

    <div>Hello {{ nameVar }}</div>
<a :href="getUrl()">...</a>
<button :disabled="isDisabledVar"></button>
<div :class="{ active: isActive }"></div>
<div :style="{ color: activeColor }">
<input v-model.lazy="nameVar"> <!-- Delay input event -->
<input v-model.number="nameVar">
<input v-model.trim="nameVar">
  

    <button @click="clickBtn"></button>
<!-- prevent default behavior -->
<form @submit.prevent="submit"></form>
<!-- only trigger once> -->
<img @mouseover.once="showImage">
<!-- enter is pressed> -->
<input @keyup.enter="onEnter">
<!-- enter is pressed> -->
<input @keyup.ctrl.c="onCtrlC">
  

    <div v-if="type === 1">1</div>
<div v-else-if="type === 2">2</div>
<div v-else>3</div>
  

    <div v-show="isShow">show</div>
  

    <li
  v-for="(item, index) in items"
  :key="item.id">
  {{ item }}
</li>
<li
  v-for="(value, key) in object"
  :key="value">
  {{ value }}
</li>
  

    // html
<my-component @my-event="myEvent"/>

// my-component
this.$emit('myEvent', data)
  

    Vue.component('my-component', {
  components: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  template: '<span>{{ message }}</span>',
  // Lifecycle
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated(),
  beforeDestroy() {},
  destroyed() {}
})
  

    // html
<my-component v-model="var"/>

// Get a value and emit an input
Vue.component('my-component', {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    someFunc() => {
      this.$emit('input', data)
    }
  }
})
  

    <div class="container">
  <div>
    <slot name="header"></slot>
  </div>
  <div>
    <slot>Content</slot>
  </div>
</div>

<!-- Usage -->
<div>
  <h1 slot="header">title</h1>
  <div> ...content...</div>
</div>
  

    const newData = Vue.util.extend({}, data)
  

    new Vuex.Store({
  state: {
    userinfo: {}
  },
  mutations: {
    userinfo(state, data) {
      state.userinfo = data
    }
  }
}

this.$store.commit('userinfo', newUserinfo)
  

    import axios from 'axios'

const CancelToken = axios.CancelToken

const instance = axios.create({
  baseURL: process.env.baseUrl || '[url]'
})
const pendingRequest = {}

instance.interceptors.request.use(
  function(config) {
    const url = config.url
    if (pendingRequest[url] && pendingRequest[url].cancel) {
      pendingRequest[url].cancel('Operation canceled due to new request.')
    }
    const source = CancelToken.source()
    config.cancelToken = source.token
    pendingRequest[url] = source
    if (!pendingRequest[url]) {
      pendingRequest[url] = true
    }
    const token = window.localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = token
    }
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)
instance.interceptors.response.use(
  function(response) {
    let url = response.config.url
    delete pendingRequest[url]
    if (Object.keys(pendingRequest).length === 0) {
      console.log('no requests now.')
    }
    return response
  },
  function(error) {
    // do something
  }
}

instance.get(url, {params: data}).then(response => {
  // do something
})
  

    // From https://gist.github.com/virolea/e1af9359fe071f24de3da3500ff0f429
upload(files) {
  const config = {
    onUploadProgress: function(progressEvent) {
      var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      console.log(percentCompleted)
    }
  }

  let data = new FormData()
  data.append('file', files[0])

  axios.put('/endpoint/url', data, config)
    .then(res => console.log(res))
    .catch(err => console.log(err))
}