Tag: directive

Directives and Vue.js Template Syntax

Command 1. Built-in commands 1.1 v-show 1.2 v-if / v-else-if / v-else 1.3 v-for 1.4 v-bind 1.5 v-model 1.6 v-on 1.7 v-text 1.8 v-html 1.9 v-once 1.10 v-pre 1.11 v-cloak 1.12 v-slot 2. Custom commands 2.1 Registration of custom instructions 2.2 Hook function Custom instructions can contain different hook functions to perform different operations in […]

Custom instruction directives: anti-shake, throttling, element-ui’s infinite scroll package used on el-table

Vue official website for the introduction of custom instructions add link description In addition to the default built-in directives for core functionality (v-model and v-show), Vue also allows custom directives to be registered. Note that in Vue2.0, the main form of code reuse and abstraction is components. However, in some cases, you still need to […]

Is it a custom directive? What are the application scenarios of custom commands?

[What is the function]: It can perform low-level operations on ordinary DOM, such as focusing on the input box. [How to use]: You can register a directive globally through Vue.directive, or register locally through directives inside the component. Its commonly used hooks are inserted, which means that it is called when the bound element is […]

Vue3 custom directive html element level authentication

The number of life cycle hooks after Vue3 transformation has become seven, and the names have become easier to remember. After the front end obtains the operation permission data, it converts it and stores it in sessionStorage. The converted permission data is roughly as follows {<!– –> “UserMgr”: [“add”, “edit”], “RoleMgr”: [“add”, “edit”] } Through […]

vue3_custom instruction directive

1. Custom command registration method In Any camel-cased variable starting with v can be used as a custom directive // Enable v-focus in the template const vFocus = { mounted: (el) => el. focus() } Without export default { setup() { /*…*/ }, directives: { // enable v-focus in the template focus: { /* … […]

OpenCL Programming Guide – 4.5 Keywords – Preprocessing Directives – Macros – Restrictions

Keywords The following names are reserved as keywords in OpenCLC and cannot be used otherwise: 1) Names already reserved as keywords by C99. 2) OpenCL C data types. 3) Address space qualifiers: __global, global, __local, local, __constant code>, constant, __private, and private. 4) Function qualifiers: __kernel and kernel. 5) Access qualifiers: __read_only, read_only, __write_only, write_only, […]

Several practical v-directive instructions

Paste a few instructions for daily use import elementResizeDetectorMaker from ‘element-resize-detector’ import {<!– –> isObject } from ‘lodash-es’ const unit = (value) => (String(value). endsWith(‘%’) ? ” : ‘px’) function hasClass(el, cls) {<!– –> if (!el || !cls) return false if (cls.indexOf(‘ ‘) !== -1) throw new Error(‘className should not contain space.’) if (el. classList) […]

Vue – Custom Directives

Directory introduce? command hook? Simplified form? Object literal? Used on components? Introduction? In addition to a series of directives built into Vue (such as v-model or v-show), Vue also allows you to register custom directives (Custom Directives). We’ve covered two ways of reusing code in Vue: components and composite functions. Components are the main building […]

Vue (built-in directives, custom directives)

1. Built-in directive 1. v-text Similar to interpolation syntax <h2>{<!– –>{name}}</h2> <h2 v-text=”name”>The data bound by v-text here replaces all the content in the label</h2> //vue data: { name: “xlf”, }, Note: tag data is not recognized <h2 v-text=”name2″>Will not parse content</h2> //vue data: { name2: “<h3>Hello</h3>”, }, 2.v-html: Solve the defect that v-text cannot […]