Vue.js

This is an old revision of the document!

자바스크립트 프레임워크
https://vuejs.org/
https://github.com/vuejs/awesome-vue
Data Driven
Template, Directive
Data binding
Nuxt.js, VuePress
Vuex, Vue Router
https://curated.vuejs.org/
https://element.eleme.io/
https://onsen.io/
Vue Devtool @chrome store

Vue.js 다운로드

https://vuejs.org/js/vue.js

CDN 이용

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Vue.js 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Vue.js App</title>
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <!-- template 출력 --> 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

var app = new Vue({
  el: '#app'
})

텍스트 바인딩

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<p>{{ message }}</p>

반복 렌더링; v-for directive, list in data:
이벤트 사용; v-on directive, methods:
입력 양식과 동기화; v-model directive, data:
조건 분기; v-if directive, boolean in data:
트랜지션과 애니메이션; <transition>
{디렉티브}{:매개변수}{.장식자}={값}; ex) v-bind:value.sync = “message”

var app = new Vue({

  // el
  el: '#app',
  
  // data
  data: {
    message: 'Vue.js'
  },
  
  // computed
  computed: {
    computedMessage: function() {
      return this.message + '!'
    }
  },
  
  // lifecycle hooks
  created: function() {
    // something to what you do
  },
  
  // methods
  methods: {
    myMethod: function() {
      // something to what you do
    }
  }

})

Lifecycles
Methods	Timing
beforeCreate	인스턴스가 생성되고, 리액티브 초기화가 일어나기 전
created	인스턴스가 생성되고, 리액티브 초기화가 일어난 후
beforeMount	인스턴스가 마운트되기 전
mounted	인스턴스가 마운트된 후
beforeUpdate	데이터가 변경되어 DOM에 적용되기 전
updated	데이터가 변경되어 DOM에 적용된 후
beforeDestroy	Vue 인스턴스가 제거되기 전
destroyed	Vue 인스턴스가 제거된 후
errorCaptured	임의의 자식 컴포넌트에서 오류가 발생했을 때

템플릿에 사용하는 모든 데이터를 리액티브 데이터로 정의
리액티브 데이터 정의; 컴포넌트의 data 옵션에 정의
렌더링; mustache {{ 속성이름 }}
- 표현식만 가능, 문장식은 불가능
- 3항 연산자의 경우 산출 속성 computed 사용을 권장
- 문자열이나 숫자를 변환할 때는 필터를 권장
- 속성에는 사용 불가, 속성에 바인딩 하려면 v-bind 디렉티브 사용
- data 상태 json으로 출력; <pre> <nowiki> data </pre>
this; 콜백으로 익명 함수를 사용하거나, 다른 라이브러리와 함께 사용할 경우 this 변경되므로 사용에 주의
클래스 이름에 하이픈을 넣을 때는 작은 따옴표(')로 감쌈.
템플릿에서 조건 분기; v-if → 주석처리, v-show → 스타일로 보이지 않게만.
v-if, v-else-if, v-else; key 설정
요소를 반복해서 렌더링; v-for = “<각 요소를 할당할 변수 이름> in <반복 대상 배열 또는 객체>” v-bind:key=“..”
- 값, 키, 인덱스 순
- 반복 처리 순서; Object.keys()의 순서에 기반
- v-for 안에 v-if
리스트
- 추가; push, unshift ex) this.list.push(새로운 값)
- 제거; splice ex) this.list.splice(index, 1)
- push, pop, shift, unshift, splice, sort, reverse
- Vue.set 메서드; this.$set(변경할 데이터, 인덱스 또는 키, 새로운 값)
- this.list.filter(function(el) { … })

v-bind 장식자
장식자	의미
.prop	속성 대신에 DOM 속성으로 바인딩, DOM 속성과 직접 바인딩
.camel	케밥케이스¹⁾ 속성 이름을 카멜 케이스로 변환
.sync	양방 바인딩

¹⁾

kebab-case, lisp-case, spinal-case; 하이픈으로 구분

Vue.js

starting vue.js

기본 기능

Options in Vue Objects

Data Binding

References

reth