[javascript] Vue.js - 전환효과

https://kr.vuejs.org/v2/guide/transitions.html

패키지 :  https://unpkg.com/vue

전환 효과

개요

Vue는 항목이 DOM에 삽입, 갱신 또는 제거 될 때 전환 효과를 적용하는 다양한 방법을 제공합니다. 여기에는 다음과 같은 도구가 포함됩니다.

• CSS 전환 및 애니메이션을 위한 클래스를 자동으로 적용합니다.
• Animate.css와 같은 타사 CSS 애니메이션 라이브러리 통합
• 전환 훅 중에 JavaScript를 사용하여 DOM을 직접 조작
• Velocity.js와 같은 써드파티 JavaScript 애니메이션 라이브러리 통합

이 페이지에서는 진입, 진출 및 목록 전환만 다루지만 다음 섹션에서는 전환 상태 관리를 볼 수 있습니다.

Vue.js 컴포넌트간-전환

Vue.js 리스트 전환

Vue.js 리스트-이동-전환

Vue.js - 리스트 진입/진출/이동 전환

Vue.js - 비틀거리는목록/동적전환

...

[javascript] Vue.js 응용 프로그램 디버깅을위한 Chrome devtools 확장 프로그램.

GitHub :  https://github.com/vuejs/vue-devtools

크롬브라우저에서 확장프로그램 들어간 다음 "vue.js" 로 검색하면 나옴. 설치!

vue-devtools

Important Usage Notes

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.

2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

Works with vuex for time-travel debugging:

Installation

• Get the Chrome Extension

• Get the Firefox Addon

• Workaround for Safari

Manual Installation

Make sure you are using Node 6+ and NPM 3+

1. Clone this repo
2. npm install (Or yarn install if you are using yarn as the package manager)
3. npm run build
4. Open Chrome extension page
5. Check "developer mode"
6. Click "load unpacked extension", and choose shells/chrome.

Hacking

1. Clone this repo
2. npm install
3. npm run dev
4. A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

1. Install web-ext

   $ npm install --global web-ext
   

   Or, for Yarn:

   $ yarn global add web-ext
   

   Also, make sure PATH is set up. Something like this in ~/.bash_profile:

   $ PATH=$PATH:$(yarn global bin)
   

2. Build and run in Firefox

   $ npm run build
   $ npm run run:firefox
   

   When using Yarn, just replace npm with yarn.

...

[javascript] Vue.js 컴포넌트 

https://kr.vuejs.org/v2/guide/components.html

...

[javascript] Vue.js Validation

https://kr.vuejs.org/v2/guide/components.html

...

Vue.js 시작하기 예제

호출하기 

<script src="https://unpkg.com/vue/dist/vue.js"></script>

https://jsbin.com/fivomus/22/edit?html,js,output

...

[javascript] VUE.js - https://kr.vuejs.org

GitHub : https://github.com/vuejs/vue

A progressive, incrementally-adoptable JavaScript framework for building UI on the web. http://vuejs.org

Vue.js가 무엇인가요?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.

Vue.js를 시험해 볼 수 있는 가장 쉬운 방법은 JSFiddle Hello World 예제를 사용하는 것입니다. 다른 탭에서 자유롭게 열어 본 후 몇 가지 기본 예제를 따라가십시오. 또는 단순히 index.html 파일을 만들고 Vue를 다음과 같이 포함할 수 있습니다.

반응형에 대해 깊이 알아보기

우리는 대부분의 기본적인 내용을 다루었습니다. 이제 깊이 알아 볼 때 입니다! Vue의 가장 두드러진 특징 중 하나는 눈을 어지럽히지 않는 반응형 시스템 입니다. 모델은 단순한 JavaScript 객체 입니다. 수정하면 뷰가 갱신됩니다. 이것은 상태 관리를 매우 간단하고 직관적으로 만듭니다. 이를 이해하는 것은 매우 중요합니다. 이 섹션에서는 Vue의 반응 시스템에 대한 하위 수준의 세부 정보를 살펴 보겠습니다.

변경 내용을 추적하는 방법  https://kr.vuejs.org/v2/guide/reactivity.html

일반 JavaScript 객체를 data 옵션으로 Vue 인스턴스에 전달하면 Object.defineProperty를 이용해 Vue는 모든 속성을 거쳐 getter / setter 변환합니다. 이것은 ES5 전용이며 하위 버전에 없는 기능이기 때문에 Vue가 IE8 이하를 지원하지 않습니다.

getter / setter 는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있습니다. 한가지 주의 사항은 변환된 데이터 객체가 기록될 때 브라우저가 getter / setter 형식을 다르게 처리하므로 친숙한 인터페이스를 사용하기 위해vue-devtools를 설치하는 것이 좋습니다.

모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 “수정”된 모든 속성을 기록합니다. 나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링 됩니다.

...