首先,在 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 MVC当中针对model验证是有支援双重验证的机制,也就是在Client端跟S...
State概要 React Component 只能透过资料状态的改变来更新UI,资料来源来自於以下...
前言 昨天我们已经将DatePickerView新增在画面上了,今天就让我们再让新增闹钟的页面完成度...
学习进度 Android Studio (以下功能皆为自学) ChipGroup、Chip使用 Sw...
续昨天 昨天好像说了要安装扩充软件,却忘记讲要扩充甚麽软件XD。 我们 QGIS 要搭配 OSM,要...