vue 组件+生命周期函数+请求数据

组件：就是一个功能模块
组件由html、js、css组成；
html由<template></template>包裹，并且里面的内容必须由根元素包裹；

<template>
   <!--所有的内容都要被根结点包含起来 -->
    <div>
        <h2>{{msg}}</h2>
        <button @click="run()">run</button>
    </div>
</template>>
<script>
    export default{
        data(){
            return{
                msg:"我是一个首页组件"
            }
        },
        methods:{
            run(){
                alert(this.msg);
            }
        }
    }
</script>
<style lang="css" scoped>
    
    h2{
        color:red;
    }
</style>

scoped：阻止子组件css样式修改父组件样式
以上就定义了一个组件，改文件名即是组件的名称；
组件如何使用：
1、引入组建

import Home from './components/Home.vue';

2、挂在组建

export default {
  data () {
  }, components:{
    'v-home':Home
  }

3、在模版中使用

<template>
  <div id="app">
    <h2>父组件元素</h2>
    <v-home></v-home>
   </div>
</template>

生命周期函数
组件挂载以及组件个不甘心、组件销毁的时候出发的一系列的方法，这些方法就叫做生命周期函数

export default {
  data () {
    
  },methods:{
    
  },
  beforeCreate() {
    console.log("实例刚刚被创建1");
  },created(){
    console.log("实例已经创建完成2");
  },beforeMount(){
    console.log("模版编译之前3");
  },mounted(){ //请求数据，操作dom，都放到mounted
    console.log("模版编译完成4");
  },beforeUpdate(){
    console.log("数据更新之前");
  },updated(){
    console.log("数据更新完毕");
  },beforeDestroy(){  //页面销毁之前要保存一些数据，就可以监听这个销毁的生命周期函数
    console.log("实例销毁之前");
  },destroyed() {
    console.log("实例销毁完成");
  }
}

请求数据：

1. vue-resource 官方提供的插件

npm install vue-resource --save

在main.js中导入

import VueResource from 'vue-resource';
Vue.use(VueResource);

在需要使用数据请求的组件中使用

this.$http.get(api).then((response)=>{
},(err)=>{ });

2. axios 第三方提供的请求插件

npm install axis --save

在哪个组件使用就在哪个组件引入

import Axios from 'axios';
//使用
Axios.get(api).get((response)=>{})
.catch((err)=>{
});