3.4 组件js部分代码组成

组件的js部分，通常是这样的：
import Footer from "@/components/Footer.vue";
export default{
    name:"Main",
    props:["pro1","pro2"],
    components:{
        Footer
    },
    data(){
        return{
            courseName:"java程序设计",
            chapterName:"8.1 类的基础",
            percent:0.85,
        }
    },
    created:function(){
    },
    mounted:function(){
        //通过this访问data里面的变量
        console.log(this.courseName);
    },
    methods:{
        test:function(){
        },
        test2:function(){
        }
    },
    computed:{
        num(){
            return 5;
        },
        good(){
            return "good";
        }
    }
}
name是这个组件的名称
最开始的import是下面的代码会使用到的组件或者别的文件
props是组件的属性
components是页面使用的组件，在这里是Footer
data是组件的数据，data必须表现为函数的形式
created和mounted是称为钩子函数的东西，是由vue自动触发的，例如created就是组件创建前触发，mounted是组件创建后触发，这两个都经常用于组件准备数据。
还有很多钩子函数，例如beforeCreated（创建前），unMounted（解绑数据）这里不一一列出。
methods包含了所有自定义函数，包括模板用到的事件处理函数。
computed是动态数据，例如上面例子，28到30行的实际上计算了num这个数据，31到33计算了good的值。可以直接在html模板中使用这个num和good。
这种方法得到的data值，是不可以通过this.num的方式修改它的值的。