Vip4.0W/10_vuecli/helloworld/src/views/PageTwo.vue

<template>
    <div class="container">
        <h1>我是页面二</h1>
        <h1>{{num}}</h1>
        <button @click="addNum">增加</button>
    </div>
</template>
<script>
// export default 导出当前组件的实例对象 必须写 否则路文件中由找不到当前组件
export default {
    // 组件的名称 
    name:"PageTwo",
    // 组件的状态数据 必须是一个函数 返回一个对象
    data(){
        return{
            num:10
        }
    },
    // 组件的方法
    methods:{
        addNum(){
            this.num++;
        }
    }
}
</script>
<!-- scoped 表示当前样式只作用于当前组件 设置样式的作用域 -->
<style scoped>
  .container{
    display: block;
  }
</style>