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

有哪些基于 Vue 的 ui 框架库,开发体验比较友好的,最好支持动态绑定

  •  1
     
  •   tctc4869 · 2019-10-27 18:20:05 +08:00 · 9026 次点击
    这是一个创建于 1857 天前的主题,其中的信息可能已经有所发展或是发生改变。

    分为移动端和 pc 端,主要在 web 浏览器上显示,想要找一个基于 vue.js 的 ui 框架,开发体验比较友好。目前学习 element,看看是否含有所需的功能,值得使用

    不过 vue 的 ui 框架有很多,我不知道其他的有没有满足我的,有人知道吗,能满足下列要求就行

    支持动态添加控件 通过 js 方法实现指定的 ui 组件属性和 data 里的某个属性进行动态绑定, 有基本常用的组件,比如常用表单,数据表格,主题定制与统一 自带布局容器,而且使用简便,不像使用原生 html+css 那样布局麻烦。 支持自定义组件

    第 1 条附言  ·  2019-10-28 09:46:59 +08:00
    动态添加控件,通过自带的 js 方法动态添加控件,就想 Jquery 的 Append 方法一样,动态绑定是通过 js 方法指定 data 里的某个属性和 ui 组件的属性进行绑定。我就说个会用到这种的需求,动态多输入框,模板表单页面生成,这就需要使用动态添加控件,动态绑定。哪个 vue ui 框架有这种功能?然后是自定义 ui 组件

    当然模板页面这种东西也可以用代码生成器或者是后端的模板引擎搞定。
    49 条回复    2019-11-07 22:30:37 +08:00
    ggicci
        1
    ggicci  
       2019-10-27 19:13:24 +08:00
    vuetify 党,material design
    banliyaya
        2
    banliyaya  
       2019-10-27 19:18:27 +08:00 via iPhone
    pc 主要 饿了么 ant iview 吧。移动端我就用过 ant
    tctc4869
        3
    tctc4869  
    OP
       2019-10-27 19:30:40 +08:00
    @ggicci 有通过 js 进行 Append dom 操作和动态绑定功能吗?
    tctc4869
        4
    tctc4869  
    OP
       2019-10-27 19:44:16 +08:00
    @banliyaya 你知道 element 这个框架怎么实现动态添加 Dom 和动态绑定吗,这两个功能对于我来说比较关键。
    loading
        5
    loading  
       2019-10-27 20:58:50 +08:00 via Android
    目前我在用 buefy,可能不符合你需求,他只是个一个 css 绑起来了。
    hkitdog
        6
    hkitdog  
       2019-10-27 21:20:09 +08:00 via iPhone
    Mint
    wunonglin
        7
    wunonglin  
       2019-10-27 21:20:59 +08:00
    vuetify
    wwwyiqiao
        8
    wwwyiqiao  
       2019-10-27 21:28:17 +08:00
    iview 很好用
    wangyzj
        9
    wangyzj  
       2019-10-27 22:02:02 +08:00
    看颜值的话
    pc 我用的 element
    mobile 我用的 vant
    magicdawn
        10
    magicdawn  
       2019-10-27 23:53:07 +08:00   ❤️ 2
    vuetify 不好用, 用这个吧 https://quasar.dev/

    vuetify 吐槽 https://magicdawn.fun/2019/02/05/vue-component-think/
    一个 Tab 组件都是非受控组件, 曾经是, 现状未知.
    effec
        11
    effec  
       2019-10-27 23:59:03 +08:00
    我也推荐一下 vuetify 吧
    Sendya
        12
    Sendya  
       2019-10-28 00:19:50 +08:00 via Android
    看看这个? vue.ant.design
    banliyaya
        13
    banliyaya  
       2019-10-28 00:49:24 +08:00 via iPhone
    @tctc4869 数据双向绑定? v-model 或者{{}}啊。动态添加 dom 要么 js 写要么 v-for,数组 push 值就可以了啊
    guolaopi
        14
    guolaopi  
       2019-10-28 00:50:58 +08:00
    不太理解你说的 动态添加控件是什么意思
    dodo2012
        15
    dodo2012  
       2019-10-28 04:47:40 +08:00
    pc 用的 heyui,手机用的 vant,
    mrcotter2013
        16
    mrcotter2013  
       2019-10-28 06:28:31 +08:00
    @magicdawn 这个关于 tab 的吐槽很奇怪,我 2018 年就用 vuetify 实现了默认选择某一个 tab 的功能,可以通过 router 传递 tab 的 key,然后在 mounted() 中写入类似 this.currentTab = this.$route.params.tab
    mamahaha
        17
    mamahaha  
       2019-10-28 07:29:36 +08:00
    vue-ant-design、element-ui。有空就扫扫 npm 和 github 排名,js 就是个宝藏。
    chouchoui
        18
    chouchoui  
       2019-10-28 08:15:02 +08:00
    有些人连文档都看不明白就不要说 Vuetify 不好用
    murmur
        19
    murmur  
       2019-10-28 08:56:58 +08:00
    vue 选 element,react 选 antd
    galikeoy
        20
    galikeoy  
       2019-10-28 09:00:35 +08:00
    动态是什么意思, 不是很懂你的需求
    boringdays2015
        21
    boringdays2015  
       2019-10-28 09:03:04 +08:00   ❤️ 1
    都用 vue 还纠结什么动态的只能说你不懂这种数据驱动的框架
    jimbray
        22
    jimbray  
       2019-10-28 09:05:50 +08:00
    打开 Vuetify 文档,看到一句“除非你需要安装特定的包例如 ( vuex 或 vue-roter )”,翻译手误了
    chenuu
        23
    chenuu  
       2019-10-28 09:27:08 +08:00
    看过不少都不喜欢,后来选了这个 https://github.com/myliang/fish-ui
    tctc4869
        24
    tctc4869  
    OP
       2019-10-28 09:50:04 +08:00
    @galikeoy
    动态添加控件,通过自带的 js 方法动态添加控件,就像 Jquery 的 Append 方法一样,动态绑定是通过 js 方法指定 data 里的某个属性和 ui 组件的属性进行绑定,或者是用 js 通过指定 vue 里的 method 方法与 ui 组件的事件进行绑定,。我就说个会用到这种的需求,动态多输入框,模板页面生成,这就需要使用动态添加控件,动态绑定。
    galikeoy
        25
    galikeoy  
       2019-10-28 09:54:31 +08:00
    @tctc4869 #24 呃呃呃,这些 v-for,v-if,不就好了吗,vue 不都是数据绑定得嘛,数据一变视图也会变啊。。。,你说的这些基本所有 ui 框架都能实现
    tctc4869
        26
    tctc4869  
    OP
       2019-10-28 09:56:10 +08:00
    @boringdays2015 用 js 实现模板表单生成这种功能,就需要动态添加 ui 组件,动态绑定。说别人不懂,是因为你没有这个需求。而别人有这个需求。能实现这种的具备 MVVM 的 ui 框架的编码功能,也有的,但 javascript 上我还没发现,但在 Windows 的 c/s 程序前端框架中,就有个 ui 框架,拥有具备动态绑定和动态添加控件的 MVVM 功能。
    galikeoy
        27
    galikeoy  
       2019-10-28 09:57:00 +08:00
    @tctc4869 #24 就算不用 ui 框架,vue 自己也能实现。
    模板页面生成? 我怎么感觉,我说的 vue 跟你说得 vue 不是一个东西呢?
    geekdocs
        28
    geekdocs  
       2019-10-28 09:59:24 +08:00
    看我导航站,有对应分类的~
    fishlium
        29
    fishlium  
       2019-10-28 09:59:33 +08:00
    @tctc4869 楼上说得是对的,你在数据里面加一条数据,vue 就自动帮你 append 了,不需要你自己手动用 js append 了
    murmur
        30
    murmur  
       2019-10-28 10:01:35 +08:00
    @galikeoy 你说的是 jeecg,拖拖拽拽写页面,还有数据库生成
    shintendo
        31
    shintendo  
       2019-10-28 10:03:37 +08:00
    @tctc4869 感觉你用 vue 的姿势有问题,跟 ui 框架没关系
    galikeoy
        32
    galikeoy  
       2019-10-28 10:03:48 +08:00
    @murmur #30 大佬,你是不是回复错人了
    tctc4869
        33
    tctc4869  
    OP
       2019-10-28 10:08:12 +08:00
    @shintendo 我想自己搞一个动态模板页面功能,就得挑选合适的前端框架,数据绑定这种比较方便,所以考虑 vue。
    jsun
        34
    jsun  
       2019-10-28 10:08:37 +08:00
    lz 的解释看的一愣一愣的,感觉学的不是一个 vue
    lxg1421
        35
    lxg1421  
       2019-10-28 10:11:59 +08:00
    quasar
    tctc4869
        36
    tctc4869  
    OP
       2019-10-28 10:12:50 +08:00
    @murmur 你说的对,但数据库生成,我可不敢,拖拖拽拽写页面我喜欢,但 我要自己搞一个,别人写的我不放心,所以得挑选合适的前端框架,数据绑定这种比较方便,所以首选 vue。
    agdhole
        37
    agdhole  
       2019-10-28 10:13:22 +08:00 via Android   ❤️ 2
    @jimbray vuetify 的中文文档大部分都是我一个人在翻译,一次性量太大了容易迷糊
    yunye
        38
    yunye  
       2019-10-28 10:15:37 +08:00
    matenshi
        39
    matenshi  
       2019-10-28 10:28:46 +08:00
    那么有没有好用的 vuetify admin 模版呢。。。
    agdhole
        40
    agdhole  
       2019-10-28 10:30:59 +08:00
    agdhole
        41
    agdhole  
       2019-10-28 10:36:42 +08:00
    @magicdawn #10 你这文章里面的 tabs,直接写 value 就是设置默认选中值
    matenshi
        42
    matenshi  
       2019-10-28 10:42:35 +08:00
    @agdhole 这个我也看了,好看是好看,就是基础版的组件或页面少了点。
    micean
        43
    micean  
       2019-10-28 10:44:26 +08:00
    还在想 JQ 的 Append,说明你的思维还没完全转到 mvvm 这块来
    tctc4869
        44
    tctc4869  
    OP
       2019-10-28 10:53:54 +08:00   ❤️ 1
    @micean 你应该还没看懂我表达的是什么。
    ceet
        45
    ceet  
       2019-10-28 14:11:43 +08:00
    vant
    a4854857
        46
    a4854857  
       2019-10-28 14:27:40 +08:00
    但在 Windows 的 c/s 程序前端框架中,就有个 ui 框架,拥有具备动态绑定和动态添加控件的 MVVM 功能。
    ---------
    楼主你不如说说是哪个框架,大家不就知道你想要的是什么了么,目前看你的表述感觉你说的就是 vue 已经有的功能
    overflow99
        47
    overflow99  
       2019-10-28 18:09:46 +08:00
    pc element 移动 vant
    magicdawn
        48
    magicdawn  
       2019-10-31 17:27:29 +08:00
    @mrcotter2013 @agdhole

    Tabs 槽点(2019-10-31)
    - v-tabs: 可以使用 v-model, 但没有标明 input 事件
    - v-tab: 使用 key & href, 不写 href TabPanel 出不来, 猜测使用 `key` 与 v-tabs 的 value 匹配, 文档未注明
    - v-tabs 不写任何属性可以使用, 表明这是非受控组件(自包含状态)
    TimeRain
        49
    TimeRain  
       2019-11-07 22:30:37 +08:00 via Android
    vant 和 iview
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5819 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:17 · PVG 11:17 · LAX 19:17 · JFK 22:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.