vue脚手架的练习1

<template>
  <div class="project">
    <first-page></first-page>
    <second-page></second-page>
  </div>
</template>

<script>
import FirstPage from './FirstPage1.vue'
import SecondPage from './SecondPage1.vue'
export default {
  components: { FirstPage, SecondPage },

}
</script>

<style scoped>
  .project{
    background-color: #80C7ED;
    margin: 5px;
    padding: 20px;
  }
</style>

<template>
    <div>
        <button @click="num++"> + 
        </button>
        <span> {{ num }} </span>
        <button @click="num--"> - 
        </button>
        <p v-if="num>10">大于十了</p>
        <p v-else-if="num > 0">小于十了</p>
        <p v-else-if="num === 0">等于零了</p>
        <p v-else>小于零</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            num:10
        }
    }
}
</script>

<style>

</style>

<template>
    <div>
        <button @click="num++"> + 
        </button>
        <span> {{ num }} </span>
        <button @click="num--"> - 
        </button>
        <p v-if="num>10">大于十了</p>
        <p v-else-if="num > 0">小于十了</p>
        <p v-else-if="num === 0">等于零了</p>
        <p v-else>小于零</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            num:10
        }
    }
}
</script>

<style>

</style>

处于不同vue文件的data数据是不相互共享的