Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue instruction how to prevent button connection". In daily operation, I believe many people have doubts about how to prevent button connection in vue instruction. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "vue instruction how to prevent button connection". Next, please follow the editor to study!

Hook function

Bind: called only once, the first time an instruction is bound to an element. One-time initialization settings can be made here.

Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

Update: called when the VNode of the component in which it is located is updated, but may occur before its child VNode update. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update

ComponentUpdated: called after the VNode and its child VNode of the component to which the instruction belongs are all updated.

Unbind: called only once, when the instruction is unbound from the element.

Hook function parameter

El: the element bound by the instruction that can be used to directly manipulate the DOM.

Binding: an object that contains the following property:

Name: instruction name, excluding the v-prefix.

Value: the binding value of the instruction, for example: in "1 + 1", the binding value is 2.

OldValue: the previous value bound by the instruction, available only in update and componentUpdated hooks. Available regardless of whether the value changes or not.

Expression: instruction expression in the form of a string. For example, in "1 + 1", the expression is "1 + 1".

Arg: the parameter passed to the instruction, optional. For example, in v-my-directive:foo, the parameter is "foo".

Modifiers: an object that contains modifiers. For example: in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.

The virtual node generated by vnode:Vue compilation. Move to VNode API for more details.

OldVnode: the last virtual node, available only in update and componentUpdated hooks.

Realize

Use in the page

Test connection {{I}} export default {data () {return {I: '6percent, j:' 56'}}, methods: {continuous (value) {this.i = value},},}

Under the directives.js file

Vue.directive ('preventDbClick', {bind (el, binding, vnode) {let timer el.addEventListener (' click') () = > {if (timer) {clearTimeout (timer)} timer = setTimeout (()) = > {let _ this = vnode.context / / binding.arg the value is the continuous of v-preventDbClick:continuous and the continuous is static / / official website instance v-mydirective: [argument] = "value" argument parameter can be entered according to the component instance data Line update / / binding.value is required to pass the parameter _ this [binding.arg] (binding.value)} 300)})})

Referencing in main.js

Import directives from'. / directives'Vue.use (directives) at this point, the study of "how to prevent buttons from being connected by vue instructions" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.