1.View.prototype
Vue.prototype.$axios = axios
//this.$axios
2.Vue.use()
//在使用 element时会先import,再Vue.use()一下,实际上就是注册组件,触发 install 方法;
Vue.use(Element)
window.$ = require("jquery") //挂载在window上
3.View.directive ()
//防止按钮重复点击,全局使用 v-preventClick
Vue.directive('preventClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 3000)
}
})
}
})
4.View.component ()
Global components are based on ordinary components, just create ordinary components into DOM
//dragResize.js
import VueDragResize from 'vue-drag-resize'
export default {
install() {
Vue.component("VueDragResize",VueDragResize)
}
};
//main.js
import VueDragResize from './utils/dragResize.js'
Vue.use(VueDragResize)
//需要导入多个组件
const requireComponent = require.context('./components', false, /\.(vue|js)$/)
requireComponent.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
const componentName = fileName.split('/').pop().split(".")[0]
// 全局注册组件
Vue.component(componentName, componentConfig.default)
})
//说明
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名
5.View.extend ()
Some of the vue components need to mount some elements to the element. At this time, extend will work.
Use Vue.extend() to construct a Vue subclass instance, then call the mount() method to generate the required DOM, and then get it The corresponding el instance is inserted into the DOM
import Vue from 'vue'
const toastMessage = Vue.extend({
template: '<div>{
{ text }}</div>',
data: function () {
return {
text: '发信息来啦'
}
}
})
const message = new toastMessage().$mount()
document.body.appendChild(message.$el)
6.View.filter ()
The value in the difference expression is passed from left to right, the previous value will be passed to the back as a parameter, and they are separated by a pipe character
<div id="app">
<p>{
{price | addPriceIcon | editPrice}}</p>
</div>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
addPriceIcon(value){
return '¥' + value
},
editPrice(value){
console.log(value)
return "吃饭：" + value
}
}
})
How to use it differently?
I believe that many people will use Vue.use() when using other people's components with Vue. For example: Vue.use (VueRouter), Vue.use (MintUI). But when using axios, you don't need to use Vue.use(axios), you can use it directly. So why is this?
Because axios does not use the install method
export default {
install(Vue) {
Vue.prototype.$get = (url, params = {
}) => {
return new Promise((resolve, reject) => {
axios.get(url, params)
.then(response => resolve(response.data))
.catch(error => reject(error))
})
}
Vue.prototype.$post = (url, params = {
}) => {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => resolve(response.data))
.catch(error => reject(error))
})
}
}
}