Day 19：「通通拿去做鸡精啦！」- Vue SFC

Day19-Banner

嗨大家～
昨天有没有试着用 Creator 建立专案呢！

没有的话现在赶快去复习哦，
因为我们今天会用到～

之前有说过 Vue 是渐进式的，
所以你用多用少都可以，
但以工作上的专案多半还是会以 CLI 来完成。

而 Vue CLI 之类的环境，
元件通常会以 .vue 的方式出现在专案中，
这个档案则称为单一元件档，Vue SFC。

我们先来比较一下差异，
这是用 cdn 时撰写元件的方式：

// Vue 3.x
const app = Vue.createApp({
  data() {
    return {
      // ...      
    }
  }
})

// 新增元件
app.component('Box', {
  template: `<div>{{ content }}</div>`,
  props: ["content"],
  data() {
    return {}
  },
  methods: {
    // ...
  }
})

app.mount('#app')

然後这样制作元件，
会把所有的元件都塞在一起，
不但画面看起来很啊砸，
而且要客制化元件的样式非常麻烦。

但这就是 SFC 可以解决的问题！
我们来看一下 SFC

SFC 单一元件档

如果使用了单一元件档的方式，
那我们的元件就会长的像：

<!-- Box.vue -->
<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  props: ["content"],
  data() {
    return {}
  },
  methods: {
    // ...
  }
}
</script>

<style scoped>

</style>

有注意到底下的 <style scoped> 吗？
这正是他的特别之处！

所谓的单一元件档就是，
一个 .vue 档为一个元件，
而每个元件都有属於自己的 html、js、css
这样就可以把元件设计切分得非常乾净！

而且这里面的东西都是有范围性的，
并不会污染到全域的内容。

这样的好处非常的多！

比如说，很适合分工，
每一个写一个元件档案，
除非元件之间有资料传递，
不然完成就已经是个完整的功能了！

或是像我前面所说的，
每个元件都有属於自己的 html、js、css，
这意味着，可以拿来完成整个页面？

没错，可以～～～

在 CLI 内的页面通常就直接是一个元件档了，
比如会像是这样：

<!-- About.vue -->
<template>
  <Nav />
  <Main>
    <Logo />
    <h1>关於兔大王公司</h1>
    兔大王公司，专门生产高科技胡萝卜，用最...
  </Main>
  <Footer />
</template>

<script>
export default {
  name: "About",
  data() {
    return {}
  },
  methods: {
    // ...
  }
}
</script>

<style scoped>
  h1 {
    color: blue;
  }
</style>

然後只要再搭配 Vue-Router，
就能把元件档当作页面切换了！

这样的元件档不但逻辑清晰，
撰写的时候内容量也不会太大。
好处蛮多的！

其实这样简直就是把很棒的材料组合起来，
然後通通拿去做出一个精良的元件档！

~~(把最好的鸡，通通拿去做鸡精啦！)~~

建立元件

现在我们开启用 Vitawind 建立的专案，
先执行指令开启 dev server：

npm run dev

应该超快就开起来了。

开启来之後，
看专案中的 ./src 资料夹。

可以发现里面就预设有两个 .vue 档，
他们两个就是 Vue SFC。

不过先不管他们，
我们来用现在的环境完成之前做过的方块。

我们在 components 资料夹中，
建立一个 Box.vue，
然後贴上我们在 Day17 中提取成 vue 元件的范例。

<template>
  <div 
    :class="[
      [
        'w-20 h-20 bg-gray-500 rounded-md',
        'focus:ring-4 group-hover:text-gray-600',
        'font-bold text-3xl text-white',
        'flex justify-center items-center',
        'cursor-pointer outline-none'
      ],
      (color==='red') && 'bg-red-500 hover:bg-red-400 ring-red-300',
      (color==='blue') && 'bg-blue-500 hover:bg-blue-400 ring-blue-300',
      (color==='purple') && 'bg-purple-500 hover:bg-purple-400 ring-purple-300'
    ]"
    :tabindex="number"
  >
    {{ number }}
  </div>
</template>

<script>
export default {
  name: "Box",
  props: ["number", "color"]
}
</script>

这时候我们要把注册後的元件加到页面中，
稍微把 App.vue 改写一下：

<template>
  <div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
    <box v-for="item in Boxes" v-bind="item" :key="item.number" />
  </div>
</template>

<script>
import Box from './components/Box.vue'

export default {
  data() {
    return {
      // 定义三个 box 的内容
      Boxes: [
        {number: 1, color: 'red'},
        {number: 2, color: 'blue'},
        {number: 3, color: 'purple'},
      ]
    }
  },
  components: {
    Box
  }
}
</script>

这也是从 Day17 中提取成 Vue 元件的范例拿来改的。

基本上没有甚麽不一样的地方，
差别在於这里有用 ESM 方式载入 .vue 档。

那麽接下来呢...

直接储存！！！

对，不要害怕的直接储存下去，
你就会发现一瞬间画面上：

没错，就这样上去了！
这个 Box 就是一个最基本的元件。

现在我们试着把底下阵列的内容改一改：

Boxes: [
  {number: 5, color: 'blue'},
  {number: 2, color: 'purple'},
  {number: 0, color: 'red'},
]

接着储存马上看效果！

有欸，数字换了颜色顺序也换了！

然後不知道你有没有发现，
用 Tailwind 的好处就是这样，
html 结构直接贴过来样式就直接有了，
而且样式效果还都一模一样！

就是这样我才会喜欢 Tailwind 呢～
真是可喜可贺，大成功！

可以收尾啦～～

还顺利吗？
这边的进度应该不难，
如果有兴趣的话，
也可以尝试修改一下元件内容和样式，
做出不一样的效果来交作业吧！

给你们的回家作业：

作业实施要点：
- 打开专案并开启 dev server
- 制作完成 Box 元件
- 试试做出自己的元件外观和内容
白兰氏广告：通通拿去做鸡精篇

关於兔兔们：

( # 兔兔小声说 )

「兔兔，我想跟问一下这课程的问题。」

好啊，你想问什麽部分？

　「是关於学费，是不是有点小贵...」
　
好，想问的大概就这些吗？
关於学费的部分，我没有办法，
因为这是公道价了...

「公道价？公道价是...？」

公道价八万一啦！！！

「你是在大声什...」

嘘，别再说了。

不要这麽大声。
这里不是兔兔小声说吗？