Vuejs基本知識(十)【使用樣式】
樣式用起來特別簡單. 直接寫到 <style>
段落裡面即可. 如下程式碼所示:
<template>
<div class='hi'>
Hi Vue!
</div>
</template>
<script>
export default {
data () {
return { }
}
}
</script>
<style>
.hi {
color: red;
font-size: 20px;
}
</style>
用瀏覽器開啟上述程式碼,就可以看到 一個紅色的,字型大小為20px 的 “Hi Vue!”. 如下圖所示:
使用全域性
<style >
td {
border-bottom: 1px solid grey;
}
</style>
使用區域性的css
<style scoped>
td {
border-bottom: 1px solid grey;
}
</style>
這段CSS
只對當前的 component
適用.
也就是說,當我們有兩個不同的頁面: page1, page2, 如果兩個頁面中都定義了某個樣式(例如上面的 td
)的話,是不會互相沖突的。
因為Vuejs
會這樣解析:
page1 的DOM:
<div data-v-7cfd41e ... ></div>
page2 的DOM:
<div data-v-3389dfw ... ></div>
而我們使用的 “scoped style
” ,就可以存在於不同的頁面(component
)上了!
相關文章
- Vuejs基本知識(九)【路由】VueJS路由
- Vuejs基本知識(十三)【表單的提交】VueJS
- Vuejs基本知識(五)【檢視中的渲染】VueJS
- Vuejs基本知識(十二)【表單的繫結】VueJS
- Vuejs基本知識(四)【頁面渲染過程 】VueJS
- Vuejs基本知識(一)【專案資料夾基本結構】VueJS
- Vuejs基本知識(三)【語法簡寫說明】VueJS
- Vuejs基本知識(八)【頁面間的引數傳遞】VueJS
- Javascript函式的基本知識JavaScript函式
- Vuejs進階知識(十八)【component 進階知識】VueJS
- Vuejs進階知識(十六)【mixin】VueJS
- Vuejs進階知識(十九)【slot】VueJS
- js 基本知識JS
- javaweb基本知識JavaWeb
- shell基本知識
- ldap基本知識LDA
- Thymeleaf基本知識
- Ajax基本知識
- NBU基本知識
- WiFi基本知識WiFi
- ORACLE基本知識Oracle
- 1、基本知識
- DAX 基本知識
- Uboot基本知識boot
- git基本知識Git
- Vuejs進階知識(十七)【computed properties】VueJS
- Vagrant (一) - 基本知識
- 影像的基本知識
- 基本網路知識
- Oracle 基本知識(轉)Oracle
- SYBASE IQ 基本知識
- 閥門基本知識
- 脫殼基本知識
- Linux使用基本知識:CORE檔案(轉)Linux
- Vuejs進階知識(二十四)【自定義Directive】VueJS
- typora 基本使用和漂亮的主題樣式
- Css基本樣式————文字CSS
- CSS的基本樣式CSS