生命周期函數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>

總結

以上是生活随笔為你收集整理的Vue 组件 生命周期函数mounted的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。