vue-js-学习-4-类与样式绑定
上一级页面：vue-js-学习索引
本系列关注前端部分,根据学习路线图达到学习Vue.js的目的
developer路线图developer-roadmap
前言
预先工作
新建src/components/TestHtmlClass.vue
<script>
export default {
data() {
return {
message: "Hello Vue! Test Html Class!",
};
},
methods: {
doSomething() {
alert("弹窗！！！");
},
},
computed: {},
};
</script>
<template>
<div class="greetings">
<h1>{{ message }}</h1>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>/src/App.vue中
<script setup>
// 旧的
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
import TestReactivity from "./components/TestReactivity.vue";
// 新导入的
import TestHtmlClass from "./components/TestHtmlClass.vue";
</script>更改/src/App.vue的template
<template>
<!-- 这里旧的别动 -->
<main>
<TestHtmlClass />
</main>
</template>
绑定 HTML class
css的各种selector，见Attribute selectors - CSS: Cascading Style Sheets | MDN (mozilla.org)
跟着教程走一遍就行，渲染结果在网页控制台里看
绑定对象
我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：(推荐做法)
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}用法
<div :class="classObject"></div>绑定数组
我们可以给 :class 绑定一个数组来渲染多个 CSS class：
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}<div :class="[activeClass, errorClass]"></div>渲染的结果是：
<div class="active text-danger"></div>也可以在数组中嵌套对象：
<div :class="[{ active: isActive }, errorClass]"></div>在组件上使用
这个麻烦一点，这里做一个说明。
App.vue是默认的根组件，里面的内容：
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
import TestReactivity from "./components/TestReactivity.vue";
import TestHtmlClass from "./components/TestHtmlClass.vue";
</script>HelloWorld、TestHtmlClass这些称为子组件
按照本文预先工作一节提到的方法，新建一个TestHtmlClass子组件
在TestHtmlClass子组件中
<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>在App.vue根组件中
<template>
<!-- 这里的内容不变 -->
<main>
<!-- 在使用组件时 -->
<TestHtmlClass class="baz boo"/>
</main>
</template>可以看到效果
“baz boo”加到了外层的class上面，内层的class就没有这个。
后面同理。
这里的isActive是父组件的属性，不是子组件的属性
<MyComponent :class="{ active: isActive }" />具体来说，在App.vue中
<script>
export default {
data() {
return {
message: "Hello Vue! Test Html Class!",
isActive: true,
error: null,
};
},
};
</script>template内容
<template>
<!-- 这里的内容不变 -->
<main>
<!-- 在使用组件时 -->
<TestHtmlClass :class="{ active: isActive }" />
</main>
</template>透传Attribute
跟着做就行
<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>绑定内联样式
名词解释
烤肉串大小写（kebab-cased）
驼峰大小写（ camelCase）
两者之间存在约定的转换方式，例如
驼峰大小写userName 对应到烤肉串大小写是user-name。
这种转换关系在spring或者其他主流框架中都是约定俗成的规则。
绑定对象
跟着文档来，没难点
绑定数组
跟着文档来，没难点
这里overridingStyles会完全覆盖baseStyles的同key项
<div :style="[baseStyles, overridingStyles]"></div>自动前缀
这个有印象就行。
当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
样式多值
有印象就行，有问题了现查