👉🏻 Create 3D scenes with Vue components and Three.js.
🔥 Vue Tip: Simpler Two-Way Binding in Vue With defineModel
v-modelv-model is a powerful feature in Vue that allows you to create two-way data bindings on your components. However, defining the props and emits in every component can be a bit verbose.
Since Vue 3.4 you can simplify two-way binding in Vue with the defineModeldefineModel compiler-macro, which is now the recommended way to define v-modelv-model bindings.
When you create a component that uses v-modelv-model, you need to define a prop and an emit for the value. For example, if you have a component that uses v-modelv-model to bind to a value prop, you would need to define the following:
defineModel is a new script setupscript setup macro that aims to simplify the implementation of components that support v-modelv-model. It automatically defines the modelValue prop and the update:modelValue emit for you.
Let's rewrite the above example using defineModeldefineModel:
1<script setup lang="ts">2const model = defineModel()3</script>45<template>6 <input v-model="model">7</template>8
I love this simple and clean syntax. It makes the code much easier to read and write.
My blog post contains additional information about multiple v-modelv-model bindings, modifiers and typing.
👉🏻 Learn how they optimize web performance by eliminating client-side rendering and reducing hydration, a feature inspired by React's Server Components.
👉🏻 Quill is a rich text editor that has official TypeScript support, support for multiple editors on the same page with different configurations, auto-scrolling container detection, a smoother editing experience, and more.
😂 Fun
Comments? Join the discussion about this issue in our Discord community.
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Hey! In yesterday's email I shared what I think is the key feature to making Vue components highly reusable: Scoped slots. But scoped slots are hard to grasp, and even more difficult to master. So today, we're going to make sure we understand them on a deep, intuitive level. Then, I'm going to introduce you to the magic ✨ of scoped slots. The trick is to think of them as functions. Slots are just functions We're going to recreate the functionality of slots, but we'll use a regular Javascript function that only returns HTML. This is the code we'll replicate: <!-- Parent --> < template > < div class = "modal-container" > < div class = "modal" > Content in the Parent < Child class = "mb-4" v-slot = "{ text }" > ...
Hey all! I just finished adding some new design patterns and recording a bunch of new videos for Clean Components Toolkit. I'll be launching this update on June 5th , in two weeks, with a big discount. Of course, if you already own it, you'll see the update soon. I'm adding in three new design patterns, bringing the total up to 21. I've also recorded a bunch of extra "bonus" content. Enjoy your tips for this week! — Michael Vue Tips Collection 2 Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration. Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing. Check out Vue Tips Collection 🔥 Proxy Basics Proxies are one of the strangest but most interesting parts of Javasc...
评论
发表评论