插件通常會(huì)為 Vue 添加全局的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用自定義指令 -->
<p v-order:value='message'></p>
</div>
<script>
/**
* 自定義插件
*/
var MyPlugin = {};
MyPlugin.install = function (Vue, options) {
//擴(kuò)展全局靜態(tài)屬性和方法
Vue.myName = '新插件';
Vue.getMyName = function(){
return '我是新插件';
};
//擴(kuò)展對(duì)象的屬性和方法
Vue.prototype.$count = 0;
Vue.prototype.$timer = function(sec,back){
return '創(chuàng)建計(jì)時(shí)器成功'
}
//注入組件
Vue.mixin({
created:function(){
console.log('MyPlugin擴(kuò)展了鉤子函數(shù)')
}
})
//擴(kuò)展指令
Vue.directive('order',{
bind:function(el,binding){
el.innerText = '自定義指令：'+binding.value;
}
})
}
/**
* 掛載插件
*/
Vue.use(MyPlugin);
/**
* 測(cè)試插件
*/
var vm = new Vue({
el:'#app',
data:{
message:'新指令'
},
created:function(){
console.log(Vue.myName);
console.log(Vue.getMyName())
console.log(this.$count)
console.log(this.$timer())
}
})
</script>
</body>
</html>
