Life is experience
2017-05-26
AngularJS에 너무 실망하고 Vue로 갈아탄지 일주일이 지났다.
결론적으로 AngularJS로 한달을 작업한걸 Vue로는 5일만에 거이다 해치웠다. 이미 제작해놓은 컨텐츠가 있어서이기도 하겠지만..

Vue는 한글 메뉴얼이 있어서 초보자도 사용하기가 참 쉽다.
링크 : Vue 시작하기

그리고 그중에서 필자가 최근 가장 고생한 부분을 여기에 포스팅 해보려고 한다.
보통 웹 관련 작업을 하다보면 꼭 걸리는 것중에 하나가, 동적으로 추가한 element가 event를 가지고 있을때 그게 제대로 동작 하느냐 이다.
보통 function은 페이지가 로딩되면서 셋팅 되기 때문에, 동적으로 추가한 element에 포함된 함수는 동적으로 로딩된 후에 따로 컴파일되어야 하기 때문이다.

무튼 서론은 이쯤하고, 소스로 바로 들어가보도록 하겠다. 
<div id="app">
	<button v-on:click="add">버튼 추가</button>
	<component v-bind:is="buttons"></component>
	{{nice}}
</div>

<script type="text/javascript" src="/post_inc/vue/vue.2.3.3.js"></script>
<script>
Vue.component('my-button', {
	template: `<button v-on:click="nice_fun()">누르실래요?</button>`
	,methods:{
		nice_fun:function(){
			app.nice = "눌렀군요!"
		}
	}
})

var app = new Vue({
	el: '#app',
	data: {
		buttons:''
		,nice:''
	},
	methods: {
		add () {
			this.buttons = 'my-button'
		}
	}
})
</script>
{{nice}}


자세한 설명은 아래 링크에 있기 때문에 따로 하진 않겠다.
링크: https://kr.vuejs.org/v2/guide/components.html#동적-컴포넌트

자 그럼 위의 것을 응용하여 좀더 다중 버튼을 추가해 보자. 
<div id="app2">
	<button @click="add">버튼추가</button><br>
	<component v-for="item in buttons" :is="item"></component><br>
	{{nice}}
</div>

<script>
Vue.component('my-button2', {
	template: `<button @click="nice_fun()">개수확인</button>`
	,methods:{
		nice_fun:function(){
			app2.nice = '버튼추가 개수:'+app2.buttons.length;
		}
	}
})

var app2 = new Vue({
	el: '#app2',
	data: {
		buttons: []
		,nice:''
	},
	methods: {
		add () {
			this.buttons.push('my-button2')
		}
	}
})
</script>


{{nice}}