Vue custom instruction implementation method

The instance of this article describes the Vue custom instruction implementation method. Share to everyone for your reference, as follows:

The instruction in VUE is V-ON V-BIND V-Show, so the custom instruction is?

The instruction defined is the custom instruction.

Vue.directive (ID, definition)

Here you can refer to the instructions in Vue


Where IF is the instruction ID, YES is Expression

Vue.directive () Parameters accept two parameters, ID refers to the instruction ID, definition refers to the definition object. Where defined objects can provide some hook functions.


– INSERTED: When the binding element is inserted into the parent node (only guaranteed the father The node exists, but it is not necessarily inserted into the document).

  • hook function parameters

    EL: The element bound to the instruction can be used to direct DOM directly.
  • Binding: an object that contains the following properties:
  • such as name, value, expression, rawName etc.
In order to better operate the DOM

[ The example is as follows, letting the color of the P tag becomes red. Add a custom instruction for the V-Color to the P tag.

I am a custom directive

Red binding variables inside DATA

I am a custom directive

also supports strings

// Register a global custom instruction Vue.directive (‘color’, {INSERTED: Function (EL, Binding) {console.log (el, binding) = binding.value}}) New Vue ({EL: ‘# app’, data: {red: ‘red’}
     Local registration example      

I am a custom directive New Vue ({EL: '# APP', DATA : {red: 'red'}, Directives: {color: {// instruction definition Inserted: function (el, binding) { = binding.value}}}})

For example, make a mouse roller event to the sidebar.
However, it is necessary to compatibility, and the rude gives an ONMOUSEWHEEL is not right because it will not be executed at all in Firefox browser. What should I do?
      Document   #ScrollWrap {Width: 200px; Height: 800px; Background: #ccc;}   
I am a sidebar

New Vue ({EL: '# app', Data: {red: 'red', mousewheel: 'Roller Event'}, Directives: {scrollfn: {// instructions Inserted: function (el, binding) {var useragent = window.navigator.USERAGENT // Take Uses To IF ('Firefox')> -1) {Console.log ('is Firefox Browser') El.addeventListener ('Dommousescroll', Function (E) {Console.log (E.Detail)}}}} else {console.log ('is not Firefox') El.addeventListener ('Mousewheel', Function (E) {Console.log (E.wheeldelta)}}}}}})
It is desirable to design help with the Vue.js program for everyone this article.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment