iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ系列 第 3

Day03 - 一邊動手修改 Vue CLI 建立的專案一邊複習 Vue 指令與資料夾結構

今天重開一了個新的 Vue CLI 專案
https://ithelp.ithome.com.tw/upload/images/20210917/20140513PKq5a1UNbE.jpg

因為這次想要練習將 component 引入主 App.vue 檔中,所以在新開的專案中,找到 src 資料夾(今天只有碰到 src folder),在 components folder 另外新建了一個 .vue 檔,準備等等讓,src 下的 App.vue 檔使用

剛建立的 .vue 檔就是一個 SFC Single File Component,所以其中包含三大主角

<template></template>
<script></script>
<style></style>

template

<template>
    <div>
        <h1>Bubble Tea Master</h1>
        // 這邊的 color 是現在這個 Single File Component 本身的 data 存放的資料
        <div class="line" :style="{ 'backgroundColor': color }"></div>
        
        // 這邊的 parentSayColor 是之後 會從父元素傳入 在存到 props 的資料
        <div class="line" :style="{ 'backgroundColor': parentSayColor }"></div>
    </div>
</template>

script

export default {
    // 等等被父元件引入時要跟老爸說這個被引入的小子元件叫什麼名字
    // 沒錯他叫做珍奶大師啦哇哈哈
    name: 'BubbleTeaMaster',
    
    data (){
        // 阿不要忘記 data function 要 return 我們存的資料喔
        return {
            color: '#e8cda7',
        }

    },
    // 接收父元素的資料
    props: ['parentSayColor']
}

style

<style lang="scss">
.line {
    width: 100%;
    height: 72px;
}
</style>

上述建立好我們的 SFC(Single File Component)後,就來到 src 旗下的 App.vue 檔,來將剛建立的 component 引入吧

一樣因為 App.vue 檔也是一個 SFC,所以裡面一樣是由三大角色組成(感謝 Vue CLI 預設 App.Vue 已經建好三大角色,我們就能直接用哩

template

<template>
    // 使用我們的珍奶大師 component
    // 並將父親 App.vue 的 data color,傳給 珍奶大師 component 的 props bubbleTeaMaster
    <bubbleTeaMaster :parentSayColor="color"></bubbleTeaMaster>
</template>

script

// 大聲呼喊珍奶大師 import 我們的元件檔
import BubbleTeaMaster from "./components/bubbleTea.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    BubbleTeaMaster,
  },
  data() {
    return {
      color: "#e8a7a7",
    };
  },
};

style

// 語法指定 scss,並利用 scoped 控制不讓 App.vue 檔的 Style 污染子元件
<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

// 因為希望父元件與子元件的 h1 都使用父元件的 Style
// 所以使用 ::v-deep(Selector) 指定希望被污染的 Selector
::v-deep(h1) {
  border: 1px solid #2c3e50;
  color: #b3a7e8;
}
</style>

主要複習了import component 與 v-bind 綁定 props 傳入父元素資料

https://ithelp.ithome.com.tw/upload/images/20210917/20140513Z2hY29RB7I.jpg

如果我理解的觀念有出入,再麻煩有緣的朋友指點迷津了 (っಠ‿ಠ)っ


上一篇
Day02 - 單一元件檔你好 Single Component File 初見面
下一篇
Day04 - 學習 Vue CLI package.json 設定檔
系列文
Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ19

尚未有邦友留言

立即登入留言