【Vue】建立 第一个 component | 专案实作

为什麽选择建立 header component 呢?

  1. 网站各个页面都会共用
  2. 固定版型而且不需要传入动态的资料,不会有传接资料报错的问题

开始建立第一个元件

首先,在 components 目录下建立 TaiHeader.vue,元件由 template / script / style 组成,根据命名规则通常会取两个字节作为名字,否则 header 後续会命名冲突。
TaiHeader.vue *

<template>
   <div>
       <img src="../assets/Logo-desktop.png">
       <ul>
           <li><a href="">景点</a></li>
           <li><a href="">活动</a></li>
           <li><a href="">美食</a></li>
       </ul>
   </div>
</template>

<script>
   export default {
       name: "TaiHeader" // 输出元件,到时候可以在 view 画面引入
   }
</script>

<style scoped>
   div.w-100 {
       height: 80px;
       border-bottom: 1px solid #E5E5E5;
   }
   ul li{
       font-size: 18px;
       font-weight: 400;
       line-height:  80px;
   }
</style>

template 下的第一层只能有一个物件,如下图img&ul并排会出现错误讯息

 <template>
     <img src="../assets/Logo-desktop.png">
     <ul>
         <li><a href="">景点</a></li>
         <li><a href="">活动</a></li>
         <li><a href="">美食</a></li>
     </ul>
 </template>

没有用到 SCSS 语法时,style 注记 lang="SCSS"也会出现错误

<style scoped lang="SCSS">
   div.w-100 {
       height: 80px;
       border-bottom: 1px solid #E5E5E5;
   }
   ul li{
       font-size: 18px;
       font-weight: 400;
       line-height:  80px;
   }
</style>

建立第一个 header 元件後,下篇再试着将元件放到 APP.vue 里!

参考来源:
https://www.jianshu.com/p/d5eec7c90b43
https://book.vue.tw/CH2/2-1-components.html


<<:  为了转生而点技能-JavaScript,day7 (原始型态与物件型态在记忆体上的变化

>>:  30天不间断的文章之旅_变数宣告的 var、let、const

.NET Core第28天_ValidationMessageTagHelper和ValidationSummaryTagHelper的使用

在.net core MVC当中针对model验证是有支援双重验证的机制,也就是在Client端跟S...

Day8 React State(编辑中)

State概要 React Component 只能透过资料状态的改变来更新UI,资料来源来自於以下...

Swift纯Code之旅 Day8. 「TableView制作复习」

前言 昨天我们已经将DatePickerView新增在画面上了,今天就让我们再让新增闹钟的页面完成度...

进击的软件工程师之路-软件战斗营 第十八周

学习进度 Android Studio (以下功能皆为自学) ChipGroup、Chip使用 Sw...

【Day 19】QGIS + OSM

续昨天 昨天好像说了要安装扩充软件,却忘记讲要扩充甚麽软件XD。 我们 QGIS 要搭配 OSM,要...