내용으로 건너뛰기
GINS WIKI 긴스 위키
사용자 도구
로그인
사이트 도구
도구
문서 보기
이전 판
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
현재 위치:
긴스위키 GINS wiki
»
웹 툴 & 개발
»
Vue.js 시작
추적:
검색
webapp:vue.js
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
<title>Vue.js 시작</title> ====== 공부용 템플릿 ====== 파일 1개로 만들어서 해볼 수 있는 형태 결과 화면에는 ''Hi 뷰(Vue)''가 표시된다. <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> </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> </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.txt
· 마지막으로 수정됨: 2024/04/23 22:43 저자
127.0.0.1
문서 도구
문서 보기
이전 판
역링크
맨 위로