Cyan Hall C H
CyanHall.com 创建。上次更新:11/25/2020 👉  

1. 绑定

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

2. 事件

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

3. If else

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

4. display: none

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

5. 历遍

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

6. 自定义事件

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

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

7. 自定义组件

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

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

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

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

10. 复制

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

11. Vuex

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

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

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