Vue Tip: Change the Interpolation Delimiter
It is possible to adjust the delimiters used for text interpolation within the template to avoid conflicting with server-side frameworks that also use mustache syntax.
Vue-Tipp1 Min.Template
Kategorie · 43 Artikel
Template
Artikel in der Kategorie Template.
2022
19 EinträgeVue Tip: Use Vue Without Build Step
When using Vue from a CDN, no "build step" is involved. This makes the setup much more straightforward and is suitable for enhancing static HTML or integrating with a backend framework.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Defining and Registering Vue Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Expose Properties in a Script Setup Component
Components using script setup are closed by default and will not expose any of the bindings declared inside script setup.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Expose Slots From a Child Component
Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.
Vue-Tipp1 Min.TemplateSlots
Vue Tip: Typing Template Refs With TypeScript
Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Creating a Custom Directive
In addition to the default set of directives like v-model or v-show, you can also register your own custom directives.
Vue-Tipp2 Min.Template
Vue Tip: Avoid Directly DOM Manipulation
It is a no-go to manipulate the DOM in Vue.js directly. Instead, you should use the "ref" attribute.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Use Vue App Instance as Global Store
Vue provides an object that can be used to register global properties that can be accessed on any component instance inside the application.
Vue-Tipp1 Min.TemplateScript
Vue Tip: When to Use v-if
v-if has higher toggle costs while v-show has higher initial render costs.
Vue-Tipp1 Min.Template
Vue Tip: Avoid Empty Wrapper for Conditions
There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use not use HTML tags.
Vue-Tipp1 Min.Template
Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay.
Vue-Tipp1 Min.TemplateScript
Vue Tip: Check if Slot Is Empty
You can check if a slot is empty, for example, only to render it if it has content.
Vue-Tipp2 Min.TemplateScript
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
The v-memo directive is like a computed prop for the template.
Vue-Tipp1 Min.Template
Vue Tip: Use Fallthrough Attributes
A 'fallthrough attribute' is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.
Vue-Tipp2 Min.Template
Vue Tip: Provide Fallback Content for Slots
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.
Vue-Tipp1 Min.Template
Vue Tip: Use Optional Chaining in Templates
It's possible to use optional chaining in Vue templates.
Vue-Tipp1 Min.Template
Vue Tip: Display Raw HTML
The double mustaches interpret the data as plain text, not HTML. To output real HTML, you will need to use the v-html directive.
Vue-Tipp1 Min.Template
Vue Tip: Use Teleport to Render a Component in a Different Place
With teleport, you can render a component in a different place in the DOM tree, even if this place is not in your app's scope.
Vue-Tipp1 Min.Template
2021
1 EintragVue Tip: Simple Expressions in Templates
Vue component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.
Vue-Tipp1 Min.Template
Seite 2 von 3