vue-cli-组件

1、vue规定：组件的后缀名是.vue。

2、组件的三个组成部分：

template->组件的模板结构

script->组件的JavaScript行为

style->组件的样式

3、在组件中定义mothods方法

//.vue组件实例
<template>
    <div class="text-box">
        <h3>
            //{{ 变量或方法 }}
            这是用户自定义的模板结构---{{ username }}
        </h3>
        <button @click="changeName">修改用户名</button>
        
    </div>
</template>
<script>
import { computed } from 'vue';
import { filter } from 'vue/types/umd';

//默认导出，这是固定写法
export default{
    // data 数据源
    //注意 .vue组件中的data不能像之前一样，不能指向对象。
    //注意：组件中的data必须是个函数
    // 错误示范：data:{ username: 'zs'}
    data(){
        //这个return出去的{}中，可以定义数据
        return {
            username:" admin"
        }
    },
    //在组件中定义方法
    methods:{
        changeName(){
            //在组件中，this表示当前组建的实例对象
            this.username = '哇哈哈'
        }
    },
    //当前组件中的监听器
    watch:{},
     //当前组件中的计算属性
    computed:{},
        //当前组件中的过滤器
    filter:{},
}
</script>

<style>
.text-box{
    background-color: pink;
}
</style>