Vue 和 React 语法对比 & polyfill
2019-08-06 本文已影响0人
Xinxing_Li
1. class 类名+布尔值
// vue
<div v-bind:class="{ active: isActive }"></div>
//react + classnames [https://www.jianshu.com/p/9cf57787360d]
render(){
var btnClass = classNames({
'btn': true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
2. css 样式作用域
<!-- vue 转义前 -->
<style lang="scss" scoped>
.test {
background: blue;
span{
color:red;
}
}
</style>
<template>
<div class="test">
<span>hello world !</span>
</div>
</template>
<!-- vue 转义后 -->
<style lang="css">
.test[data-v-ff86ae42] {
background: blue;
}
.test span[data-v-ff86ae42]{
color: red;
}
</style>
<template>
<div class="test" data-v-ff86ae42>
<span data-v-ff86ae42>hello world !</span>
</div>
</template>
<!-- 穿透写法 -->
<template>
<div class="box">
<dialog></dialog>
</div>
</template>
<!--使用 >>> 或者 /deep/ 操作符(Sass 之类的预处理器无法正确解析 >>>,可以使用/deep/)-->
<style lang="scss" scoped>
.box >>> input {
width: 166px;
text-align: center;
}
}
</style>
// webpack.config.js
modules.exports = {
module: {
loaders: [
// ...
{
test: /\.css$/,
loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
},
]
}}
// .css
.title {
color: red;
}
:global(.title) {
color: green;
}
// .tsx
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};