vue2小效果的实现

 

<!--components文件中的Person.vue-->
<template>
    <div class="person">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script>
export default{
    name:'Person',
    data(){
        return{
            name:'张三',
            age: 18,
            tel:'13383619198'
        }
    },
    methods:{
        changeName(){
            this.name = 'zhang-san'
        },
        changeAge(){
            this.age += 1
        },
        showTel(){
            alert(this.tel)
        }
    }
}
</script>

<style scoped>
.person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding:20px;
}
button{
    margin: 0 5px;
}
</style>
<!--App.vue-->
<template>
    <div class="app">
        <h1>你好啊！</h1>
        <Person/>                             这个是刚刚写的Person.vue
    </div>
</template>


<script>
import Person from './components/Person.vue'  这个是引入刚才写的Person.vue
    
 export default{
    name:'App',//组件名
    components:{Person}  把vue组件暴露出来
 }
</Script>

<style>
 .app{
    background-color:#ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
 }
</style>