:::

4-1 Component 組件開發

  1. main.js:程式的進入點
    import { createApp } from 'vue'
    import App2 from './App2.vue'
    import router from './router'
    import '@/assets/css/reset.css'
    
    createApp(App2).use(router).mount('#app')
    1. 其中 App2.vue 就是一個 Component 組件
    2. import { createApp } from 'vue' 若有{}表示是從組建中拆分出來的
    3. import App2 from './App2.vue' 若沒有表示是該組件預設匯出的(一般和檔名一致)
    4. 亦可 import 共用的 css 檔 @ 來代表以組件的 src 目錄為起點
  2. Component 的基本架構(可放在 components 目錄下,檔案字首大寫 )
    <script>
    import { ref } from "vue";
    // import some from "@/components/some.vue";
    export default {
      props: {},
      emits: {},
      components: {},
      setup(props, {emit}) {
        return {};
      },
    };
    </script>
    
    <template>
    </template>
    
    <style lang="scss" scoped>
    </style>
    1. export default 組件名稱{} 若是沒寫名稱,預設就是檔名
    2. import { ref } from "vue"; 中的 {ref} 表示從 vue 組建中拆分出 ref 函式
    3. return { isOpen, HandOpenMenu }; 中放常數、函式等,以便讓 <template> 樣板中的 {{文字樣板}}v-bindv-modelv-ifv-on...等修飾符使用
    4. <style lang="scss" scoped> 代表要用 scss 預編譯器,且樣式設定只限定在此組件中
  3. 引入組件
    <script>
    import Header from "@/components/Header.vue";
    import Footer from "@/components/Footer.vue";
    export default {
      components: {
        Header,
        Footer,
      },
    };
    </script>
    
    <template>
      <div>
        <Header></Header>
        <Footer></Footer>
      </div>
    </template>
    <style lang="scss">
    * {
      margin: 0;
      padding: 0;
      background-image: url("~@/assets/images/rightbtn2.jpg");
    }
    </style>
    
    1. import Header from "@/components/Header.vue"; 中用 import 來引入 Header 表示組件預設匯出的內容,所以無須放到 {} 中,路徑的 @ 來代表以組件的 src 目錄為起點(若是放在<style>中要引入素材的話,要用 ~@ 來代表 src 目錄為起點)
    2. components:{ Header } 中的 Header 表示要放到 <template> 樣板中去使用的組件名稱,可用<Header></Header><Header />來呈現
  4. SCSS用法:
    1. 練習網站:https://www.sassmeister.com/
    2. 用法:https://blog.techbridge.cc/2017/06/30/sass-scss-tutorial-introduction/

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1735

計數器

今天: 2829282928292829
昨天: 3755375537553755
總計: 4458668445866844586684458668445866844586684458668