Web/JavaScript79 [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. [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS In this posting, we will learn how to start with Vue3 + TypeScript + TailwindCSS. Prerequisite I will use the Vue CLI, so let's install it first. $ yarn global add @vue/cli Create a Project Once installed, let's create the project. $ vue create If you want to start with the default setting, just choose it. But, I will start with manual configuration for using TypeScript at this time. Select a Ty.. 2021. 6. 2. [TypeScript] Template Literal Types Template Literal Types build on string literal types, and have the ability to expand into many strings via unions. They have the same syntax as template literal strings in JavaScript, but are used in type positions. When used with concrete literal types, a template literal produces a new string literal type by concatenating the contents. type TypeA = "AAA"; type TypeBC = "BBB" | "CCC"; type Type.. 2021. 3. 21. [TypeScript] Utility Types TypeScript provides several utility types to facilitate common type transformations. ConstructorParameters type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never; Constructs a tuple or array type from the types of a constructor function type. It produces a tuple type with all the parameter types (or the type never if Type is not a function). Exclude type Exclude = .. 2021. 3. 21. [Jest] Testing with Error Return Source Code Let's create a function to test. const funcWithError = (): void => { throw new Error("My Error") } Test Code Now, let's test our function. describe("Test With Error", () => { it("tests a function with an error return", () => { try { calculator.funcWithError(); } catch (err) { expect(err).toEqual(new Error("My Error")); } }); }); I tested with a try...catch statement. Yay~ It works we.. 2020. 12. 28. [React] Get Keyboard Input (TypeScript) Recently, I wanted to get keyboard input on the React application. I thought there is maybe someone like me. So let's figure out this. Create a Test Project $ npx create-react-app react-test --template typescript Implement I tried many things to implement this. Like onKeyDown, onKeyPress in div tag or, addEventListener to window or document in useEffect. Finally, I found the key point !! import .. 2020. 12. 28. [TypeScript] Type Inference TypeScript provides the type inference. const b = true; console.log(typeof b); // boolean const n = 3; console.log(typeof n); // number const f = 3.14; console.log(typeof f); // number const s = 'Hello'; console.log(typeof s); // string Best Common Type When a type inference is made from several expressions, the types of those expressions are used to calculate a 'best common type'. When no best .. 2020. 10. 25. 이전 1 2 3 4 5 6 7 다음
