目录
插件
scoped样式
Todo-list案例
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件:
对象.install=function(Vue,options){
//1.添加全局过滤器
Vue.filter(...)
//2.添加全局指令
Vue.directive(...)
//3.配置全局混入(合)
Vue.mixin(...)
//4.添加实例对象
Vue.prototype.$myMethod=function(){...}
Vue.prototype.$myProperty=xxxx
}
使用插件
Vue.use()
plugins.js
export default{
install(Vue){
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
// 定义全局指令
Vue.directive("fbind", {
// 指令与元素成功绑定时(一上来)
bind(element, binding) {
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
})
// 定义混入
Vue.mixin({
data(){
return{
x:100,
y:200
}
}
})
// 给Vue原型尚添加一个方法(vm和vc就都能用)
Vue.prototype.hello=()=>{alert('你好啊!!')}
}
}
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import plugins from './plugins'
// 关闭Vue的生产提示
Vue.config.productionTip=false
// 应用(使用)插件
Vue.use(plugins)
// 创建vm
new Vue({
el:'#app',
render:h=>h(App)
})
scoped样式
作用:让样式在局部生效,防止冲突
写法:
<style scoped>
School.vue
<template>
<div class="demo">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ address }}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "尚硅谷atguigu",
address: "北京",
};
},
};
</script>
<!-- 默认css -->
<!-- <style scoped>
.demo{
background-color: skyblue;
}
</style> -->
<style lang="less">
.demo {
background-color: skyblue;
.atguigu {
font-size: 40px;
}
}
</style>
Todo-list案例