Vue学习之--- 初识组件

组件开发：根据封装思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护.即 UI结构的复用。

1. 组件的结构如下：

组成部分关键字	描述
template	组件的模板结构
script	组件的javascript行为
style	组件的样式

用vue-cli 自动生成一个项目后就会得到一个项目的包。默认有一个App.vue组件，可以删除写自己的组件vue 。如下为生成后基本框架写法

<template>
    <div class="text-box">
        <h3> 这是用户自定义的test.vue ---{{ username }} </h3>
        <button @click="ChangeName">修改用户名</button>
    </div>
    <!-- <div> 这是错误的</div>  template里面只能放一个根Div-->
</template>

<script>
// 默认导出，这是固定写法
export default{
    // data 数据源
    // 注意：.vue组件中的data不能像之前一样，不能执行对象，data必须是一个函数
    data(){
        // 这个return出去的{}中，可以定义数据
        return{
            username :'张三'
        }
    },
    methods:{// 于data同一层级
        ChangeName(){
            if(this.username === 'admin') {
                this.username = '张三'
            }
            else{
                this.username = 'admin'
            }    
        }
    },
    watch:{// 当前组件中的侦听器

    },
    computed:{// 当前组件中的计算属性

    }, 
    filters:{// 当前组件中的过滤器

    }
}
</script>

<style lang="less">// 启用less语法
 .text-box{
    background-color: pink;
 }

 h3{
    color: red;
 }
</style>