Tag: directive

Custom instructions (defineDirective) and hook functions (created, mounted, updated, unmounted) in Vue3

Directory Custom instructions Example 1 Example 2 hook function The relationship between custom instructions and hook functions This article mainly introduces the use of custom instructions and hook functions in Vue3 and the relationship between them. Custom directive In Vue3, custom directives are a way to extend Vue’s template syntax. Custom directives are actually a […]

How to customize directives in vue

1. What is a custom instruction The inline attributes that we see starting with v- are all instructions. Different instructions can complete or implement different functions, and perform low-level operations on ordinary DOM elements. At this time, custom instructions will be used. In addition to the default built-in directives of core functions (v-model and v-show), […]

Vue built-in directives and custom directives

1. Built-in command v-show : Description: Display elements according to conditions, true to display elements, false to hide elements <template> <div> <button v-show=”isShow”></button> </div> </template> <script> export default { name: ‘HomeView’, data() { return { isShow: false }; } }; </script> Note: v-show does not support writing on the template element tag, nor does it […]

VueEnlightenment! Template syntax – interpolation syntax & directive syntax

Template syntax Vue template syntax includes two major categories Interpolation syntax Interpolation syntax is two curly brackets, also called Mustache Function: Used to parse the content of the tag body. It can perform calculations, ternary expressions, etc., and insert the final parsed content into the tag. Writing method: {{xxx}}, xxx is a js expression, which […]

Vue3 custom directive (directive)

Article directory Preface 1. Vue3 instruction hook function 2. Two ways to customize instructions 1. Topical use Example 1: Authentication Example 2: Drag and drop 2. Global use Example 1: Monitoring width and height instructions Example 2: Monitor whether it appears in the viewport Summarize Foreword This article mainly talks about the use of custom […]

Vue3 template syntax – attributes, expressions, directives, parameters, modifiers, user input, abbreviations

Article directory Vue3 template syntax – attributes, expressions, directives, parameters, modifiers, user input, abbreviations 1. Concept 2. Interpolation 2.1 Text 2.2 HTML 3. Properties 4. Expression 5. Instructions 6. Parameters 7. Modifiers 8. User input 9. v-on command monitoring 10. Abbreviations Vue3 template syntax – attributes, expressions, instructions, parameters, modifiers, user input, abbreviations 1. Concept […]

Nginx uses the proxy_cache directive to set the reverse proxy to cache static resources

Scene Install Nginx by decompressing the tar package in CentOS7: How to install Nginx_centos7 tar file in CentOS7 by decompressing the tar package – Programmer Sought Refer to the above process to realize the establishment of Nginx, and realize the cache setting of static resources. Note that the above installation directory is in the /opt/nginx […]

Vue slots, custom directives, render functions, filters and plugins

Directory slot custom directive directive global registration partial registration hook function render rendering function filter plug-in plugin slot Normal slots, named slots, scoped slots Slots allow us to pass templates for subcomponents when calling them. The element acts as an outlet for hosting distribution content. A exit with no name will have the implicit name […]

Vue2 Section 10 Built-in directives and custom directives

1. Commands learned before 2. Built-in commands 3. Custom Instructions 1. Commands learned before Command name Usage v-bind A single binding analysis expression can be abbreviated as: xxx v-model Two-way binding v-for traverse array/object/string v-on Binding listener event, can be abbreviated as @ v-if Conditional rendering (dynamically control whether the node exists) v-else Conditional rendering […]