完整原文地址見(jiàn)簡(jiǎn)書http://www.reibang.com/p/cdbd2670e075
更多完整Vue筆記目錄敬請(qǐng)見(jiàn)《前端 Web 筆記 匯總目錄（Updating）》
本文內(nèi)容提要
Class樣式寫法
常規(guī)的樣式使用寫法- 使用
v-bind的形式動(dòng)態(tài)設(shè)定DOM組件樣式- 使用
v-bind+Object的形式組織樣式 綁定DOM組件捡鱼；- 使用
v-bind+數(shù)組的形式組織樣式 綁定DOM組件數(shù)組形式中混合Object形式的蝉衣；子組件樣式 默認(rèn)跟隨 父組件
- 子組件自己配置樣式彪腔，則不跟隨根組件，按子組件自己的樣式渲染
- 擁有“兩個(gè)以上最外層組件”的樣式處理
- 解決辦法1帮孔，
外層組件 各自配置樣式；- 解決辦法2不撑，使用
:class="$attrs.class"對(duì)外層組件進(jìn)行配置文兢，
使得統(tǒng)一跟隨引用處樣式配置；行內(nèi)樣式寫法
常規(guī)寫法- Vue式寫法焕檬，使用
v-bind配合dataObject形式描述樣式姆坚，可讀性更高
Class樣式寫法
常規(guī)的樣式使用寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div class = "blue">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
效果：
使用v-bind的形式動(dòng)態(tài)設(shè)定DOM組件樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
colorString:'blue',
}
},
template: `
<div :class = "colorString">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
data字段可以動(dòng)態(tài)改變組件顏色：
使用Object的形式組織樣式 綁定DOM組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
colorObject: {blue:true, green:true}
}
},
template: `
<div :class = "colorObject">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
關(guān)鍵代碼：
data() {
return {
colorObject: {blue:true, green:true}
}
},
如果將顏色鍵值設(shè)置成false，則網(wǎng)頁(yè)DOM組件便不會(huì)展示：
<script>
const app = Vue.createApp({
data() {
return {
colorObject: {blue:true, green:false}
}
},
template: `
<div :class = "colorObject">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
使用數(shù)組的形式組織樣式 綁定DOM組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
.orange {
color: orange;
}
.yellow {
color: yellow;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', 'orange', 'yellow']
}
},
template: `
<div :class = "colorArray">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
數(shù)組形式中混合Object形式的：
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:false, yellow:true}]
}
},
template: `
<div :class = "colorArray">luelueluelielielie</div>`
});
const vm = app.mount('#heheApp');
</script>
子組件樣式 默認(rèn)跟隨 父組件
例程：
添加子組件testDom到根組件实愚，子組件樣式?jīng)]有配置兼呵，則默認(rèn)跟隨根組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
.orange {
color: orange;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:true}]
}
},
template: `
<div :class = "colorArray">
luelueluelielielie
<testDom/>
</div>`
});
app.component('testDom', {
template: `
<div>heheda</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
子組件自己配置樣式，則不跟隨根組件腊敲，按子組件自己的樣式渲染：
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:true}]
}
},
template: `
<div :class = "colorArray">
luelueluelielielie
<testDom/>
</div>`
});
app.component('testDom', {
template: `
<div class='blue'>heheda</div>`
});
const vm = app.mount('#heheApp');
</script>
擁有“兩個(gè)以上最外層組件”的樣式處理
不過(guò)當(dāng)添加的子組件的template中击喂，最外層有兩個(gè)以上的組件的時(shí)候，
在引用子組件處（如下代碼中的<testDom class='green'/>）配置樣式是沒(méi)有作用碰辅，
子組件template下的組件 會(huì)沿用根組件的樣式（如下代碼中的<div :class = "colorArray">）懂昂，
因?yàn)橐锰?code><testDom class='green'/>配置的樣式 或者其他屬性，
指代的是testDom組件的最外層組件的樣式 或者其他屬性乎赴，
但是此時(shí)最外層組件有兩個(gè)忍法，
于是這個(gè)樣式class='green'配置不知道該分配給哪個(gè)最外層組件，便失效：
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:true}]
}
},
template: `
<div :class = "colorArray">
luelueluelielielie
<testDom class='green'/>
</div>`
});
app.component('testDom', {
template: `
<div>heheda</div>
<div>heheda</div>
`
});
const vm = app.mount('#heheApp');
</script>
解決辦法1榕吼，各自配置樣式：
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:true}]
}
},
template: `
<div :class = "colorArray">
luelueluelielielie
<testDom/>
</div>`
});
app.component('testDom', {
template: `
<div class='blue'>heheda</div>
<div class='green'>heheda</div>
`
});
const vm = app.mount('#heheApp');
</script>
解決辦法2饿序，使用:class="$attrs.class"對(duì)外層組件進(jìn)行配置，
將自定義子組件 template下的組件 的樣式羹蚣，
跟隨 子組件添加處（如下代碼中的<testDom class='green'/>）配置的樣式：
<script>
const app = Vue.createApp({
data() {
return {
colorArray: ['blue', 'green', {orange:true}]
}
},
template: `
<div :class = "colorArray">
luelueluelielielie
<testDom class='blue'/>
</div>`
});
app.component('testDom', {
template: `
<div :class="$attrs.class">heheda</div>
<div :class="$attrs.class">heheda</div>
`
});
const vm = app.mount('#heheApp');
</script>
行內(nèi)樣式寫法
常規(guī)寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
.orange {
color: orange;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div style="color:blue">
luelueluelielielie
</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
Vue式寫法原探，使用v-bind配合data，
老規(guī)矩顽素，bind后接左邊一個(gè)組件屬性style咽弦，右邊一個(gè)data字段styleString：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<style>
.blue {
color: blue;
}
.green {
color: green;
}
.orange {
color: orange;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
styleString:'color:blue;'
}
},
template: `
<div :style="styleString">
luelueluelielielie
</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
Object形式描述樣式
當(dāng)然以上是string方式描述樣式的方式，
更多時(shí)候我們使用Object的形式描述樣式胁出，可讀性更高
如下例程型型，
styleString和styleObject兩個(gè)字段，
分別代表以上兩種描述方式全蝶，相形見(jiàn)絀：
<script>
const app = Vue.createApp({
data() {
return {
styleString:'color:blue; background: orange',
styleObject: {
color: 'blue',
background:'orange'
}
}
},
template: `
<div :style="styleObject">
luelueluelielielie
</div>`
});
const vm = app.mount('#heheApp');
</script>
