vue自定义指令

真的想不出名儿

已于 2023-08-22 21:43:26 修改

阅读量114

点赞数

分类专栏： vue基础语法文章标签： vue.js 前端

于 2023-06-25 18:00:58 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/131381613

版权

vue基础语法专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了Vue框架中如何创建和使用自定义指令，包括局部注册和全局注册两种方式。通过示例展示了v-focus和v-color指令的实现，以及如何传递参数来改变元素样式。同时，还提及了一个使用axios获取数据时显示加载状态的应用场景。

摘要由CSDN通过智能技术生成

自定义指令

除了核心功能默认内置的指令(v-model 和 v-show)，vue允许我们注册自定义指令。v-xxx
html + css的复用的主要形式是组件
你需要对普通DOM元素进行底层操作，这时候就会用到自定义指令
目标：获取标签，拓展额外的功能

局部注册和使用

<template>
  <div>
    <div class="main">
      <input type="text" v-focus>
    </div>
  </div>
</template>

<script>
/* 
局部指令
directives: {
  '指令名': {
    bind(el,binding,vnode){},
    inserted(el,binding,vnode){}
  }
}
在标签上使用自定义指令  v-指令名

inserted 指令所在标签 被插入到页面上触发(一次)
update 指令对应的数据 / 标签更新时触发
*/
export default {
  directives: {
    // 页面加载时获取焦点
    focus: {
      inserted(el, binding, vnode) {
        console.log(el)
        el.focus()
      }
    }
  }
}
</script>

全局注册和使用

在任何的.vue文件中使用

main.js中用 Vue.directive 全局注册指令

// 全局注册
Vue.directive('gfocus', {
  inserted(el) {
    el.focus()
  }
})

自定义指令传值

使用自定义指令，传入一个值

el.style.color = binding.value
其中binding.value表示指令的绑定值v-color="theColor"中的theColor
需求：定义color指令，传入一个颜色。给标签设置文字颜色

<template>
  <div>
    <div class="main">
      <input type="text" v-focus>
      <input type="text" v-gfocus>
    </div>
    <p v-color="theColor" @click="changeColor">修改文字颜色</p>
  </div>
</template>

<script>
/* 
局部指令
directives: {
  '指令名': {
    bind(el,binding,vnode){},
    inserted(el,binding,vnode){}
  }
}
在标签上使用自定义指令  v-指令名

inserted 指令所在标签 被插入到页面上触发(一次)
update 指令对应的数据 / 标签更新时触发
*/
export default {
  data() {
    return {
      theColor: 'red',
    }
  },
  methods: {
    changeColor() {
      this.theColor = 'blue'
    }
  },
  directives: {
    // 页面加载时获取焦点
    focus: {
      inserted(el, binding, vnode) {
        console.log(el)
        el.focus()
      }
    },
    // 给标签设置文字颜色
    color: {
      inserted(el, binding) {
        console.log(binding)
        el.style.color = binding.value
      },
      update(el, binding) {
        console.log(123)
        el.style.color = binding.value
      }
    },
  }
}
</script>

axios获取数据时显示加载状态

App.vue

<template>
  <div id="app" v-loading="isLoading">
    <ul>
      <li v-for="item in list">{{ item.bookname }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: [],
      isLoading: true
    }
  },
  directives: {
    loading: {
      inserted(el, binding) {
        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() {
    let res = await axios({
      url: 'http://hmajax.itheima.net/api/books',
      params: {
        creator: '老练',
      }
    })
    console.log(res.data.data);
    setTimeout(() => {
      this.list = res.data.data
      this.isLoading = false
    }, 1000)
  }
}
</script>

<style scoped lang="less">
#app {
  width: 300px;
  height: 300px;
  border: 1px solid purple;
  margin: 200px auto;
}

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