Vue Instance

모든 Vue 앱은 Vue 함수로 새 Vue Instance를 만드는 것부터 시작합니다.

<div id="root">
    <h1>
        {{ greeting }}
    </h1>
    <input v-model="greeting">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>

new Vue({
    el: '#root',
    data: {
        greeting: 'Hello Vue'
    }
})

<div id="root">
    <div v-if="count === 1">
        Green
    </div>
    <div v-else-if="count === 2">
        Red
    </div>
    <div v-else>
        Orange
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>

new Vue({
    el: '#root',
    data: {
        count: 0
    }
})

 

<div id="root">
    count = {{count}}
    <div v-show="count === 1">
        Green
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>

new Vue({
    el: '#root',
    data: {
        count: 1
    }
})