vue-04-自定义指令

￡神魔★判官ぃ 2023-07-25 13:00 11阅读 0赞

vue的自定义指令和上一篇的过滤器一样，也分为全局自定义指令，和组件内的自定义指令

vue的指令都是以v-开头的，所以自定义的vue指令也不例外，v-开头，后面的指令名称自定义

1、全局自定义指令

在main.js内部实现该指令

1.1、不带参数的自定义指令

例如我在这个h2标签中添加了一个自定义指令，但是单纯的添加指令是无效的，我们需要在main.js文件内部实现这个指令

<h2 v-texTcolor>{
       {blog.title}}</h2>

在 Vue 下面的 directive 就是专门来实现自定义指令的，存在两个参数，

第一个参数是字符串，字符串内部就是自定义的指令名称，（ps：这里的名称不能带on）

第二个参数是一个对象，对象内部存在一个bind钩子函数，一个inserted钩子函数，一个update钩子函数，该方法内部也存在三个参数，

*  `bind`：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
 *  `inserted`：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
 *  `update`：所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

钩子函数的参数：

第一个是el，也就是这个指令绑定的对象，可以用来直接操作 DOM。

第二个则是binding可以来对页面进行操作，通过取到 binding内部的属性来操作当前页面的状态

第三个参数是vnode，也就是虚拟dom节点

//自定义指令，改变标题颜色随机
    Vue.directive('texTcolor' , {
      bind(el , binding ,vnode){
        el.style.color = '#' + Math.random().toString(16).slice(2,8)	//取0≤？＜1的数字，然后转化为16进制的数值，截取第二位到第八位，然后拼接上前面地 # 键，形成颜色值
      }
    })

这个自定义指令在main.js文件内部实现之后，表现出来的就是，我页面上的所有h2标签每次刷新颜色都是随机的

1.2、带参数的自定义指令

可以看到我在最外层 div 上添加了 一个自定义的指令 v-theme，这个指令后面戴上了参数，这里需要注意的是，这个参数可以为对象，数组，字符串等等类型，但是，在参数为字符串的时候，需要在加上一层单引号将字符串包裹

<template>
        <div id="show-blogs" v-theme="'narrow'">
        <h1>博客总览</h1>
        <input type="text"  placeholder="搜索">
        <div  class="single-blog" v-for="blog in blogs">
            <h2 v-texTcolor>{
       {blog.title}}</h2>
            <article>
                {
       {blog.body}}
            </article>
        </div>
      </div>
    </template>
    
    //自定义指令，改变宽度
    Vue.directive('theme' , {
      bind(el , binding , vnode){
    
        if (binding.value == 'wide') {
    
          el.style.maxWidth = '1200px'
    
        } else if(binding.value == 'narrow'){
    
          el.style.maxWidth = '560px'
        }
      }
    })

同上所说，binding可以用来显示绑定的参数，以此来加以判断，若是自定义指令的参数满足某种条件，则执行下一步代码，这里是判断自定义指令的参数值是否为 wide 或 narrow 以此来规定最外层盒子的最大宽度

1.2、带 动态参数  的自定义指令

同时，我们除了v-for、v-text等等直接带参数的指令，也经常使用v-on：click=“”，这一类的带 :xxxx 的指令，这里我们也可以使用自定义指令来实现

很明显，我在最外层的自定义指令上添加了 :column 这个属性，而在自定义指令内部，可以通过  binding.arg  来取到这个动态参数

ps：column 属性值可以在data 内部定义变量来实现动态改变

<template>
        <div id="show-blogs" v-theme:column="'narrow'">
        <h1>博客总览</h1>
        <input type="text"  placeholder="搜索">
        <div  class="single-blog" v-for="blog in blogs">
            <h2 v-texTcolor>{
       {blog.title}}</h2>
            <article>
                {
       {blog.body}}
            </article>
        </div>
      </div>
    </template>
    
    //自定义指令，改变宽度
    Vue.directive('theme' , {
      bind(el , binding , vnode){
        if (binding.value == 'wide') {
          el.style.maxWidth = '1200px'
        } else if(binding.value == 'narrow'){
          el.style.maxWidth = '560px'
        }
        
        //在这里获取动态参数，进行页面渲染
        if(binding.arg == 'column'){
          el.style.background = '#666'
        }
      }
    })

2、组件内部自定义指令

类似的，组件内的自定义指令，directives 代表的就是组件内部的自定义指令集合，所有的自定义指令都写在内部，而且，每个自定义指令都是一个对象

texTcolor、theme都是自定义组件名字，字符串参数 'narrow' 必须这样写 ，用 binding.value 来接收、column 需要用 binding.arg来接收

<template>
        <div id="show-blogs" v-theme:column="'narrow'">
            <h1>博客总览</h1>
            <input type="text"  placeholder="搜索" v-model="search">
            
            <h2>{
       {search}}</h2>
            <div  class="single-blog" v-for="blog in scarchBlogs">
                <h2 v-texTcolor>{
       {blog.title | to-upcase}}</h2>
                <article>
                    {
       {blog.body | overflower}}
                </article>
            </div>
        </div>
    </template>
    
    
    directives: {
        'texTcolor' : {
            bind(el ,binding , vnode){
                el.style.color = '#' + Math.random().toString(16).slice(2,8)
            }
        },
        'theme':{
            bind(el , binding , vnode){
                if (binding.value == 'wide') {
                    el.style.maxWidth = '1200px'
                }else if (binding.value == 'narrow') {
                    el.style.maxWidth = '560px'
                }
    
                if (binding.arg == 'column') {
                    el.style.background = '#ddd'
                }
            }
        }
    }