본문 바로가기
frontend/vue

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

by 훈즈 플로거 2020. 4. 13.

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

 

[인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법

인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0