Vue.js 速查表

Vue.js 速查表

January 9, 2020
速查表
★ 在 GitHub 赞我

以下内容基于 Vue.js 2.x


绑定:

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

If else:

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

display: none

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

组件

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() {}
})

自定义组件:

<my-component @my-event="myEvent"/>
// my-component
this.$emit('myEvent', data)

在自定义组件中使用 v-model:

<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)
    }
  }
})

Slot:

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

Vuex:

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

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

axios 示例代码,记录当前的请求,可取消重复的请求:

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
})