插件
功能 :用于增强Vue
本质 :包含install方法的一个对象,install方法的参数:
- 第一个参数是Vue实例对象
- 第二个及之后的参数是插件使用者传递的参数
定义插件
- 在src文件夹下新建一个pulgins.js文件
- 在其中写入install方法和其他想实现的功能
export default {
install(Vue,username) {
console.log(username)
// 全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
// 全局指令
Vue.directive('fbind', {
bind(element, binding) {
element.valur = binding.value;
},
inserted(element) {
element.focus();
},
update(element, binding) {
element.value = binding.value;
}
})
// 混入
Vue.mixin({
data() {
return {
x: 100,
y: 200
}
}
})
// 给Vue原型添加方法
Vue.prototype.hello = () => {
alert('Hello!')
}
}
}
使用插件
- 在main.js中对其进行引入和使用
// 使用插件
import plugins from '@/plugins'
Vue.use(plugins,'李四')
scoped样式
作用: 让样式在局部生效,防止页面间样式污染
写法: 在各子组件的style标签中配置scoped属性
//Student组件
<style scoped>
.student{
background-color: tomato;
}
</style>