첫번째 Vue 앱 개발

이 내용은 https://www.udemy.com/course/vue-js-course 를 공부해서 정리한 내용입니다.

개발완료 화면은 다음과 같습니다.

Input을 넣으면 텍스트에 맞게끔 이미지가 생성됩니다. 

vue는 선언형 형태로 개발되며 다음 세가지 flow를 가진다고 한다. 

• Data : 데이터 초기화
• Compute : 주어진 데이터를 조합해서 리턴해줍니다.
• Method : 만들어진 데이터를 이용해서 랜더링해서 화면을 다시 보여줍니다. 

Html

<div id="app">
  <h1>My identicon generator</h1>
  <div>
    Input:
    <Input v-on:input="onInput" />    
  </div>  
  <div>
    Output:
    <div v-html="identicon"></div>
  </div>  
</div>  

Javascript

new Vue({
  el: '#app',
  data: {
    textInput: ''
  },
  computed: {
    identicon: function() {
      return jdenticon.toSvg(this.textInput, 200);
    }
  },
  methods: {
    onInput: function(event) {
      this.textInput = event.target.value;
    }
  }
})

이상입니다.