javascript50 [Vue3] Send Data from Ancestor Component using Provide and Inject We can send data from a parent component to a child component using props. However, the deeper the hierarchy, the more redundant delivery, the more complexity of the code. In this situation, you can simply use provide and inject. Just use provide where you want to send data and use inject where you want to use the data. Create a Project Please create a project to test this feature. 2021.06.02 - .. 2021. 6. 20. [Vue3] Slot (v-slot) Usage We can define the common framework of the template using slot to make the code neatly. Create a Project Let's create a project first. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create a Common Layout Now, let's define the common layout. components/slot_layout.vue I created three slots and gave them a name. The unnamed slot has default as the defau.. 2021. 6. 20. [Vue3] Component Usage In this posting, we'll learn about component usage on Vue. Most projects don't consist of a single file. So, we usually create several components and consist of these components in a project. Create a Project First of all, let's create a simple project for testing. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Basic Usage This is the default folder st.. 2021. 6. 20. [Vue3] Vue-Router Usage Most of the projects have routers. It is like a navigator of the application. In this posting, we will learn about this feature on Vue3. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create a project to test. And, add the router feature to the project. $ vue add router ※ You can also create a project with a router through Vue-CLI. No.. 2021. 6. 18. [Vue3] Lifecycle In this posting, we will learn about the lifecycle of Vue. If you learn about the lifecycle, it can be helpful in development. Create a Project Let's create a project to test the lifecycle. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create a Lifecycle Component Exchange the HelloWorld component to Lifecycle component. components/Lifecycle.vue Life.. 2021. 6. 16. [Vue3] Computed Property and Watcher The computed property allows to dynamically computed value and the watcher allows monitoring the values. Let's figure out it with simple examples. Create a Project Let's create a project first. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Computed Properties Computed Property: Calculate Price Apple: ₩500 Total Price: ₩{{ totalPrice }} This example ha.. 2021. 6. 12. [Vue3] Handling Loop using v-for In this posting, we will learn about the loop in Vue. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Let's create a project first refer to the above post. Multiplication Table Example Count ⯈ 2 x {{ num }} = {{ 2 * num }} In Vue, all the loops can be handled by v-for. The basic loop is using a numeric loop. You just set the maximum num.. 2021. 6. 9. [Vue3] Conditional Processing using v-if In Vue, we can conditional process using v-if, v-else-if, and v-else. Create a Project Let's create a project for a test. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Now, everything is ready. Show/Hide Example using v-if if This is a test string. Show data: function () { return { varShow: false, }; }, The test string will be show and hide according .. 2021. 6. 8. [Vue3] Handling Event using v-on You can handle events using v-on on Vue. Create a Project Let's create a project again to test an example. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS And I recommend you read my previous Vue topics. Click Event Let's make a counter example. This example has two buttons for an up and down counter. Counter Value: {{ counter }} Up Down data: function .. 2021. 6. 6. [Vue3] Interacting with User Input using v-model In this posting, we will learn about interacting with user input. This kind of thing is very important in web development, so make it yours. Create a Project First of all, create a project to use as an example. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Basic Input Tag Now, get a name from the user. input Result Name {{ varName }}, {{ varName.lengt.. 2021. 6. 6. [Vue3] Property Binding using v-bind In the Vue, we can use data as a property of HTML tags. Syntax As you can see, you can use v-bind: or colon(:) only. Usage Let's see some examples. You will be able to understand easily. Let's create a project and test these contents. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS Image Tag img I'll give you an additional explanation to help you unders.. 2021. 6. 6. [Vue3] Variable, Data Types, and Displaying it In this posting, we'll learn the data types of Vue and how to display it. Create a Project Let's create a project refer to the previous posting. 2021.06.02 - [Web/JavaScript] - [Vue] Getting Started with Vue3 + TypeScript + TailwindCSS And, make it clean to get started. Data Types and Displaying How to Define Variables That is so easy. export default defineComponent({ name: "App", components: {}.. 2021. 6. 4. 이전 1 2 3 4 5 다음
