首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
V2EX  ›  Vue.js

Vue 的 CSS-in-JS 方案

  •  
  •   gilgamesh · 106 天前 · 1340 次点击
    这是一个创建于 106 天前的主题,其中的信息可能已经有所发展或是发生改变。
    17 回复  |  直到 2019-01-11 11:09:36 +08:00
        1
    noe132   106 天前
    其实 angular 那种一个 ts 文件为组件入口,在 @Component 装饰器里声明模板和样式文件的位置,由 compiler 编译为一个组件的方式最理想。
        2
    noe132   106 天前
    我倒是很反感把 html css js 写在一个文件里。有些组件会比较大,代码几百行到 1 千行,上下翻动找 html,css,js,真不如分成 3 个文件,在编辑器里切 tab 来的方便
        3
    brotherlegend   106 天前 via Android
    楼主这个是什么编辑器主题与字体,好看啊
        4
    IamJ   106 天前
    同求字体
        5
    Hilong   105 天前 via Android
    感觉实现略丑陋,这样写,嵌套和编辑器提示可以吗?
        6
    kawaiidora   105 天前
    这不是把 react 的 styled-components 搬过来了么,vue 用户又多了个选择。

    @noe132 我倒觉得写一个文件里方便些,大概是因为没写过那么大的组件吧
        7
    murmur   105 天前   ♥ 1
    vue 不是支持三段式组件么 这种行内 css 是真的丑陋
        8
    njstt   105 天前
    字体是 mononoki
        9
    wangxiaoaer   105 天前
    真是丑出天际,之所以不想用 react 和 ng,就是没有类似 vue 这种单文件,文件夹爆炸难受死了。
        10
    binaryify   105 天前 via iPhone
    @noe132 Vue 一直都可以分离啊
        11
    chouchoui   105 天前
    这字体是 Fira Code 吧
        12
    Elephant696   105 天前
    @noe132 vue 文件也支持分离,只是很多人没有注意到。一般代码量不多确实写在一个 vue 文件里面好一点,也方便管理。不过代码量上去了我还是喜欢把 css 抽出来。
        13
    Elephant696   105 天前
    最讨厌的就是 CSS-in-JS 的写法,写起来难受,看起来更丑陋
        14
    kingwl   105 天前
    还是比较喜欢写 JSX/TSX 然后就随便用 css in js 方案了
        15
    whitev2   105 天前
    等一个 html-in-JS,前端好不容易 html、css、js 都分开了,结果现在又要都混一起了
        16
    noe132   105 天前
    @binaryify @Elephant696
    我的意思是
    以 ts 文件作为组件入口
    就是其他文件 import 进来时 import 一个 ts 文件而不是 vue 文件
    原因是因为 import ts 进来有类型说明,在用到 refs 时可以直接指定为当前类,而 import vue 的话做不到。
    希望 vue3 有所改善
        17
    TomVista   103 天前
    @whitev2 css 对象 class 对象可以抽出来,放到别的位置.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="test" v-bind:style='[state.isSelect?styles.testSelect:styles.testNoSelect]' v-bind:class='[]'>

    </div>
    <script>
    var test = new Vue ({
    el:'#test',
    data:{
    state:{
    isSelect:true
    },
    styles:{
    testSelect:{
    'width':'100px',
    'height':'100px',
    'background-color':'red'
    },
    testNoSelect:{
    'width':'100px',
    'height':'100px',
    'background-color':'blue'
    }
    },
    classes:{

    }
    }
    });
    </script>
    </body>
    </html>
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   864 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 20:37 · PVG 04:37 · LAX 13:37 · JFK 16:37
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1