[Hoon] Vuejs 강의 - Vue 시작하기(Getting Started)

Vue 시작하기(Getting Started)

https://kr.vuejs.org/v2/guide/index.html#시작하기

[ 설치 ]

<!-- 개발버전, 도움되는 콘솔 경고를 포함. --> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 또는:

 <!-- 상용버전, 속도와 용량이 최적화됨. --> 
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

JSFiddle - https://jsfiddle.net/

선언적 렌더링

https://kr.vuejs.org/v2/guide/index.html#선언적-렌더링

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

텍스트 보간(Interpolation) - 텍스트 삽입

<div id="app">
    <!-- 텍스트 보간 -->
    <p> {{ message }} </p>
 </div>

new Vue({
    el:'#app',
    data: {
      message: '안녕하세요 Vue!'
    }
 })

이제 데이터와 DOM이 연결되었으며 반응형이 되었습니다.

엘리먼트 속성 바인딩

<div id="app">
    <!-- 엘리먼트 속성 바인딩 -->
    <span v-bind:title="nowMessage">
      내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
    </span>
 </div>

new Vue({
    el:'#app',
    data: {
      nowMessage: '이 페이지는'+ new Date() + '에 로드 되었습니다.'   
    }
 })

이번에는 앞에서 나온 메세지리를 이벤트 핸들링을 통에서 컨트롤 해보겠습니다.

이벤트 핸들링

https://kr.vuejs.org/v2/guide/index.html#사용자-입력-핸들링

<div id="app">
    <!-- 텍스트 보간 -->
    <p> {{ message }}</p>
    <button v-on:click="reverseMessage">메시지 뒤집기</button>
  </div>

new Vue({
    el:'#app',
    data: {
      message: '안녕하세요 Vue!'
    },
    methods: {
      // 이벤트 핸들링
      reverseMessage: function(){
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

 

 

bit.ly/2LMzjNC

커피한잔(5000원) 으로 배우는 Vue.js 개념 ~ 핵심 강의! - 인프런 인강 55% 할인 쿠폰

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런