webapp:vue.js
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
webapp:vue.js [2021/05/09 15:00] – 만듦 kieuns | webapp:vue.js [2024/04/23 22:43] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 1: | 줄 1: | ||
- | ~~Title: | + | < |
====== 공부용 템플릿 ====== | ====== 공부용 템플릿 ====== | ||
줄 20: | 줄 20: | ||
< | < | ||
- | | ||
<!-- 템플릿 부분 --> | <!-- 템플릿 부분 --> | ||
<div> | <div> | ||
줄 27: | 줄 26: | ||
</ | </ | ||
</ | </ | ||
+ | </ | ||
| | ||
- | | + | <!-- vue.js 포함 --> |
- | <script type=" | + | <script type=" |
- | | + | <!-- vue.js 코딩 부분 --> |
- | <script type=" | + | <script type=" |
- | var app = null; | + | var app = null; |
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { message1: 'Hi 뷰(Vue)' | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | ====== 템플릿 몇가지 기능 ====== | ||
+ | |||
+ | * 텍스트 치환 / 반복문으로 여러번 치환 / 클릭 이벤트 | ||
+ | * '' | ||
+ | * 스크립트 내부에 '' | ||
+ | * 동적으로 하려면 어떻게 해야 하나? | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta name=" | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | <!-- | ||
+ | <link rel=" | ||
+ | <script type=" | ||
+ | --> | ||
+ | <!-- meta | ||
+ | <meta property=" | ||
+ | <meta property=" | ||
+ | <meta property=" | ||
+ | --> | ||
+ | |||
+ | <style> | ||
+ | | ||
+ | .v-leave-active { | ||
+ | transition: opacity 0.2s; | ||
+ | } | ||
+ | |||
+ | .v-enter, | ||
+ | .v-leave-to { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <div id=" | ||
+ | <p>{{ message1 }}</ | ||
+ | </ | ||
+ | |||
+ | <hr /> | ||
+ | <div id=" | ||
+ | < | ||
+ | <li v-for=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <hr /> | ||
+ | <div id=" | ||
+ | <button v-on: | ||
+ | </ | ||
+ | |||
+ | <hr /> | ||
+ | <div id=" | ||
+ | <input v-model=" | ||
+ | <!-- <input v-model.number=" | ||
+ | </ | ||
+ | |||
+ | <hr /> | ||
+ | <div id=" | ||
+ | <p v-if=" | ||
+ | </ | ||
+ | |||
+ | <hr /> | ||
+ | <div id=" | ||
+ | <button v-on: | ||
+ | < | ||
+ | <p v-if=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <script type=" | ||
+ | <script type=" | ||
+ | |||
+ | | ||
+ | var _type = 6; | ||
+ | |||
+ | // 빈 객체 만들어봄 | ||
+ | if (_type == 0) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // ' | ||
+ | else if (_type == 1) { | ||
app = new Vue({ | app = new Vue({ | ||
el: '# | el: '# | ||
data: { message1: 'Hi 뷰(Vue)' | data: { message1: 'Hi 뷰(Vue)' | ||
}); | }); | ||
- | </script> | + | |
- | </body> | + | } |
- | </ | + | |
+ | // ' | ||
+ | else if (_type == 2) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | list: [' | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // button에 반응. | ||
+ | // addEventListener 또는 jQuery의 $(element).on 과 비슷 | ||
+ | else if (_type == 3) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | handleClick: | ||
+ | alert(event.target); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // 입력 양식과 동기화. input의 기본 형을 봐둬야 할듯. | ||
+ | else if (_type == 4) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | message2: ' | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // 조건 분기 | ||
+ | else if (_type == 5) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | show: true | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // 트랜지션과 애니메이션 | ||
+ | else if (_type == 6) { | ||
+ | app = new Vue({ | ||
+ | el: '# | ||
+ | data: { | ||
+ | show2: true | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | ====== 미분류 메모 ====== | ||
+ | |||
+ | 기본 옵션 | ||
+ | * **el** 마운트할 요소 | ||
+ | * **data** 데이터 | ||
+ | * **computed** - 내부 처리용 함수 놓는 곳. 산출속성? | ||
+ | * 라이프 사이클 중 호출 | ||
+ | * **created** | ||
+ | * **mounted** | ||
+ | * **methods** : 메소드를 따로 쓰네 |
webapp/vue.js.1620540042.txt.gz · 마지막으로 수정됨: 2024/04/23 22:42 (바깥 편집)