Helloworld!/Vue 검색 결과

해당 글 11건

Storybook Button Example (feat. vue)

Start package.json 에 다음과 같이 명령어를 넣는다. "scripts": { "dev": "vite", ... "preview": "vite preview", "storybook": "storybook dev -p 6006" }, 다음 명령어를 통해 Storybook 을 실행할 수 있다. npm run dev:storybook http://localhost:3003 로 Storybook 이 자동 실행 된다. Button Example 1. Button Story 를 추가해봤다. 2. 전체적인 코드를 먼저 대략적으로 말하자면, Button Component 에서 label, primary 여부, size, backgroundColor 를 props 으로 받고 click 이벤트를 세팅했다. 스..
Helloworld!/Vue 2024. 1. 17. 16:46

Storybook 시작하기 (feat. vue)

Install 1. Storybook CLI 사용해 설치한다. npx sb init 루트 안에 .storybook 과 storybook-static 추가된다. package.json 에 명령어 추가된다. ... "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" ... 2. .gitignore 에 다음과 같이 추가한다. .storybook storybook-static 3. Stroybook 을 다음 명령어로 실행한다. npm run storybook http://localhost:6006 로 Storybook 자동 실행 된다. Setting .storybook/main.js 에서 스토리 위치 외 Storybook 에 ..
Helloworld!/Vue 2024. 1. 17. 16:28

[Vue] Vue2 에 Composition API 적용하기

Composition API 설치 install npm install @nuxtjs/composition-api --save plugin 추가 https://bitbucket.org/backpackr/web.idus.com/src/f71db99f7dbd/plugins/composition-api.plugin.ts nuxt.config.ts > buildModules 추가 buildModules: [ ... '@nuxtjs/composition-api/module' ], Composition API 사용 하기 Composition API import import {reactive, ref} from "@nuxtjs/composition-api"; setup()에 전달된 인자에 대한 타입을 추론하려면, de..
Helloworld!/Vue 2024. 1. 17. 14:04

[Vue] Composition API

Vue3 에서 달라진 점 https://v3.ko.vuejs.org/guide/migration/introduction.html#주목할-만한-새로운-기능들 시작하기 | Vue.js 시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 v3.ko.vuejs.org https://composition-api.nuxtjs.org/ Nuxt Composition API Vue 3 Composition API in Nuxt composition-api.nuxtjs.org Composition API 탄생 배경 1. Options..
Helloworld!/Vue 2022. 3. 21. 14:57

[Vue] "이 사이트에서 나가시겠습니까?" 구현하기

form 형식에 페이지에서 input 에 입력한 정보들을 저장하지 않고 페이지를 새로고침 하려하거나 다른 페이지로 나가려 할 때 "이 사이트에서 나가시겠습니까?" 라는 window 경고창을 본 적이 있을 것이다. 이를 구현하기 위해서는 window 에서 지원하는 beforeunload 라는 이벤트를 사용하면 된다. 우선 변경사항이 있는지 확인하는 플래그 변수는 isLeaveSite라고 하자 (ture이면 사이트를 종료하겠다는 것) 그리고 mounted 와 beforeUnmount 안에 다음과 같이 beforeunload 이벤트를 등록, 해지하는 코드를 입력한다. mounted() { window.addEventListener('beforeunload', this.unLoadEvent); }, before..
Helloworld!/Vue 2021. 12. 2. 18:48

[Vue] Vue 인스턴스 라이프 사이클

Vue 인스턴스는 객체로 생성되고, 데이터에 대한 watch 기능을 설정하는 등 작업을 위해 초기화를 수행한다. 그리고 이 과정에서 다양한 라이프 사이클 훅 메서드를 적용할 수 있다. 라이프 사이클 훅 설명 beforeCreate Vue 인스턴스가 생성되고 데이터에 대한 관찰(whatch) 기능 및 이벤트 감시자 설정 전에 호출 됨 create Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형(computed) 속성, 메서드, 감시자 설정이 완료된 후에 호출 됨 beforeMount 마운트가 시작되기 전에 호출 됨 mounted el 에 Vue 인스턴스의 데이터가 마운트된 후에 호출 됨 beforeUpdate 가상 DOM이 랜더링, 패치되기 전에 데이터가 변경될 때 호출됨. 이 훅에서 추가..
Helloworld!/Vue 2018. 12. 27. 16:41

[Vue] vue-cli

vue-cli 는 커맨드라인 인터페이스 기반의 스캐폴딩 도구. scaffolding: 원래는 '공사장 등에서 사용하는 임시 가설물'이라는 뜻. 개발할 때 처음부터 개발하는 것이 아니라 기본적인 인터페이스와 틀을 제공. 개발자는 이 틀을 활용하여 전체 앱을 개발한다 특히 vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 빌드, 의존성 부분을 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 고마운 도구이다. 설치 명령어 npm install -g vue-cli vue-cli 로 만들 수 있는 프로젝트 템플릿 살펴보기 명령어 vue list 위 명령어를 실행하면 이렇게 나오는데 $ vue list Available official templat..
Helloworld!/Vue 2018. 12. 26. 17:24

[Vue] Component

Template - 사용하기 편하고 반복적으로 사용할 수 있는 플랫폼 - Vue 에 이러한 개념을 적용해보면 프로젝트에서 반복적으로 사용되는 기능 및 플랫폼을 만들어놓고 변수에 저장해서 이를 사용 Component - 컴포넌트도 템플릿과 비슷한 개념. 템플릿은 뭔가 추상적인 개념이라고 한다면 컴포넌트는 이를 구현할 기술 - Component 사전적 정의 : 구성요소, 부품 Angular 에서 Component 의미 - Component = Template + Class (Properties와 Method를 포함할 수 있음) + Meta Data - Template : View layout, HTML 형태로 작성되어있다 Binding 과 Directive(지시자)를 포함한다. - Class : Code s..
Helloworld!/Vue 2017. 11. 15. 11:43

[Vue] Directive - on, bind, model (동적인 Directive 모음)

v-on - 사용방법 : v-on:이벤트이름="메소드이름" ex) 증가 감소 -v-on을 조금 더 편하게 쓰기 위해@라는 alias 를 사용한다 ex) 증가 감소 v-bind - 머스태쉬 태그 {{}} 를 이용해 HTML 태그 안의 내용을 vue 인스턴스 안의 데이터값으로 설정 할 수 있었다. ex) ... Hello, {{ name }} ... 하지만, HTML 태그의 속성 값을 데이터값을 사용해야할땐 머스태쉬 태그를 사용할 수 없다. ex) // //에러 //에러 에러 메세지 : [Vue warn]: src=”{{image}}”: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For..
Helloworld!/Vue 2017. 7. 26. 16:48

[Vue] Directive - cloak, once, for (정적인 Directive 모음)

Directive 란? -Directive를그대로 번역하면 지시문이라는 뜻이다. - 한마디로 Vue 엘리먼트에서 사용되는 특별한 속성으로 엘리먼트에게 어떻게 동작할지를 지시한다고 생각하면 쉽다. - 디렉티브는 Vue 의 기능들을 사용하기 위해서 사용하는, HTML 태그 안에 들어가는 하나의 속성이고, 사용방법은v-if와 같이v-라는 prefix가 붙는다. - 디렉티브 종류 : v-text, v-html, v-show, v-if, v-else, v-else-if, v-pre, v-cloak, v-once... v-cloak - 다른 디렉티브에 대한 설명은 Vue.js 공식 홈에서 확인하고, 특별히v-clock에 대해 설명하자면, - 자바스크립트 코드가 실행되기 전 머쉬태그에 바인딩 해놓은 데이터가 바인딩이..
Helloworld!/Vue 2017. 7. 25. 18:58