devjin0617

npm i --save-dev expose-loader
npm i --save jquery

devjin0617

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

devjin0617

(function() {

    var EventBus = Vue();

    Object.defineProperties(Vue.prototype, {
        $eventBus: {
            get: function () {
                return EventBus;
            }
        }

devjin0617

var EventBus = new Vue();

var SenderApp = new Vue({
    el: '#sender-app',
    data() {
    	return {
        	text: '',
            receiveText: ''
        }
    },

devjin0617

<div id="sender-app">
    <input v-model="text">
    <button @click="sender">sender</button>
    <div v-if="receiveText">#sender-app: I sent a message a {{ receiveText }}</div>
</div>
<div id="receiver-app">
    <div v-if="text">#receiver-app: {{ text }}</div>
</div>

devjin0617

// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

devjin0617

// 이벤트 발행
EventBus.$emit('message', 'hello world');

devjin0617

// 이벤트버스 생성
var EventBus = new Vue()

devjin0617

created: function() {

    // ...

    this.$nextTick(function() {
    	var dom = document.getElementById('item-0');
        dom.style.backgroundColor = 'red';
    });
}

devjin0617

<!-- 오류 예제 -->
<div id="app">
	<div v-for="item in list">
    	<div v-bind:id="bindId(item)">{{item}}</div>	<!-- 2 -->
    </div>
</div>

<script>
new Vue({
	el: '#app',