vue.js

1.필수요소

두루루루루 2019. 2. 2. 16:51

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

(공식 vue 가이드)



템플릿 구문을 사용.

- 선언적으로 dom에 데이터를 렌더링



<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})
안녕하세요 Vue!

id app 안에  {{  message }} 를 삽입



+ 응용


<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

v- bind 속성으로 특수한 동작을 추가.



v-bind 속성은 디렉티브

(v- 접두사가 붙어있으면 특수 속성임, 렌더링 된 DOM에 특수한 반응형 동작을 함)


v-if, v-for (조건문, 반복문)


사용자 입력핸들링

v-on


<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

이 메소드는 DOM을 건드리지 않고 앱의 상태를 업데이트 함.



v-model

양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 디렉티브



- 컴포넌트를 사용한 작성방법 -


Vue.component()


인터페이스를 컴포넌트 트리로 추상화 가능.

미치 정의된 옵션을 가진 vue 인스턴스이다.



Vue.component('todo-item', {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})



<div id="app-7">
  <ol>
    <!-- 
      이제 각 todo-item 에 todo 객체를 제공합니다.
      화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 
      또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
     -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

dom의 props 는 v-bind:props['이름']="item"

v-bind:key = "item.id" 는 인덱스 순서





컴포넌드를 사용한 앱의 구성 모습


<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>



Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공합니다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요합니다.




저작자표시 (새창열림)