webapp:vue.js

차이

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

차이 보기로 링크

--- webapp:vue.js [2021/05/09 15:02] – kieuns
+++ webapp:vue.js [2024/04/23 22:43] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
-~~Title: Vue.js 시작~~
+<title>Vue.js 시작</title>
 ====== 공부용 템플릿 ======
@@ 줄 43: / 줄 43: @@
 </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({
+      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>
+</code>
+====== 미분류 메모 ======
+기본 옵션
+  * **el** 마운트할 요소
+  * **data** 데이터
+  * **computed** - 내부 처리용 함수 놓는 곳. 산출속성?
+  * 라이프 사이클 중 호출
+    * **created**
+    * **mounted**
+  * **methods** : 메소드를 따로 쓰네

webapp/vue.js.1620540127.txt.gz · 마지막으로 수정됨: 2024/04/23 22:42 (바깥 편집)