Why are my Vue custom directives not working?-CodePudding

I'm new with Vue and even newer with custom directives, I'm trying something basic, but it's just not working and I would like to know what's wrong, thank u! I have these two directives: one in main.ts:

app.directive('display', {
  beforeMount: (el, binding) => {
    el.style.display = binding.value
  }
})

one in App.vue:

app.directive('color', {
      beforeMount: el => {
        el.style.color = 'red'
      }
    })

Here I'm trying to use it but nothing happens:

    <h1
      
      v-display:none
      v-color
    >

If i hace to register them I don't know how, just trying i did this inside the of the Component FAQ ( the one I'm imp the directives ):

  directives: {
    color: {

    }
  }

CodePudding user response：

I think your custom directive definition might be correct, but wrong usage. Try using it like below:

<h1 
  
  v-display="`none`"
  v-color
>

The reason why you would wrap the word none in `` or '' is because if you just write v-display="none", Vue looks for a variable with the name none. Since there is no such variable, it returns undefined. When you write v-display="'none'", it passes a string none, hence, Vue can work it out.

I think v-color should work as intended. I made a working example if you want to refer to that as well.