본문 바로가기
ETC/Vue.js

Vue 샘플 코드 참고용

by java나유 2022. 12. 8.
/* sample  구조 */
		<script type="text/javascript">
				(function (Vue, $system){
					window.vm = new Vue({
					el:"#xxx", //영역 지정 값
					data:function(){/*데이터 처리 값(초기 입력은 초기 셋팅 값)*/},
					filters:{
						/* 데이터 필터 처리 function*/
						},
					methods:{
						/* 이벤트 처리 function */
						},
					mounted : function() {
						/* 초기 실행  function 지정*/
						}
					});
				})(Vue, window.$system);
				/* function 형태 
				function xxxxx(변수 값){} == xxxxx : function(변수 값)
                    </script>

 

Vue 샘플 코드 참고용으로 기록해둔다.

**data에 return 이 빠져있는데, return 값도 넣는다

 

<script type="text/javascript">
			(function(Vue, $system) {
				window.vm = new Vue({
					el : "#video", //영역 지정 값 아이디값(#) 클래스값(.)
 					data : function() {/*데이터 처리 값(초기 입력은 초기 셋팅 값)*/				
						return{
							vioList : [] //내가 받는 데이터 list [] map {} string "" int 0
						}
					},
					filters : {
					/* 데이터 필터 처리 function*/
					},
					methods : {
						/* 이벤트 처리 function */
						initSelect3 : function() {
							var vm = this;
							vm.selectVioList();
						},
						selectVioList : function() {
							var vm = this;
							var vioDto = {};
							$system.axios.post("table/selectVioList", vioDto).then(function(response) {
										console.log(response.data);
										vm.vioList = response.data;
									});
						}
					},
					mounted : function() {
						/* 초기 실행  function 지정*/
						this.initSelect3();
					}
				});
			})(Vue, window.$system);
			  </script>

참고 샘플용

728x90

댓글