Created by CyanHall.com
on 11/12/2020
, Last updated: 04/30/2021.
πΒ Β Star me if itβs helpful.
πΒ Β Star me if itβs helpful.
1. Binding
<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">
3. If else
<div v-if="type === 1">1</div>
<div v-else-if="type === 2">2</div>
<div v-else>3</div>
5. Iterate
<li
v-for="(item, index) in items"
:key="item.id">
{{ item }}
</li>
<li
v-for="(value, key) in object"
:key="value">
{{ value }}
</li>
7. Component
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() {}
})
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>
11. Vuex
new Vuex.Store({
state: {
userinfo: {}
},
mutations: {
userinfo(state, data) {
state.userinfo = data
}
}
}
this.$store.commit('userinfo', newUserinfo)
13. axios with file upload progress
// 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))
}
2. Event
<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">
4. display: none
<div v-show="isShow">show</div>
6. Custom event
// html
<my-component @my-event="myEvent"/>
// my-component
this.$emit('myEvent', data)
8. `v-model` on custom component
// 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)
}
}
})
10. Copy
const newData = Vue.util.extend({}, data)
12. axios example codes that records current requests, and can cancel repeated requests
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
})
More