插件作用:
(1)添加全局方法或者 property。如：vue-custom-element
(2)添加全局资源：指令/过滤器/过渡等。如 vue-touch
(3)通过全局混入来添加一些组件选项。如 vue-router
(4)添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
(5)一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
1、使用:
Vue.use(对象,{传递参数}); 对象必须提供.install方法
(1)实质是:调用对象.install(Vue),如果对象是函数,则直接调用
(2)在new Vue()之前使用
(3)会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。
1.5、Node等环境使用插件必须显示调用:
官方提供的一些插件(例如 vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。
然而在像CommonJS这样的模块环境中,var Vue = require('vue')
var Vue = require('vue')
var VueRouter = require('vue-router')
Vue.use(VueRouter) 不要忘了调用此方法
2、语法
let x={
install:function(Vue,传递参数)
{
Vue为由Vue的createApp生成的app对象
1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
...
}
2.5 添加全局provide
Vue.provide('i18n', options)
2. 添加全局指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
...
}
...
})
3. 混入
Vue.mixin({
created: function () {
...
}
...
})
4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
...
}
如:自定义一个组件,并挂载到html上
1、import导入组件
该组件不具有$mount和$el方法,无法获取到组件dom并挂载到html
2、Vue.extend(组件对象),返回组件构造器
Vue.extend(),接收一个组件对象作为参数,返回其构造器
3、通过new 返回的构造器,获取到组件实例
(1)这时的组件实例具有了$mount和$el方法
(2)Vue实例在实例化时没有收到el选项,则它处于“未挂载”状态,没有关联的 DOM 元素,所以$el为undefined
(3)$mount手动地挂载一个未挂载的实例
4、组件实例.$mount(选择器/dom对象),将组件挂载到dom对象上
实例.$mount(),会替换挂载的dom对象,所以不能直接用html内已有对象,
document.createElement创建一个任意dom或者不传参数(即文档之外的的元素)即可
5、将组件的dom元素,插入到html内
document.body.appendChild(实例.$el)
此时组件已经被插入到了html内
6、将该组件放在Vue原型上，使得在项目内任意位置可调用该实例及其内部属性/方法
Vue.prototype.$x=组件实例
5、注册全局组件
Vue.component(组件名称,组件对象)
}
}
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id='app'>
//使用插件内的指令、方法、变量
<div v-my-directive >
{{this.$my()}}
</div>
{{this.$color}}
</div>
<script>
let lcPlugin={
install:function(Vue)
{
console.log('安装插件')
//添加全局方法
Vue.myGlobalMethod=function(){
console.log(1);
document.body.style.color='red';
};
//添加全局属性
Vue.prototype.$color='red';
//添加全局指令
Vue.directive('my-directive',{
bind(el,binding,vnode,oldnode){
el.innerHTML='哈哈';
}
});
//注入混合属性
Vue.mixin({
created:function(){
console.log('生命周期');
}
});
//添加示例对象方法
Vue.prototype.$my=function(){
console.log(this);
console.log(2);
Vue.myGlobalMethod()
}
//自定义插件,Toast为import导入的组件
//创建组件构造器
let Profile=Vue.extend(Toast);
//创建组件对象,具有了$el获取组件内部dom
let toast=new Profile()
console.log(toast);
//将组件对象挂载到任意元素,不能是文档流已有元素,因为会替换
toast.$mount(document.createElement('div'));
//会替换挂载的元素,所以$el为当前组件dom
document.body.appendChild(toast.$el)
Vue.prototype.$toast=toast;
}
}
Vue.use(lcPlugin);
let app=new Vue({
el:'#app'
})
</script>
</body>
</html>
5260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
