完成:vue-styled-components
总结
import styled,{ThemeProvider,injectGlobal} from 'vue-styled-components';
// 返回组件选项对象
styled.div`...`
// 可通过props传参的组件
const StyledButton = styled('button', { primary: {
type:Boolean,
default:"some"
})`...`
// 通过组件创建样式组件
const RouterLink = Vue.component('router-link')
const StyledLink = styled(RouterLink)`...`
// 主题组件
const Wrapper = styled.section`
background: ${props => props.theme.primary};
`;
<theme-provider :theme="{
primary: 'palevioletred'
}">
<wrapper>
...
</wrapper>
</theme-provider>
// 扩展原有样式组件
const TomatoButton = StyledButton.extend`...`
// 复制样式创建新的样式组件
const Link = Button.withComponent('a')
// 添加全局样式
injectGlobal`...`
——————————————————————————————————————————————————————————————————————————————————
基础
https://es6.ruanyifeng.com/#docs/string#模板字符串
- 注释:模板字符串返回字符串类型
- 如果
${...}
中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法 - 模板字符串能够嵌套
- 注释:在
${...}
使用另一个模板字符串
- 注释:在
https://es6.ruanyifeng.com/#docs/string#标签模板
- 模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能
alert`hello`
// 等同于
alert(['hello'])
- 如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数
- 注释:参数一这个字符串数组是以${}为参考位进行split的,例如
'bacada'.split('a') // ["b", "c", "d", ""]
和'abacad'.split('a') // ["", "b", "c", "d"]
,即当变量在前后头部时会在前后多出一个空字符串的数组项。也可以理解为常量数组比变量参数长度多1 - 注释:参数一字符串数组其他还包含一个名为raw的属性
stringArr.raw
,保存的是转义后的原字符串数组。为了方便取得转义之前的原始模板而设计的
- 注释:参数一这个字符串数组是以${}为参考位进行split的,例如
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
- “标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容
function SaferHTML(templateData) {
let s = templateData[0];
for (let i = 1; i < arguments.length; i++) {
let arg = String(arguments[i]);
// Escape special characters in the substitution.
s += arg.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
// Don't escape special characters in the template.
s += templateData[i];
}
return s;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
// <p><script>alert("abc")</script> has sent you a message.</p>
- 标签模板的另一个应用,就是多语言转换(国际化处理)
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx,您是第xxxx位访问者!"
- 使用标签模板,在 JavaScript 语言之中嵌入其他语言
- 疑问:vue中的jsx是否采用同样的方式实现?可以帮助理解JSX的属性绑定
- 疑问:在JS中执行其他语言的代码,实际上是文本处理后转化为相同功能的当前语言后执行?
jsx`
<div>
<input
ref='input'
onChange='${this.handleChange}'
defaultValue='${this.state.value}' />
${this.state.value}
</div>
`
- 模板处理函数的第一个参数(模板字符串数组),还有一个raw属性,保存的是转义后的原字符串数组。为了方便取得转义之前的原始模板而设计的
- 疑问:JS中各种遍历的本质和区别?
- 注释:
\n
解析为文本换行,在字符串和模板字符串中都一样。要定义'\n'
字符串应转义为\\n
tag`First line\nSecond line`
function tag(strings) {
console.log(strings.raw[0]);
// strings.raw[0] 为 "First line\\nSecond line"
// 打印输出 "First line\nSecond line"
}
https://es6.ruanyifeng.com/#docs/string#模板字符串的限制
- 模板字符串默认会将
\u
当作Unicode 字符、\x
当作十六进制字符和\n
进行转义,前两个由于格式问题可能导致转义失败,这时包含该字符串的数组项将被填充为undefined,在raw中能拿到转义前字符串- 疑问:在其他语言中如果存在${}的语法应该也会导致解析有误
function tag(strs) {
strs[0] === undefined
strs.raw[0] === "\\unicode and \\u{55}";
}
tag`\unicode and \u{55}`
————————————————————————————————————————————————————————————————————————————
https://github.com/styled-components/vue-styled-components
- 使用建立在language-sass和language-css之上的CSS语法
Support
yarn add vue-styled-components
Usage
Basic
- 注释:styled生成的组件默认含有插槽
- 注释:styled.div返回的是组件的选项对象
import styled from 'vue-styled-components';
const App = styled.div`
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
`;
const Nav = styled.div`
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
`
export default {
render() {
return <App>
<Nav>
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</Nav>
<router-view />
</App>
}
}
Adapting based on props
- 注释:可以传入参数控制的styled组件,带有props
- 注释:这是一个真实的vue props选项,遵循vue的方式
import styled from 'vue-styled-components';
const btnProps = { primary: Boolean };
const StyledButton = styled('button', btnProps)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
`;
export default StyledButton;
<styled-button primary>Primary</styled-button>
Theming
- 注释:ThemeProvider只需要在根结点绑定theme对象,采用inject方式向子孙组件传递theme对象,所以普通的对象是不具备响应的
- 注释:ThemeProvider是一个组件选项对象
- 疑问:styled.default.div在实际情况中报错,是笔误?
- 注释:Wrapper中的props.theme并非一个真实的props选项
import styled,{ThemeProvider} from 'vue-styled-components'
const Wrapper = styled.default.section`
padding: 4em;
background: ${props => props.theme.primary};
`;
<theme-provider :theme="{
primary: 'palevioletred'
}">
<wrapper>
// ...
</wrapper>
</theme-provider>
Style component constructors as router-link
- 注释:styled作为函数时第一个参数不仅可以传入原生标签名字符串还可以传入组件的构造函数来创建样式组件
- 疑问:传入构造函数应该可以和传入字符串一样使用第二参数创建props供外部传入样式变量
- 疑问:
Vue.component('router-link')
不能正确获取组件函数,正确应为Vue.component('RouterLink')
import styled from 'vue-styled-components';
const RouterLink = Vue.component('router-link')
const StyledLink = styled(RouterLink)`
color: palevioletred;
font-size: 1em;
text-decoration: none;
`;
<styled-link to="/">Custom Router Link</styled-link>
- 使用
.extend
方法扩展已经定义好了的样式组件,保留组件原有样式并加以扩展或覆盖
import StyledButton from './StyledButton';
const TomatoButton = StyledButton.extend`
color: tomato;
border-color: tomato;
`;
export default TomatoButton;
withComponent
- 注释:可以复制其他组件的样式生成一个新的组件
const Button = styled.button`
background: green;
color: white;
`
const Link = Button.withComponent('a')
injectGlobal
- 全局样式,每个应用最多使用一次
- 注释:可以在多个组件内使用,使用一次并不是硬性规定
// global-styles.js
import { injectGlobal } from 'vue-styled-components';
injectGlobal`
@font-face {
font-family: 'Operator Mono';
src: url('../fonts/Operator-Mono.ttf');
}
body {
margin: 0;
}
`;
Syntax highlighting
- 在vscode中vscode-styled-components插件用来支持语法高亮
- 注释:目前该插件不支持
styled('div',propsObj)...
这样的高亮提醒 .extend...
这个方法也不支持高亮
————————————————————————————————————————————————————————————————————————————
https://github.com/Microsoft/typescript-styled-plugin
- 注释:用于在ts中实现styled-components高亮提醒,及相关设置
- 疑问:vscode-styled-components插件在JS中存在问题,是否在TS中表现会更好点?
Usage
With VS Code
- 疑问:如果使用的是工作区版本的TypeScript,则必须在工作区中的TypeScript版本旁边手动安装插件?
Configuration
Tags
- 可以通过配置为其他标记名称启用IntelliSense
- 注释:当需要使用sty来代替styled时需要进行配置
- 注释:在JS中无法生效,不知道是不是配置文件错误
// tsconfig.json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin",
"tags": [
"styled",
"css",
"sty"
]
}
]
}
}
import sty from 'styled-components'
sty.button`
color: blue;
`
Linting
- 疑问:禁用错误报告,TS中对模板语法会出现错误吗?
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin",
"validate": false
}
]
}
}
- 还可以配置使用linter设置报告错误的方式
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin",
"lint": {
"vendorPrefix": "error",
"zeroUnits": "ignore"
}
}
]
}
}
- 支持以下选项
- 注释:略,需要eslint基础
Emmet in completion list
- 已经默认包括Emmet的输入提醒
- 疑问:在TS中似乎有问题,需要通过Ctrl+Space显示输入提醒
- 支持以下选项
- 注释:略,需要Emmet基础
完成:vue-styled-components的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- vue ui components
vue ui components h_ui https://www.npmjs.com/~hs_ui https://www.npmjs.com/package/h_ui_beta https:// ...
- [Vue @Component] Handle Errors and Loading with Vue Async Components
Because async components are not bundled with your app, they need to be loaded when requested. This ...
- vue & npm & components & plugins
vue & npm & components & plugins how to publish an vue ui component to npm? https://www. ...
- vue & dynamic components
vue & dynamic components https://vuejs.org/v2/guide/components-dynamic-async.html keep-alive htt ...
- [Vue @Component] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- [Vue @Component] Load Vue Async Components
Vue provides a straight-forward syntax for loading components at runtime to help shave off initial b ...
- [Vue @Component] Write Vue Functional Components Inline
Vue's functional components are small and flexible enough to be declared inside of .vue file next to ...
- [Vue] Load components when needed with Vue async components
In large applications, dividing the application into smaller chunks is often times necessary. In thi ...
- [Vue] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
随机推荐
- 每日一练_PAT_B_真题
A+B和C (15) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定区间[-2的31次方, 2的31次方] ...
- 《N诺机试指南》(二)C++自带实用函数
1.排序sort函数: 2.查找: 实例: 3. 队列:
- ARTS Week 2
Nov 4,2019 ~ Nov 10,2019 Algorithm 本周主要的算法是如何求两个数的最大公因数.传统的想法便是对这两个数分解质因数,而后找到其公共因数,再相乘,这样就会得到最大公因数了 ...
- Codeforces Round #620 F2. Animal Observation (hard version) (dp + 线段树)
Codeforces Round #620 F2. Animal Observation (hard version) (dp + 线段树) 题目链接 题意 给定一个nm的矩阵,每行取2k的矩阵,求总 ...
- DaSiamRPN学习
9月14日,2018年视觉目标跟踪挑战赛(Visual-Object-Tracking Challenge 2018)的结果在ECCV Workshop上揭晓.VOT2018共设三项任务:Baseli ...
- BZOJ 3339 Rmq Problem(离线+线段树+mex函数)
题意: q次询问,问[l,r]子区间的mex值 思路: 对子区间[l,r],当l固定的时候,[l,r]的mex值对r单调不减 对询问按照l离线,对当前的l,都有维护一个线段树,每个叶节点保存[l,r] ...
- vs 搭配 Linux 开发
这是一篇翻译,为什么突然想翻译文章了呢,因为很多大佬们都说英语对程序员还是挺重要的,毕竟互联网的最新技术基本都在歪果仁那边,如果英语不好,不会看国外的文档的话,将会错失接触第一手资料的机会,失去很多先 ...
- Markdown编写接口文档模版
接口名称 1) 请求地址 https://apis.cnblogs.com/user/info?a=xx&b=xx 2) 调用方式:HTTP GET 3) 接口描述: 接口描述详情 4) 请求 ...
- 开源堡垒机jumpserver的安装
开源跳板机jumpserver安装 简介 Jumpserver 是全球首款完全开源的堡垒机, 使用GNU GPL v2.0 开源协议, 是符合4A 的专业运维审计系统 Jumpserver 使用Pyt ...
- solr常用操作及集成分词器或cdh集群部署说明
首先,如果是从http://lucene.apache.org/solr/下载的solr,基本都是自带集成的jetty服务,不需要单独搭建tomcat环境,但是要注意jdk版本,直接解压通过cmd命令 ...