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>