Vue-指令修饰符与自定义指令

1.内置指令 

通过"."指明一些指令后缀，不同后缀封装了不同的处理操作-->简化代码

1.按键修饰符

@keyup.enter ——>键盘回车监听

2.v-model修饰符

v-model.trim ——>去除首尾空格

v-model.number ——>转数字

3.事件修饰符

@事件名.stop ——> 组织冒泡

@事件名.prevent ——>阻止默认行为

2.自定义指令

作用：自己定义的指令，可以封装一些dom操作，扩展额外功能

基本使用 

需求：当页面加载时，让元素将获得焦点

操作dom：dom元素的focus()

1.普通写法

mounted(){

    this.$refs.inp.focus()

}

2.使用自定义属性

<input v-指令名 type='text'>

(1)全局注册(全部组件都可以使用)

//main.js中注册
Vue.directive('指令名',{
   //inserted：指令所在的元素被插入页面时触发
    "inserted"(el){
        //可以对el标签，扩展额外功能
        el.focus()
    }
})

（2）局部注册(指定组件使用)

 directives:{
     focus:{
         inserted(el){
             el.focus()
         }
     }
 }

 指令的值

<template>
  <div>
    <p v-focus="color1">123</p>
    <p v-focus="color2">123</p>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 1.页面中插入这个元素的时候触发
      inserted(el, binding) {
        el.style.color = binding.value;
        console.log(binding.value);
      },
      // 2.页面中修改这个元素的时候触发
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
  data() {
    return {
      color1: "yellow",
      color2: "blue",
    };
  },
  methods: {},
};
</script>

<style>
</style>

案例-封装v-loading

需求：未接收服务器数据时候，进行加载页面显示

通过封装指令v-loading实现请求的loading效果

思路：

1.准备类名loading，通过伪元素提供遮罩层

2.添加或移除类名，实现loading蒙层的添加移除

3.利用指令语法，封装v-loading通用指令

inserted钩子中，binding.value判断指令的值，设置默认状态

update钩子中，binding.value判断指令的值，更新类名状态

模板 

<template>
  <div class="main">
    <div class="box" v-loading="islodaing">
      <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>
  </div>
</template>

JS逻辑 

<script>
import axios from "axios";
export default {
  directives: {
    loading: {
      inserted(el, binding) {
        // binding.value ? el.classList.add('loading'):el.classList.remove('loading')
        //  添加遮罩层
        binding.value
          ? el.classList.add("loading")
          : el.classList.remove("loading");
      },
      update(el, binding) {
        // 当value为false时，移除遮罩层
        binding.value
          ? el.classList.add("loading")
          : el.classList.remove("loading");
      },
    },
  },
  data() {
    return {
      list: [],
      islodaing: true,
    };
  },
  async created() {
    const res = await axios.get("http://hmajax.itheima.net/api/news");
    console.log(res);
    setTimeout(() => {
      this.list = res.data.data;
      this.islodaing = false;
    }, 3000);
  },
};
</script>

 css样式

<style>
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./loading.gif") no-repeat center;
}

.box2 {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
  position: relative;
}

.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>