컨텐츠 내 위젯


태그 : vue 요약보기전체보기목록닫기

1

Router(3) - 네비게이션 가드 및 라우터 이동

1. 네비게이션 가드네비게이션 가드는 페이지 이동시 문제가 발생할 경우 다음 단계로 진행하는걸 막기 위해서 존대하는 hook 이다. 따라서 대부분의 경우 next를 인자로 받은 다름 상활에 따라 실행시키거나 안하거나 두 방법으로 진행한다.1-1. 전역 가드router.beforeEach 페이지의 이동이 일어나는 모든 경우에 한 번 거치게 된다. 1 2 ...

flux 패턴

Flux 패턴의 기존의 MVC 패턴의 단점을 보완하고자 페이스북에서 고안한 데이터 관리 패턴이다. 가장 큰 특이점은 데이터의 순환이 한 방향으로만 흐른다는 것이다. 이 패턴은 vuex, redux 등에 영감을 주었다.위의 도식을 단계별로 설명하면 밑과 같다.1. Action사용자가 어떠한 목적을 가진 행위를 일으켰는지 타입을 갖고 있다. 그리고 그 행위...

플러그인 및 나름의 분석

1. Vue 플러그인 개념.일반적으로 vue는 단일 컴포넌트의 활동에 중점을 두고 있다. 플러그인의 경우 여러 컴포넌트들이 통합된 기능을 사용해야 할때 쓴다. vuex나 router 처럼. 아니면 통째로 뭔가 만들어진걸 내놓거나.2. 플러그인 작성법일단 플러그인을 등록하려면 Vue 인스턴스에다가 install 메서드를 등록해야 한다. 첫번째 매개변수는 ...

사용자 지정 디렉티브

vue 에서는 속성에다가 대표적으로 v-bind, v-show 등을 통해 템플릿 문법 처럼 동작할 수 있도록 하는게 있다. 이걸 앵귤러와 똑같이 디렉티브라고 한다. 작성방법은 EACD(?) 이렇게 네 가지가 있던 것과는 다르게 오직 어트리뷰트로만 가능하며, 등록하는 방법은 다음과 같다.전역으로 등록하고 싶을 때12345678// 전역 사용자 정의 디렉티...

컴포넌트 작성법

1. 순수 js를 통한 작성방법 1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031Vue.component("TableTdComponent", { // 뷰 인스턴스에 이름 추가. 나중에 이건 케밥표기법으로 사용 가능 <table-td-component> props: { // 부모로부...

transition

트랜지션Vue 에서는 컴포넌트가 추가및 삭제 될 시에 앞 뒤로 css의 class를 추가해주는 기능이 있는데, 이것을 트랜지션 이라고 한다. 그 종류는 다음과 같다. 타입 시작 시작~끝(움직이는 도중) 끝(유지X) ...

webpack 사용법

webpack 은 기본적으로 여러 자바스크립트를 한데 모아 컴파일 해 주는 번들러이다. 여기에 SASS 혹은 HTML, TypeScript 등도 로더 등을 통해 원하는 형식으로 번들링 하여 사용 가능하다. webpack을 사용할 경우 html에 수 많은 script를 가져다 쓸 필요도 없다. [ html 하나에 끌고 올 jav...
1