1.Vue.prototype
Vue.prototype.$axios = axios
//this.$axios
2.Vue.use()
//在使用 element时会先import,再Vue.use()一下,实际上就是注册组件,触发 install 方法;
Vue.use(Element)
window.$ = require("jquery") //挂载在window上
3.Vue.directive()
//防止按钮重复点击,全局使用 v-preventClick
Vue.directive('preventClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 3000)
}
})
}
})
4.Vue.component()
全局组件是在普通组件的基础上，将普通组件创建至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.Vue.extend()
vue 组件中有些需要将一些元素挂载到元素上,这个时候 extend 就起到作用了
用Vue.extend()构造出一个Vue子类实例，然后调用mount( ) 方法生成需要的DOM，再拿到对应的el实例，插入到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.Vue.filter()
差值表达式里的值从左向右传递，前面的值会以参数的形式传递给后面，它们之间以管道符分割
<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
}
}
})
如何区别使用?
相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？
因为 axios 没有 使用install方法
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))
})
}
}
}