Skip to content

Vue.js 치트 시트

Vue는 사용자 인터페이스를 구축하기 위한 점진적인 JavaScript 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 바닥부터 점진적으로 채택할 수 있도록 설계되었습니다. 핵심 라이브러리는 뷰 레이어에만 집중되어 있어 다른 라이브러리나 기존 프로젝트와 쉽게 통합할 수 있습니다.

목록 

<li v-for="todo in todos">
  {{ todo.text }}
  {{ $index }}
</li>

이벤트 

<button v-on:click='submit'>실행</button>

컴포넌트 

new Vue({
  components: { app: App }
})

API 인터페이스 

Vue.extend({ ... })        // 컴포넌트 생성
Vue.nextTick(() => {...})

Vue.set(object, key, val)  // 반응형
Vue.delete(object, key)

Vue.directive('my-dir', { bind, update, unbind })
// <div v-my-dir='...'></div>

Vue.elementDirective('my-dir', { bind, update, unbind })
// <my-dir>...</my-dir>

Vue.component('my-component', Vue.extend({ .. }))

Vue.partial('my-partial', '<div>안녕 {{msg}}</div>')
// <partial name='my-partial'></partial>

new Vue({
  data: { ... }
  props: ['size'],
  props: { size: Number },
  computed: { fullname() { return this.name + ' ' + this.lastName } },
  methods: { go() { ... } },
  watch: { a (val, oldVal) { ... } },
  el: '#foo',
  template: '...',
  replace: true, // 요소 교체 (기본값 true)

  // 생명주기
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // $el이 처음 삽입될 때
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

  // 옵션
  directives: {},
  elementDirectives: {},
  filters: {},
  components: {},
  transitions: {},
  partials: {}
})

Vue 템플릿

vueify를 참조하세요.

// app.vue
<template>
  <h1 class="red">{{msg}}</h1>
</template>
 
<script>
  module.exports = {
    data () {
      return {
        msg: '반가워요!'
      }
    }
  }
</script>

그리고

<template lang='jade'>
h1(class='red') {{msg}}
</template>