目录

一、插件

二、scoped样式

一、插件

功能&＃xff1a;用于增强Vue

本质&＃xff1a;包含install方法的一个对象&＃xff0c;install的第一个参数是Vue&＃xff0c;第二个以后的参数是插件使用者传递的数据

定义插件&＃xff1a;

对象.install &＃61; function (Vue, options){// 1. 全局过滤器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 配置全局混入(合)Vue.mixin(...)// 4. 添加实例方法Vue.prototype.$myMethod &＃61; function() {...}Vue.prototype.$myProperty &＃61; xxx
}

使用插件&＃xff1a;

Vue.use()

采用默认暴露有两种写法

第一种写法&＃xff1a;

const obj &＃61; {install(Vue,参数1,参数2,...) {// 1. 全局过滤器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 配置全局混入(合)Vue.mixin(...)// 4. 添加实例方法Vue.prototype.$myMethod &＃61; function() {...}Vue.prototype.$myProperty &＃61; xxx},
};export default obj;​

第二种写法&＃xff08;简写&＃xff09;&＃xff1a;

export default {install(Vue,参数1,参数2,...) {// 1. 全局过滤器Vue.filter(...)// 2. 添加全局指令Vue.directive(...)// 3. 配置全局混入(合)Vue.mixin(...)// 4. 添加实例方法Vue.prototype.$myMethod &＃61; function() {...}Vue.prototype.$myProperty &＃61; xxx},
};


简单案例练习

plugins.js -- 定义插件

export default {install(Vue) {// 全局过滤器Vue.filter("mySlice", function (value) {return value.slice(0, 4);});// 定义全局指令Vue.directive("fbind", {bind(element, binding) {element.value &＃61; binding.value;},inserted(element, binding) {element.focus();},updated(element, binding) {element.value &＃61; binding.value;},});// 定义混入Vue.mixin({data() {return {x: 1,y: 2,};},});// 给Vue原型上添加方法 &＃xff08;vm和vc都可以使用&＃xff09;Vue.prototype.hello &＃61; () &＃61;> {alert("hello world");};},
};


main.js -- 引入并使用插件&＃xff08;plugins&＃xff09;

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";
// 引入插件
import plugins from "./plugins";
// 使用插件
Vue.use(plugins);Vue.config.productionTip &＃61; false;// 创建vm
new Vue({el: "#app",render: (h) &＃61;> h(App),
});


Game.vue -- 使用plugins.js中的全局过滤器和定义的hello方法

 由图可看出&＃xff0c;游戏名只截取了前4个字&＃xff0c;且点击按钮能够实现弹窗

Player.vue - 使用plugins.js中的全局指令

由图可看出input框获取到了name值 

plugins.js中的定义混入&＃xff08;mixin&＃xff09;体现

由图可看出&＃xff0c;Vue实例每一层data数据内都有x和y

二、scoped样式

作用&＃xff1a;让样式在局部生效&＃xff0c;防止冲突

写法&＃xff1a;

简单案例练习

让Game组件和Player组件命名相同class&＃xff0c;并设置不同背景色

Game.vue

Player.vue

由下方图示可看出&＃xff0c;即使class命名相同&＃xff0c;添加了scoped样式后&＃xff0c;两个组件的样式渲染上处于独立的

而如果没有添加scoped样式&＃xff0c;则会出现覆盖的情况。最终展示样式渲染&＃xff0c;取决于在App.vue中引入的先后顺序&＃xff0c;后面引入组件的在class命名相同的情况下&＃xff0c;会覆盖前面引入的组件

App.vue

由图示可看出&＃xff0c;最终样式背景色渲染取决于Game.vue组件