能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。
添加动态类名与在组件中添加 prop :一样简单。无论classname的计算结果是什么,都将是添加到组件中的类名。
当然,对于vue中的动态类,我们可以做的还有很多。在本文中,我们将讨论很多内容:
在Vue中,我们可以向组件添加静态类和动态类。
静态类是那些永远不会改变的乏味类,它们将始终出现在组件中。另一方面,我们可以在应用程序中添加和删除动态类。
添加静态类与在常规html中所做的是完全相同的
<template>
<span class="description">
This is how you add static classes in Vue.
</span>
</template>
动态类非常类似,但是我们必须使用Vue的特殊属性语法v-bind,以便将 JS 表达式绑定到我们的类:
<template>
<span v-bind:class="'description'">
This is how you add static classes in Vue.
</span>
</template>
这里你会注意到,我们必须在动态类名周围添加额外的引号。
这是因为v-bind语法接受我们作为 JS 值传递的任何内容。添加引号可以确保Vue将其视为字符串。
Vue还有一个v-bind的简写语法:
<template>
<span :class="'description'">
This is how you add static classes in Vue.
</span>
</template>
真正奇妙的是,您甚至可以在同一个组件上同时拥有静态类和动态类。静态类用于我们知道不会更改的内容,比如定位和布局,动态类用于主题之类的:
<template>
<span
class="description"
:class="theme"
>
This is how you add static classes in Vue.
</span>
</template>
export default {
data() {
return {
theme: 'blue-theme',
};
}
};
----------------------------------------
.blue-theme {
color: navy;
background: white;
}
在本例中,theme是包含我们将应用的类名的变量。
由于v-bind可以接受任何 JS 表达式,因此我们可以用它做一些非常酷的事情。我最喜欢的是在模板中使用三元表达式,它往往是非常干净和可读的。
<template>
<span
class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"
>
This is how you add dynamic classes in Vue.
</span>
</template>
如果darkMode为true,则将dark-theme用作我们的类名。 否则,我们选择light-theme。
如果需要动态添加许多不同的类,可以使用数组或对象。这两种方法都很有用,我们先来看数组方式。
因为我们只是在计算一个 JS 表达式,所以可以将我们刚刚学到的表达式与数组语法结合起来
<template>
<span
class="description"
:class="[
fontTheme,
darkMode ? 'dark-theme' : 'light-theme',
]"
>
This is how you add dynamic classes in Vue.
</span>
</template>
我们使用数组在这个元素上设置两个动态类名。fontTheme的值是一个类名,它将改变字体的外观。在前面的例子中,我们仍然可以使用darkMode变量在dark-theme和light-theme之间切换。
我们甚至可以使用对象来定义动态类的列表,这给了我们更多的灵活性。
对于任何值为真的键/值对,它将把键用作类名。让我们看一个对象语法的例子:
<template>
<span
class="description"
:class="{
'dark-theme': darkMode,
'light-theme': !darkMode,
]"
>
This is how you add dynamic classes in Vue.
</span>
</template>
我们的对象包含两个键:dark-theme和light-theme。与我们之前实现的逻辑类似,我们希望基于darkMode的值在这些主题之间切换。
当darkMode为 true 时,会把dark-theme作为一个动态类名应用于我们的元素。但是light-them不会被应用,因为!darkMode 值为false。
现在我们已经介绍了向Vue组件动态添加类的基础知识。那么如何使用自己的自定义组件来做到这一点?
假设我们在 app 中有一个自定义组件
<template>
<MovieList
:movies="movies"
:genre="genre"
/>
</template>
如果我们要动态添加一个将更改主题的类,我们该怎么办?其实很简单。
我们只需要像以前那样添加:class属性
<template>
<MovieList
:movies="movies"
:genre="genre"
:class="darkMode ? 'dark-theme' : 'light-theme'"
/>
</template>
之所以起作用,是因为Vue直接在MovieList的根元素上设置类。
在组件上设置props时,Vue会将这些props与组件在其props部分中指定的props进行比较。 如果有匹配项,它将作为常规props传递。 否则,Vue会将其添加到根dom元素中。
在这里,由于MovieList没有指定class属性,因此Vue知道应该在根元素上进行设置。
不过,我们可以用动态类名做一些更高级的事情。
我们已经介绍了许多动态添加或删除类名的不同方法。但是动态生成类名本身又如何呢?
假设有一个Button组件,它为所有不同类型的按钮提供20种不同的css样式。
你可能不想花一整天的时间把每一项都写出来,也不想把开关的逻辑都写出来。相反,我们将动态生成要应用的类的名称。
<template>
<span
class="description"
:class="theme"
>
This is how you add static classes in Vue.
</span>
</template>
export default {
data() {
return {
theme: 'blue-theme',
};
}
};
.blue-theme {
color: navy;
background: white;
}
我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button组件执行此操作,则可以执行以下简单操作:
<template>
<button
@click="$emit('click')"
class="button"
:class="theme"
>
{{ text }}
</button>
</template>
export default {
props: {
theme: {
type: String,
default: 'default',
}
}
};
.default {}
.primary {}
.danger {}
现在,使用Button组件的任何人都可以将theme属性设置为他们想要使用的任何主题。
如果没有设置任何类,它将添加.default类。如果将其设置为primary,则会添加.primary类。
最终,模板中的表达式将变得过于复杂,并将开始变得非常混乱和难以理解。幸运的是,我们有一个简单的解决方案,就是使用计算民属性:
<template>
<MovieList
:movies="movies"
:genre="genre"
:class="class"
/>
</template>
export default {
computed: {
class() {
return darkMode ? 'dark-theme' : 'light-theme';
}
}
};
这不仅易于阅读,而且还可以轻松添加新功能并在将来进行重构。
ES6 的类让 JS 中的继承变得更简单,因此对于你已从其他语言学习到的类知识,你无须将其丢弃。 ES6 的类起初是作为 ES5 传统继承模型的语法糖,但添加了许多特性来减少错误。
最近在使用 Symbol 来做为唯一值,发现 Symbol 无法进行 new 操作,只能当作函数使用,只要进行了new 就会发生类型错误,在不考虑底层实现的情况下,在代码层面是否能够实现一个函数只可以进行调用而不可以进行 new 操作呢?
尽管 JavaScript 在 2015 年就有了类,但仍然没有私有字段和私有方法。由于 TC39 委员会 内部存在分歧,这些功能在最初版本中被取消。有三个规范草案打算在不久的将来将这些功能引入到 JavaScript 类中。
类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符public :公有 在当前类里面、 子类 、类外面都可以访问,protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问
构造函数、全局配置对象、默认options配置、比如 vue-router 就会注册这个回调,因此会每一个组件继承,前面提到了,默认组件有三个 `KeepAlive`,`transition`, `transitionGroup`
上面代码通过实例化子类和父类,分别调用toString()实现了继承的关系。这个时候有这样的需求;不实例化父类,直接通过子类完完整整的调用父类的方法或属性。
javascript是一种基于原型的语言,javascript中的每个对象都有一个名为[[原型]]的隐藏内部属性,可用于扩展对象属性和方法。直到最近,勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。
JavaScript中没有类或接口的概念,即不能直接定义抽象的类,也不能直接实现继承。不过,为了编程的方便,我们可以在JavaScript中模拟类和继承的行为。
这再次证明了JS的写法很灵活(举个反面的例子,如Python,其哲学原则是one way to go!)。这里整理一下,研究一下各种实现的性能问题
传递空字符串,这可能会导致 DOM 输出中的类为空。 在三元运算符中,我们可以返回null,这可以确保 DOM 中没有空类
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!