Day 04：.vue 档三层柜

继上篇观察整个专案资料夹结构之後，接着来观察子层 components 资料夹里的 HelloWorld.vue 和父层 views 资料夹里的 Home.vue，会发现 .vue 档案主要分成三个区块，以及资料传递更新画面显示的方式。

.vue 单一元件档

1. <template>：撰写 HTML

使用模版语法（Template Syntax），常见形式为使用 Mustache 语法以双大括号（{{data}}）绑定插值。

• HelloWorld.vue：在 <h1> 绑定 msg property。

   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
       </div>
   </template>
  

2. <script>：撰写 JavaScript

当 data 改变时将同步更新模版语法中的插值。

• HelloWorld.vue：定义 msg property 需为字串型别，并透过 props 让 data 从父层传入至此。

   <script>
   export default {
     name: "HelloWorld",
     props: {
       msg: String,
     },
   };
   </script>
  

• Home.vue：父层引用 HelloWorld.vue 子元件时，更新 msg property 的内容为「Welcome to Your Vue.js App」，将传入到子元件 <h1> 绑定的插值，而显示在画面上。

   <template>
     <div class="home">
       <img alt="Vue logo" src="../assets/logo.png" />
       <HelloWorld msg="Welcome to Your Vue.js App" />
     </div>
   </template>
  

  从「开发人员工具 DevTools」检视 HTML 结构。
  

3. <style>：撰写 CSS

lang 可选用在建立专案时所选择的前置处理器，另外建议加上 scoped attribute 将样式限定在该元件内，避免元件影响到全域样式。

• HelloWorld.vue：注解说明 scoped attribute 的用意。

   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped lang="scss">
   h3 {
     margin: 40px 0 0;
   }
   ...
   </style>
  

• 加上 scoped 之後，会让该元件在编译时被添加一个以「data-v-」开头代表唯一值的 attribute 指定作用域。
  以下一样透过 DevTools 观察加上 scoped 在 HTML 结构及 CSS 样式的前後差异。

  • <style lang="scss">
    

  • <style lang="scss" scoped>
    
    

相对路径不迷路

回到 Home.vue 的 <script> 区块，发现注解写了一行「@ is an alias to /src」，这是因为 Webpack 预设设置了 resolve.alias，以别名「@」取代路径「/src」，因此以下两种写法实际上都指向同一个 HelloWorld.vue 档案。

// @ is an alias to /src
import HelloWorld from "/src/components/HelloWorld.vue";
import HelloWorld from "@/components/HelloWorld.vue";

以此类推，Home.vue 的 <template> 区块，图片来源原本为「../assets/logo.png」，便可改成「@/assets/logo.png」。

<img alt="Vue logo" src="../assets/logo.png" />
<img alt="Vue logo" src="@/assets/logo.png" />

统一使用 @ 来代表路径「/src」，不仅简单易用，还解决了在层层资料夹中计算相对路径而迷路的问题。

参考资料

• Vue.js - Single File Components
• Vue.js - HTML & CSS - Component-Scoped CSS
• Webpack - resolve.alias
• Webpack - build/webpack.base.conf.js