GINS WIKI 긴스 위키

사용자 도구

사이트 도구

현재 위치: 긴스위키 GINS wiki » 웹 툴 & 개발 » Vue.js 시작
추적:
webapp:vue.js

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
webapp:vue.js [2021/05/09 15:00] – 만듦 kieunswebapp:vue.js [2024/04/23 22:43] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
-~~Title: Vue.js 시작~~+<title>Vue.js 시작</title>
  
 ====== 공부용 템플릿 ====== ====== 공부용 템플릿 ======
줄 20: 줄 20:
  
 <body> <body>
-   
   <!-- 템플릿 부분 -->   <!-- 템플릿 부분 -->
   <div>   <div>
줄 27: 줄 26:
     </div>     </div>
   </div>   </div>
 +</body>
      
-  <!-- vue.js 포함 --> +<!-- vue.js 포함 --> 
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  
-  <!-- vue.js 코딩 부분 --> +<!-- vue.js 코딩 부분 --> 
-  <script type="text/javascript"> +<script type="text/javascript"> 
-    var app = null;+  var app = null; 
 +  app = new Vue({ 
 +    el: '#app1', 
 +    data: { message1: 'Hi 뷰(Vue)' } // 텍스트 바인딩 
 +  }); 
 +</script> 
 + 
 +</html> 
 + 
 +</code> 
 + 
 +====== 템플릿 몇가지 기능 ====== 
 + 
 +  * 텍스트 치환 / 반복문으로 여러번 치환 / 클릭 이벤트 
 +  * ''input''에 텍스트 치환 / 트랜지션  
 +  * 스크립트 내부에 ''_type''의 숫자를 변경한다. 
 +    * 동적으로 하려면 어떻게 해야 하나? 
 + 
 +<code html> 
 +<!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({     app = new Vue({
       el: '#app1',       el: '#app1',
       data: { message1: 'Hi 뷰(Vue)' } // 텍스트 바인딩       data: { message1: 'Hi 뷰(Vue)' } // 텍스트 바인딩
     });     });
-  </script> +    //app.message1.push('Hi 뷰(Vue)'); 
-</body> +  }
-</html>+
  
 +  // '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>
 </code> </code>
 +
 +
 +====== 미분류 메모 ======
 +
 +기본 옵션
 +  * **el** 마운트할 요소
 +  * **data** 데이터
 +  * **computed** - 내부 처리용 함수 놓는 곳. 산출속성?
 +  * 라이프 사이클 중 호출
 +    * **created**
 +    * **mounted**
 +  * **methods** : 메소드를 따로 쓰네
webapp/vue.js.1620540042.txt.gz · 마지막으로 수정됨: 2024/04/23 22:42 (바깥 편집)