공부용 템플릿

파일 1개로 만들어서 해볼 수 있는 형태

결과 화면에는 Hi 뷰(Vue)가 표시된다.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <meta name="keywords" content="vue">
  <meta name="description" content="">
  <title>VUE test 1</title>
</head>
 
<body>
  <!-- 템플릿 부분 -->
  <div>
    <div id="app1">
      <p>{{ message1 }}</p>
    </div>
  </div>
</body>
 
<!-- vue.js 포함 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 
<!-- vue.js 코딩 부분 -->
<script type="text/javascript">
  var app = null;
  app = new Vue({
    el: '#app1',
    data: { message1: 'Hi 뷰(Vue)' } // 텍스트 바인딩
  });
</script>
 
</html>

템플릿 몇가지 기능

텍스트 치환 / 반복문으로 여러번 치환 / 클릭 이벤트
input에 텍스트 치환 / 트랜지션
스크립트 내부에 _type의 숫자를 변경한다.
- 동적으로 하려면 어떻게 해야 하나?

<!DOCTYPE html>
<html>
 
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <meta name="keywords" content="vue">
  <meta name="description" content="">
  <title>VUE test 1</title>
  <!--
  <link rel="stylesheet" href="xx.css">
  <script type="text/javascript" src="xx.js"></script>
  -->
  <!-- meta
  <meta property="og:title" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="index.html">
  -->
 
  <style>
    .v-enter-active,
    .v-leave-active {
      transition: opacity 0.2s;
    }
 
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
  </style>
 
</head>
 
<body>
  <div>
    <div id="app1">
      <p>{{ message1 }}</p>
    </div>
 
    <hr />
    <div id="app2">
      <ol>
        <li v-for="item in list">{{item}}</li>
      </ol>
    </div>
 
    <hr />
    <div id="app3">
      <button v-on:click="handleClick">Click</button>
    </div>
 
    <hr />
    <div id="app4">
      <input v-model="message2">
      <!-- <input v-model.number="count"> -->
    </div>
 
    <hr />
    <div id="app5">
      <p v-if="show">할로 Vue.js!</p>
    </div>
 
    <hr />
    <div id="app6">
      <button v-on:click="show2=!show2">트랜지션 변경하기</button>
      <transition>
        <p v-if="show2">[트랜지션 텍스트]</p>
      </transition>
    </div>
  </div>
</body>
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript">
 
  var app = null;
  var _type = 6;
 
  // 빈 객체 만들어봄
  if (_type == 0) {
    app = new Vue({
      el: '#app0',
    });
  }
 
  // 'data'를 추가해서 메시지를 치환함
  else if (_type == 1) {
    app = new Vue({
      el: '#app1',
      data: { message1: 'Hi 뷰(Vue)' } // 텍스트 바인딩
    });
    //app.message1.push('Hi 뷰(Vue)');
  }
 
  // 'v-for'를 사용해서 반복 치환. list에 있는 것을 치환함.
  else if (_type == 2) {
    app = new Vue({
      el: '#app2',
      data: {
        list: ['엑박', '플스4', '스위치']
      }
    });
  }
 
  // button에 반응.
  // addEventListener 또는 jQuery의 $(element).on 과 비슷
  else if (_type == 3) {
    app = new Vue({
      el: '#app3',
      data: {
        handleClick: function (event) {
          alert(event.target);
        }
      }
    });
  }
 
  // 입력 양식과 동기화. input의 기본 형을 봐둬야 할듯.
  else if (_type == 4) {
    app = new Vue({
      el: '#app4',
      data: {
        message2: '초기 메시지'
      }
    });
  }
 
  // 조건 분기
  else if (_type == 5) {
    app = new Vue({
      el: '#app5',
      data: {
        show: true
      }
    });
  }
 
  // 트랜지션과 애니메이션
  else if (_type == 6) {
    app = new Vue({
      el: '#app6',
      data: {
        show2: true
      }
    });
  }
</script>
 
</html>

미분류 메모

기본 옵션

el 마운트할 요소
data 데이터
computed - 내부 처리용 함수 놓는 곳. 산출속성?
라이프 사이클 중 호출
- created
- mounted
methods : 메소드를 따로 쓰네

GINS WIKI 긴스 위키

목차

공부용 템플릿

템플릿 몇가지 기능

미분류 메모