Vue 组件 生命周期函数mounted

生命周期函数mounted：页面刷新触发
mounted(){
console.log('我在页面刷新时触发');
}

Tips：
使用export default function Add(){},与export function Add(){}的区别在于，引入（import）的时候是否需要使用大括号。export default可以直接引入例如：import Add from './test.js'，而另一种则需要将Add放在对象中，例如： import {Add} from './test.js'

Vue组件：
便于代码复用。
组件创建与挂载：
1.新建.vue文件，例如Home.vue。且vue文件中需存在<template><div>Home组件<div></template>标签、<script></script>标签、<style></style>标签.
2.父组件引入新建的vue组件，例如在App.vue中引入Home.vue。
　　2.1.<script></script>标签中添加 import Home from './components/Home.vue'。
　　2.2.script中的components对象中，挂载Home,例如components:{'v-home':Home}。
　　　　Tips:components:{'v-home':Home}中的v-home不可与HTML标签名一致
　　2.3.template标签中引用挂载后的组件，例如<template><div><v-home></v-home><div></template>。
子组件样式作用域：
1.可通过<style scoped></style>只作用于子组件内的标签
2.可通过添加id来作用于子组件内的标签

<template>
  <div id="app">
    <h2>
      这是App组件【根组件】
    </h2>
    <v-home></v-home>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  name: "app",
  data() {
    return {
      msg: ""
    };
  },
  components: {
    "v-home": Home
  }
};
</script>

<style lang="scss">
</style>

<template>
<div>
    <h2>
      这是Home组件
    </h2>
    <v-news></v-news>
</div>
</template>

<script>
import News from "./News.vue";
export default {
  components: {
    "v-news": News
  }
};
</script>

<style scoped>
h2 {
  color: red;
}
</style>

<template>
<div>
    <h2>
      这是News组件
    </h2>
</div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>