插件通常会为 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) {
//扩展全局静态属性和方法
Vue.myName = '新插件';
Vue.getMyName = function(){
return '我是新插件';
};
//扩展对象的属性和方法
Vue.prototype.$count = 0;
Vue.prototype.$timer = function(sec,back){
return '创建计时器成功'
}
//注入组件
Vue.mixin({
created:function(){
console.log('MyPlugin扩展了钩子函数')
}
})
//扩展指令
Vue.directive('order',{
bind:function(el,binding){
el.innerText = '自定义指令：'+binding.value;
}
})
}
/**
* 挂载插件
*/
Vue.use(MyPlugin);
/**
* 测试插件
*/
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>
网友评论