wordpress网站变灰优化方案模板

一、自定义指令

使用步骤

1、自定义指令（全局）

 Vue.directive("指令名"，{   指令的配置项  inserted ()  { }    }

2、自定义指令（局部）

3、指令的值

 指令值的语法：

<div v-color="color">我是内容</div>

directives: {//color自定义指令名
//参数1:当前加了指令的标签
//参数2:获取指令值，binding.value
----------------------------------------------------------
color: {
//------------------------------------------加载在标签上-----
inserted (el, binding) {
el.style.color = binding.value
},
//指令的值被修改的时候自动触发update钩子-----------改值--------
update (el, binding) {
el.style.color = binding.value
}
}
}

v-loading指令封装-简单练

App.vue

<template><div id="app"><h1 v-color="color1">自定义指令</h1><h1 v-color="color2">自定义指令</h1></div>
</template><script>
export default {
data(){return{color1:'red',color2:'blue',}
},
//自定义指令的值
directives:{color:{// 指令加载在标签时//参数1:加自定义指令的标签（当前加了指令的便签）,参数2:获取指令值，binding.valueinserted(el,binding){console.log(el,binding)// <h1>自定义指令</h1>  redel.style.color=binding.value},// 指令的值被修改的时候自动触发update钩子update(el,binding){el.style.color=binding.value}}
}
}
</script>
<style>
</style>

例：v-loading加载中...

<template><div class="box" v-loading="isLoading">//----------------------使用自定义命令------<ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div>
</template>
<script>
// 用添加删除类名loading的方式控制是否加载 → 布尔数据控制添加删除类 → 指令值 默认是true 请求回数据false
// 指令要修改值 → 指令得有值 → 2个钩子都要写----// 安装axios =>  yarn add axios
import axios from 'axios'
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {data () {return {list: [],isLoading: true//----------------------------默认刚打开页面是加载中------}},//------------------------------------封装自定义指令----------------------directives: {loading: {inserted (el, binding) {// isLoading值为true 添加类名，否则删除类名// this.isLoading ? el.classList.add('loading') : el.classList.remove('loading')binding.value ? el.classList.add('loading') : el.classList.remove('loading')},//值被修改时---------------------等请求回数据时，移除加载中图片的显示（）update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.datathis.isLoading = false}, 2000)}
}
</script><style>
/* 通过css添加一个伪元素 → 假的标签 */
.loading::before {/* 必填属性 */content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* center 一个center表示背景图位置 水平和垂直都居中 */background: #fff url(./loading.gif) no-repeat center;
}
.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

二、插槽

作用：让组件内部的一些 结构 支持 自定义。只有两种插槽（默认+具名）

没有名字的（默认插槽），有名字的（具名插槽）name="xxx"

当组件内某一部分结构不确定--------用插槽 slot 占位封装

1：默认插槽

2：具名插槽 

具名插槽语法:

3 ：插槽 - 作用域插槽

作用域插槽：传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。